miércoles, 9 de septiembre de 2009

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

Buenas a todos, hoy vamos a proseguir con el manual de programación de videojuegos en XNA continuando como comentamos el último día por la programación de nuestro primer videojuego en 2D.

En el pasado post comentamos como instalar Visual Studio y las librerías de XNA, creamos el proyecto de nuestro primer videojuego y finalmente hablamos de las funciones principales que llevan los videojuegos en XNA y el acometido de cada una de ellas. Pues bien, hoy vamos a proceder a “rellenar” estas funciones para generar nuestro primer juego, será uno muy sencillo, en el que un muñeco se mueva hacia los lados por un escenario sin obstáculos, pero para empezar esta semana, no está mal, y servirá para que aprendáis los elementos necesarios para que un juego se ejecute.

En primer lugar debéis conseguir el sprite de un muñeco y un fondo para el videojuego, un sprite es una imagen de un muñeco u objeto del videojuego en una postura determinada, en mi caso como tenía algo de tiempo libre he creado un alienígena en 3D Studio y he hecho una captura del mismo que he pasado a imagen en formato PNG, para que conserve más calidad, pero en principio el Visual Studio aceptará las imágenes de vuestros sprites en cualquier formato.

 

ALIENIGENA:

image

FONDO:

clip_image004

 

Una vez tengáis vuestros sprites, nos iremos a la carpeta raíz de nuestro proyecto, y en la subcarpeta “Content” los copiaremos, ya que es en esta carpeta donde los buscará el Visual Studio por defecto.

Ahora abriremos el proyecto de Visual Studio que creamos el último día e iremos a la carpeta “content”, pulsaremos el botón derecho del ratón sobre ella y en el desplegable que se nos abrirá seleccionamos “agregar un elemento existente”, entonces se nos abrirá la carpeta content en la que veremos nuestros sprites, los seleccionamos y aceptamos, y ya tendremos nuestras imágenes agregadas al proyecto.

 

clip_image005

 

Tras esta sencilla tarea vamos a explicar cómo se integra un sprite en el videojuego. Imaginemos por un momento que nuestro videojuego corresponde con una ventana de 640x480 pixels, 640px de ancho, por 480px de alto, un muñeco en el videojuego representará un único pixel en el videojuego de estos 640x480, llamado Vector2D, a lo que os preguntareis: pero… ¿si nuestra imagen ocupa más de 1pixel?, bien, para eso hay una función programada en XNA que diciéndole el pixel donde está el muñeco en la pantalla y el ancho y alto de nuestro Sprite, nos lo rodea de una forma geométrica (esfera, cuadrado,…) para cuando ese sprite tenga que colisionar con otro objeto se “choquen” y podamos detectarlo.

Por tanto en un videojuego en 2D tenemos que tener claro el concepto de que un sprite, será un Vector2D que ocupará un único pixel en la pantalla. Aclarada esta idea, comencemos a picar código.

En primer lugar deberemos declarar las variables necesarias, en nuestro sencillo videojuego solo necesitaremos cuatro, la primera variable representará la textura del muñeco, es decir, la imagen que “enlazaremos” al vector ó pixel que representa al muñeco en pantalla. La segunda de ellas representará la textura del fondo del videojuego. La tercera variable nos servirá para almacenar las teclas que un usuario a tecleado y así comprobar la tecla que ha pulsado para reproducir sus pulsaciones en movimientos del muñeco en el videojuego. La cuarta variable representará el pixel del muñeco que comentamos antes.

 

//Declaracion de variables

Texture2D textura_alien;

Texture2D textura_fondo;

KeyboardState estadoteclado;

Vector2 alien;

Declaradas las variables vamos a comenzar a rellenar las funciones que hablamos el último día. Comenzaremos por la función Initialize() dónde deberemos sustituir la línea comentada:

 

// TODO: Add your initialization logic here

 

Por las siguientes cuatro líneas de código, que simplemente definirán el ancho y alto de la pantalla del videojuego, y crearemos el Vector2 (el famoso pixel, que antes definimos), el cual situaremos por ejemplo en la posición X=100px Y=380px de la pantalla:

 

graphics.PreferredBackBufferHeight = 480;

graphics.PreferredBackBufferWidth = 640;

graphics.ApplyChanges();

alien = new Vector2(100, 380);

El siguiente paso será asociar las fotos que almacenamos en la carpeta “Content” con las variables texture2D que antes declaramos, para ello le indicamos el nombre de la imagen, pero sin la extensión, el Visual Studio la encontrá igualmente, no os preocupéis, en mi caso tenía las imágenes: alien_der_andando.png y fondo.jpg.

Al igual que antes, sustituiremos la línea comentada:

 

// TODO: use this.Content to load your game content here

 

Por las siguientes:

 

textura_alien = Content.Load<Texture2D>("alien_der_andando");

textura_fondo = Content.Load<Texture2D>("fondo");

Ahora programaremos los movimientos de nuestro muñeco, para ello nos iremos a la función Update() y sustituiremos de nuevo la línea comentada de siempre por el siguiente código, en el que leeremos el estado del teclado y observaremos todas las pulsaciones comprobando si coincide con una pulsación de la “flecha izquierda” del teclado o de la “flecha derecha”, en caso de ser una de ellas, moveremos nuestro muñeco (nuestro pixel) a la izquierda o a la derecha en el eje de las X de la pantalla, en nuestro caso hemos puesto que se mueva 5pixels, que es una velocidad bastante aceptable:

 

estadoteclado = Keyboard.GetState();

Keys[] teclaspulsada = estadoteclado.GetPressedKeys();

foreach (Keys ekey in teclaspulsada)

{

if (ekey == Keys.Left)

{

alien.X -= 5;

}

if (ekey == Keys.Right)

{

alien.X += 5;

}

}

Finalmente tendremos que pintar el muñeco en la pantalla, para ello nos vamos a la función Draw() y sustituiremos la línea comentada por las siguientes líneas. Al principio y al final abriremos y cerraremos el modo “dibujo” y entre medias podremos dibujar los objetos en la pantalla:

 

spriteBatch.Begin(SpriteBlendMode.AlphaBlend);

spriteBatch.Draw(textura_fondo, Vector2.Zero, Color.White);

spriteBatch.Draw(textura_alien, alien, Color.White);

spriteBatch.End();

Como veis dibujar un objeto es muy sencillo, el primer parámetro que le pasaremos a la función “spriteBatch.Draw” será la textura del objeto, el segundo parámetro será la posición de la pantalla que ocupará, como habréis imaginado, al actualizar la posición del muñeco en la función Update, ya no hace falta que dibujemos el objeto unos pixels hacia un lado, ya que el vector se actualizó en la función Update() que se ejecuta antes que la función Draw(), el tercer parámetro lo dejaremos tal cual:

 

spriteBatch.Draw(TEXTURA, VECTOR, Color.White);

Pues esto es todo por hoy, si os ha salido todo bien, debería compilar y ejercutarse sin problemas y tendréis un videojuego como el siguiente:

 

 

El próximo día vamos a convertir el movimiento de nuestro muñeco en algo más realista, haciendo que cuando se mueva simule que va andando, moviendo las piernas, y que cuando vaya hacia atrás, mire hacia atrás, hasta entonces os dejo practicando con el post de hoy!

Saludos!

No hay comentarios: