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.
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.
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:
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.
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.
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:
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):
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:
Ahora invirtiendo el angulo, verificamos la pared de abajo, con el siguiente codigo en el motor:
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:
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:
Ahora si el codigo para saber quien ha anotado
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
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:
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:
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
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.
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.
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:
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.
Código:
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 Subb)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 Ifc) 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)) * velocidadvelocidad: 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
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
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 Ife) 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
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 Iff) 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 Subg) 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 SubPor 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 SubCONCLUSION
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
Moderador Programacion