[TUTORIAL] - Desarrollar un videojuego Parte 1

Estado
Cerrado para nuevas respuestas

rob1104

Super Moderador
Super Moderador
Hola a todos, en este pequeño tutorial explicare como crear un pequeño videojuego, no esperen un Crysys o GTA4, si no que haremos una recreacion del considerado primer videojuego del mundo: PONG; pero creanme, la logica es lo mas importante, y desarrollandola poco a poco lograremos proyectos cada vez mas grandes.

Esto es solo con la intencion de aprender un poco mas, y ver la diferencia entre programar una aplicacion normal y un videojuego.

Como lenguaje usaremos: Visual Basic .NET, y voy a dar por hecho que ya se sabe aunque sea lo mas basico de dicho lenguaje; así que sin mas preambulos, comenzemos ;)

INTRODUCCION

Desde siempre, la programación de videojuegos ha estado envuelta en una magia especial. Recuerdo aquellos primeros videojuegos que podían verse en los salones recreativos. En ellos el objeto era bastante simple, acumular el máximo de puntuación aniquilando a las naves invasoras o comiéndose los puntos que había en la pantalla sin ser atrapado por los fantasmas. Sin embargo, a pesar de la simpleza de aquellos primeros juegos, ya causaban expectación, y la gente se acercaba a ver cuál era el record del día.

La programación de videojuegos no es tan difícil, aun así, mantiene algúnas diferencias respecto a la programación de aplicaciones. Crear un videojuego requiere visión global. No se trata solo de centrarse en un solo proceso, sino de ser capaz de ver la totalidad de los procesos interactuando entre sí.

Otra de las diferencias más notables es el uso de un motor, y esto se ve desde un simple pac-man, hasta un juego tipo Gears of War; la ventaja de los motores es que pueden ser reutilizables y adaptables a diferentes videojuegos, logrando así crear diferentes videojuegos de un solo motor. Por ejemplo los videojuegos: Unreal Tournament 3 y Gears of War comparten el mismo motor llamado: Unreal Engine; eso ahorra tiempo y dinero a las compañías.

Bueno, después de esta pequeña introducción pasemos a lo interesante.

REQUERIMENTOS

Bien, comencemos, como mencione anteriormente, desarrollaremos una versión reducida del videojuego PONG, solamente con el fin de explicar y que puedan comprender el proceso del desarrollo de un videojuego. Lo desarrollaremos en el lenguaje Visual Basic .NET, y por comodidad será en la suite Microsoft Visual Studio 2008 (adaptable a 2005 y 2003).

DESARROLLO

Para llevar un orden, enumerare los pasos y pondré todas las imágenes posibles para no perdernos en el desarrollo del juego.

1.- Preparemos nuestro ambiente de trabajo, localicemos nuestra versión de Visual Studio (en mi caso es Visual Studio 2008 Profesional).

2.- Una vez abierto nuestro ambiente de trabajo, crearemos un nuevo proyecto, el cual será obviamente una aplicación de Windows Forms con lenguaje Visual Basic.

13387

3.- Bien, tenemos todo listo para desarrollar nuestro juego, ubiquemos bien las herramientas, en mi caso las tengo acomodadas tal cual sería: Visual Basic 2008 Express.

13388

4.- Vamos a diseñar la “mesa” de nuestro juego, la cual será nuestro Form, al cual le modificaremos las siguientes propiedades:

Name: frmPrincipal

BackColor: Black

Size: 640,480

Text: Pong

5.- Tenemos la mesa lista, ahora faltan nuestras raquetas, las cuales por comodidad llamare tablas, y por supuesto la pequeña pelota que estará moviendose de un lado a otro. Vamos a añadir tres PictureBox; los cuales seran la tabla del jugador, la tabla del CPU y la bola.

Vamos a modificarles las propiedades de tal forma que queden"

Name: tablaJugador

BackColor: Cyan

Location: 31, 151

Size: 16,128

Name: tablaCPU

BackColor: Cyan

Location: 581, 151

Size: 16,128

Name: bola

BackColor: White

Location: 317, 180

Size: 20,20

Por ultimo agregamos dos Label, las cuales seran usadas para representar la puntuacion del jugador y del CPU, las propiedades son las siguientes:

Name: lblJugador

Font: Microsoft Sans Serif, 18pt, style=Bold

Location: 88, 21

Text: 0

Name: lblCPU

Font: Microsoft Sans Serif, 18pt, style=Bold

Location: 495, 21

Text: 0

Debera lucir mas o menos asi:

13389

Ahora viene añadir el elemento mas importante, el cual sera el motor del juego, me refiero a un Timer, añadimos uno al formulario y solo modificaremos dos propiedades:

Enabled: True

Interval:20

Hasta aquí termina la parte del diseño, solo resta programar los componentes para completar nuestro pequeño juego.

a) Mover nuestra tabla (tablaJugador) de acuerdo al movimiento del mouse.

Esta parte no es tan dificil como parece, simplemente necesitaremos un poco de matematicas para saber el la maxima y minima altura. Gracias al poder de la plataforma .NET podemos facilmente mover la tabla con el evento MouseMove de frmPrincipal, lo que haremos es redibujar la tabla de acuerdo a la posicion del mouse.

Insertar CODE, HTML o PHP:
Private Sub frmPrincipal_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseMove

    'Dejando 5 y 40 pixeles para arriba y abajo respectivamente, hacemos que la tabla del jugador siga

    'al cursor del mouse de acuerdo a su movimiento (solo arriba y abajo, ya que no la podremos mover

    'de izquierda a derecha o viceversa para respetar las reglas del PONG  

    If e.Y > 5 And e.Y < Me.Height - 40 - tablaJugador.Height Then

        tablaJugador.Location = New Point(tablaJugador.Location.X, e.Y)

    End If

End Sub
b)Creamos la inteligencia del CPU

Aqui creamos a nuestro oponente, el cual sera controlado por la computadora, hay varias formas de hacerlo; por cuestiones de espacio usaremos una formula matematica en nuestro "motor", lo cual hara relativamente imposible anotarle, pero no se preocupen, en una proxima revision veremos como hacer niveles de dificultad y diferentes formas de poder vencer al CPU. Por lo pronto empezemos programando el evento Tick de nuestro Timer, que sera el motor de todo el juego.
PHP:
'Este código hace lo del evento Form_MouseMove, solo que para el CPU, dejando 5 pixeles arriba

'y 40 abajo de tolerancia, la tabla del CPU va a seguir la bola de acuerdo a su dirección

    If bola.Location.Y > 5 And bola.Location.Y < Me.Height - 40 - tablaCPU.Height Then

        tablaCPU.Location = New Point(tablaCPU.Location.X, bola.Location.Y)

    End If
c) Movimiento de la bola

Para lograr mover la bola requeriremos un poco de habilidad matematica, solamente lo basico sobre Seno y Coseno, para calcular la velocidad y angulo de el movimiento de la bola. Vamos a necesitar algúnas variables globales, así que vamos a declararlas justo después de Public Class frmPrincipal:
PHP:
'Variables para mover la bola

Dim velocidad As Single = 20

Dim aleatorio As New Random()

Dim AnguloX As Single = Math.Cos(aleatorio.Next(5, 10)) * velocidad

Dim AnguloY As Single = Math.Sin(aleatorio.Next(5, 10)) * velocidad
velocidad: obviamente es para definir la velocidad de la bola, entre mas grande sea el numero mas velocidad tendra.

aleatorio: es para la aleatoriedad de los angulos, definimos el objeto para generar numeros aleatorios, que al combinarlos con AnguloX y AnguloY da la sensacion de que la bola rebotara en forma angular.

Ahora solamente añadimos la siguiente linea al evento Tick del Timer1 (que de ahora en adelante llamare motor):
PHP:
'Esta unica linea hace que la bola se mueva por el tablero aleatoreamente siguiendo los principios

'matematicos del seno y coseno para llevar una dirección diagonal no lineal.

bola.Location = New Point(bola.Location.X + AnguloX, bola.Location.Y + AnguloY)
d) Hacer la bola rebotar

Esto es facil, la tecnica es simplemente ir haciendo comparaciones entre altura maxima y minima para redibujar la bola de forma que simule un rebote angular, el siguiente codigo va en el motor:
PHP:
'Verifica si la bola tocó la "Pared" de arriba, si lo hace vuelve a dibujar la bola

'haciendo simulación de rebote.

If bola.Location.Y < 0 Then

    bola.Location = New Point(bola.Location.X, 0)

    AnguloY = -AnguloY

End If
Ahora invirtiendo el angulo, verificamos la pared de abajo, con el siguiente codigo en el motor:
PHP:
'Verifica si la bola tocó la "Pared" de abajo, si lo hace vuelve a dibujar la bola

'haciendo simulación de rebote intercalando la dirección.

If bola.Location.Y > Me.Height - bola.Size.Height - 45 Then

    bola.Location = New Point(bola.Location.X, Me.Height - bola.Size.Height - 45)

    AnguloY = -AnguloY

End If
Bien, ya que la bola tiene la habilidad de repotar en las paredes de arriba y abajo, también debera tener la habilidad de rebotar si toca algúna de las tablas, entonces simplemente comparamos si se la bola toca algúna tabla, la del jugador o la del cpu, y hacemos el rebote al angulo contrario, eso se hace añadiendo el siguiente codigo al motor:
PHP:
'Verifica si la tabla de jugador intersecta con la bola, eso quiere decir que hemos

'tocado la bola, entonces dibuja una nueva bola haciendo simulación de rebote y la

'intercambia de dirección.

If bola.Bounds.IntersectsWith(tablaJugador.Bounds) Then

    bola.Location = New Point(tablaJugador.Location.X +   bola.Size.Width, bola.Location.Y)

    AnguloX = -AnguloX

End If

'Verifica si la tabla del CPU intersecta con la bola, eso quiere decir que el CPU

'tocó la bola, entonces dibuja una nueva bola haciendo simulación de rebote y la

'intercambia de dirección.

If bola.Bounds.IntersectsWith(tablaCPU.Bounds) Then

    bola.Location = New Point(tablaCPU.Location.X - bola.Size.Width, bola.Location.Y)

    AnguloX = -AnguloX

End If
e) Fluidez del juego

Llego la hora de comprobar si se ha tocado la pared izquierda o derecha, al hacerlo se sumara la puntuacion de acuerdo al jugador que haya anotado y se redibuja la bola para que rebote a la dirección opuesta. Primero declaramos un par de variables globales mas para la puntuacion del jugador:
PHP:
'Variables globales para determinar la puntuación

Dim puntuacionCPU As Integer = 0

Dim puntuacionJugador As Integer = 0
Ahora si el codigo para saber quien ha anotado
PHP:
'Aqui verificamos si el CPU ha anotado, si la bola toca la "pared derecha" entonces

'Vuelve a dibujar la bola en el centro y aumenta la puntuación.

If bola.Location.X < 0 Then

    puntuacionCPU += 1

    bola.Location = New Point(Me.Size.Width / 2, Me.Size.Height / 2)

    lblCPU.Text = Convert.ToString(puntuacionCPU)

End If

'Aqui verificamos si el jugador ha anotado, si la bola toca la "pared derecha" entonces

'Vuelve a dibujar la bola en el centro y aumenta la puntuación.

If bola.Location.X > Me.Width -   bola.Size.Width - tablaCPU.Width Then

    puntuacionJugador += 1

    bola.Location = New Point(Me.Size.Width / 2, Me.Size.Height / 2)

    lblJugador.Text = Convert.ToString(puntuacionJugador)

End If
f) Esconder el cursor del mouse

Puede ser molesto estar viendo el cursor al mover la tabla, así que lo escondemos al iniciar el juego, el cual es el evento Load de frmPrincipal
PHP:
Private Sub frmPrincipal_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    'Al cargar el formulario escondemos el cursor del mouse

    Windows.Forms.Cursor.Hide()

End Sub
g) Salir del juego al presionar Esc

Para hacer mas fácil cerrar el juego, programaremos la tecla esc para que al ser pulsada lo termine. Para ello vamos al evento KeyDown de frmPrincipal:
PHP:
 'Al presionar ESC cierra el juego

Private Sub frmPrincipal_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles Me.KeyDown

    If e.KeyValue = Keys.Escape Then

        Me.Close()

    End If

End Sub
h) Redimensionar controles al cambiar de tamaño el formulario

Por ultimo vamos a redimensionar los controles, para que al cambiar de tamaño el formulario, estos se adapten, para ello nos vamos al evento SizeChanged de frmPrincipal:
PHP:
'Al redimensionar el form se adaptan los controles.

Private Sub frmPrincipal_SizeChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.SizeChanged

    tablaCPU.Location = New Point(Me.Width - 44, tablaCPU.Location.Y)

    lblCPU.Location = New Point(Me.Width - 54, lblJugador.Location.Y)

End Sub
CONCLUSION

Bien, si siguieron el tutorial al pie de la letra, tendran una versión jugable del clasico pong, pronto realizare otro tutorial para mejorarla, por ejemplo agregar un menu, dificultad variable, modo 2 jugadores, selección de velocidad y angulo, etc...

Por lo pronto, recomiendo que juegues un poco con el codigo, modificalo y ve como cambian las acciones, cambia los colores, haslo tuyo.

Adjunto el codigo y ejecutable de como debio haber quedado.

Un saludo

rob1104

Moderador Programacion
 
Estado
Cerrado para nuevas respuestas
Arriba Pie