lunes, 21 de septiembre de 2009

Diseña tus propios videojuegos para Windows, Zune y XBOX 360 con Microsoft XNA (Parte V)

Buenas a todos, estamos en semana de SIMO!, supongo que muchos de vosotros estaréis disfrutando ahora mismo de él, mientras que otros estaréis esperando post y comentarios en blogs de informática que leer para enteraros de todo lo que pasa en el pabellón 7 del IFEMA, pero mientras tanto, como durante todo el mes de Septiembre, os traigo el V y último post del manual sobre programación en 2D. Voy a extender el manual un post más, que publicaré en unos días, para mostraros algunos videos de videojuegos en 2D que he programado y enseñaros a programar otro juego en 2D, pero diferente, para que veáis otras posibilidades de juegos en 2D, hay cientos de ellas. Mientras tanto hoy vamos a continuar por donde lo dejamos el último día, y vamos a aprender a generar colisiones entre dos objetos.

Seguiremos aprovechando el videojuego Alien, y vamos a añadirle una piedra en el suelo a nuestro juego, para que cuando nuestro muñeco choque con ella no pueda avanzar, y no le quede más remedio que superarla de un salto.

Para comenzar debemos conseguir una imagen de una piedra, la almacenaremos en la carpeta Content y la cargaremos en el juego como ya sabemos. Ahora debemos repasar como crear un objeto en el juego, para ello volveremos a la parte III del manual, y crearemos un nuevo vector, una nueva textura, a la que le asignaremos la imagen que antes cargamos, y en la función Draw() la dibujaremos en pantalla, de tal manera que tengamos al arrancar el videojuego una imagen como la siguiente:

 

clip_image002

 

Bien, una vez que tengamos generada nuestra piedra, debemos realizar la colisión. Para ello vamos a rodear a nuestro alienígena y a nuestra piedra de una “esfera imaginaria” que simule el cuerpo del alienígena y la superficie de la piedra, ya que recordemos, que nuestros objetos en el videojuego ocuparán un único pixel (un vector2D). Una vez que hayamos generado las esferas hay una función en XNA que nos dirá si han chocado entre sí o no.

En primer lugar debemos crear 2 vectores que simularan el centro del cuerpo del alienígena y el centro de la superficie de la piedra:

 

Vector2 centro_piedra;

Vector2 centro_alien;

 

Después crearemos las 2 esferas que rodearán al alienígena y a la piedra:

 

BoundingSphere esfera_alien;

BoundingSphere esfera_piedra;

 

Ahora vamos a crearnos una función auxiliar que comprobará si los 2 objetos, el alienígena y la piedra han colisionado:

 

public bool colision()

{

centro_piedra = new Vector2(textura_piedra.Width / 2, textura_piedra.Height / 2);

centro_piedra += piedra;

esfera_piedra = new BoundingSphere(new Vector3(centro_piedra, 0), textura_piedra.Width / 2);

centro_alien = new Vector2(textura_alien_der_parado.Width / 2, textura_alien_der_parado.Height / 2);

centro_alien += alien;

esfera_alien = new BoundingSphere(new Vector3(centro_alien, 0), textura_alien_der_parado.Width / 2);

if(esfera_alien.Intersects(esfera_piedra))

{

return true;

}

return false;

}

 

Si estudiamos el código detenidamente, en primer lugar veremos que debemos calcular el centro de la piedra, que evidentemente se sitúa en la mitad del ancho y del alto del dibujo de la piedra que le hemos asignado a la textura.

Inmediatamente después, le sumamos el vector piedra a la variable centro_piedra, ya que el dibujo de la piedra no se encuentra en el punto “0,0” del eje de las X y de las Y, sino que se encuentra en el punto donde estaba la piedra originalmente.

Finalmente generamos la esfera, a la que le tenemos que pasar como primer parámetro un Vector3(x,y,z), en el que la X y la Y serán nuestro centro de la piedra, y Z será 0, ya que es un juego en 2D y no tiene profundidad, y como segundo parámetro le pasaremos el radio de la esfera, es decir, la mitad del ancho de la piedra.

Las siguiente tres líneas de código son semejantes pero para el alienígena.

Nota: además de la esfera, podéis rodear a los objetos del juego también por cuadrados, siempre debéis usar la forma geométrica que mejor se adapte al objeto que estáis dibujando.

Tras las creaciones de las esferas veréis un IF, en el que comprobamos si una esfera intercepta con la otra, y devolvemos true o false, dependiendo de si ha habido colisión o no.

¿Hasta ahora bastante sencillo no?, ya solo nos queda utilizar nuestra función colision() en la función Update() de la siguiente manera, debemos cambiar el contenido del bucle “foreach” por el siguiente:

 

if (ekey == Keys.Left)

{

if (!colision)

alien.X -= 5;

else

alien.X += 5;

direccion_movimiento = izq;

num_movimiento += 1;

if (num_movimiento == 3) num_movimiento = 0;

}

if (ekey == Keys.Right)

{

if (!colision)

alien.X += 5;

else

alien.X -= 5;

direccion_movimiento = der;

num_movimiento += 1;

if (num_movimiento == 3) num_movimiento = 0;

}

 

Si os fijáis, el único cambio ha sido añadir una línea de código en cada IF, de tal manera que si se produce una colisión el alienígena retroceda 5pixels, pero os pongo el código entero del bucle para que lo veáis más claro.

Si compiláis y ejecutáis debería producirse la colisión perfectamente. Ahora si os creáis una función sencilla que os permita saltar hasta cierta altura, capturando en vez de las teclas izquierda y derecha, la tecla arriba y haciendo que cuando el muñeco llegue a determinada altura baje hasta el suelo, tendréis un videojuego parecido al del siguiente vídeo:

 

 

Con todo lo que llevamos aprendido a lo largo de estos 5 posts a modo de manual deberíais estar preparados para programar casi cualquier videojuego en 2D, ahora solo os queda practicar y sobretodo imaginación, ya que la clave de un buen juego es la novedad y el ingenio. En el próximo post, como comenté más arriba, os traeré ejemplos de videojuegos en 2D, algunos programados por mí, y programaremos otro tipo de videojuego en 2D, pero como ya tenemos las bases no nos entretendremos en aspectos técnicos e iremos directamente a ver los resultados para daros mas ideas sobre videojuegos para programar.

Saludos! Y practicar mucho!

No hay comentarios: