domingo, 27 de septiembre de 2009

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

Buenas a todos, la pasada semana finalizamos la cadena de posts sobre programación de videojuegos en XNA explicando como se producian las colisiones entre los diferentes objetos del juego. Hoy vamos a pasar a resumer todos los contenidos que hemos visto, os enseñaré a poner música de fondo en los juegos para darles un toque mas profesional y finalmente os voy a enseñar algunos ejemplos de videojuegos, algunos programados por mi, para daros ideas de videojuegos que podéis programar.

 

Añadir una cancion como fondo de un videojuego

Una de las mejores opciones que nos proporciona XNA es la de poder añadir una canción en formato mp3 para que suene mientras se reproduce el juego, para ello en primer lugar elegiremos la canción que nos interese, y la almacenaremos en la carpeta “Content” del videojuego, al igual que las imágenes que hemos utilizado en anteriores post. Una vez agregada la cargaremos en el juego de la misma manera que cargamos una imagen, primero nos crearemos una variable tipo song:

 

song musica;

 

Y después iremos a la función LoadContent() y la agregaremos de la siguiente manera, siendo cancion nuestra cancion.mp3 (recordar que siempre ponemos el nombre sin la extensión):

 

musica = Content.Load<Song>(“cancion”);

 

Para reproducir la canción nos bastara con poner inmediatamente después de la linea anterior, lo siguiente:

 

MediaPlayer.Play(musica);

 

Como veis es muy sencillo.

 

¿Qué hemos visto sobre programación de videojuegos en 2D?

En primer lugar hablamos sobre XNA, que era, para que servía, que podíamos hacer con el, que necesitabamos para instalarnoslo y vimos algunos ejemplos, entre ellos un videojuego de sonic que programé para enseñaroslo:

 

http://www.windowstecnico.com/archive/2009/08/31/dise-241-a-tus-propios-videojuegos-para-windows-zune-y-xbox-360-con-microsoft-xna-parte-i.aspx

 

 

 

En segundo lugar estudiamos como crear un proyecto en XNA, vimos para que servían cada una de las funciones que nos proporcionaba la plataforma y cargamos el videojuego que trae XNA de ejemplo para probarlo:

 

http://www.windowstecnico.com/archive/2009/09/07/dise-241-a-tus-propios-videojuegos-para-windows-zune-y-xbox-360-con-microsoft-xna-parte-ii.aspx

 

En tercer lugar, os enseñé a cargar un objeto y un fondo en el proyecto de nuestro videojuego, y aprendimos a mover un objeto por la pantalla, capturando las teclas de nuestro teclado:

 

http://www.windowstecnico.com/archive/2009/09/14/dise-241-a-tus-propios-videojuegos-para-windows-zune-y-xbox-360-con-microsoft-xna-parte-iii.aspx

 

 

 

En cuarto lugar estudiamos como simular los pasos que daría un muñeco cuando va andando:

 

http://www.windowstecnico.com/archive/2009/09/17/dise-241-a-tus-propios-videojuegos-para-windows-zune-y-xbox-360-con-microsoft-xna-parte-iv.aspx

 

 

 

En quinto lugar aprendimos a generar colisiones entre los diferentes objetos del videojuego:

 

http://www.windowstecnico.com/archive/2009/09/22/dise-241-a-tus-propios-videojuegos-para-windows-zune-y-xbox-360-con-microsoft-xna-parte-v.aspx

 

 

 

Hoy finalmente hemos aprendido a añadir música de fondo al videojuego.

 

Con todo esto, tenéis los conocimientos necesarios para programar casi cualquier videojuego en 2D, simplemente os queda practicar mucho, y si quereis dar mas realismo a vuestros videojuegos acompañar estas prácticas con el estudio de algunas funciones matemáticas y fisicas que os permitan el conseguir movimientos de lanzamientos, impactos y golpes mas realistas entres los diferentes objetos del juego, cosas que se escapan del contenido de este manual con el que simplemente os quería introducir en la programación de videojuegos y que espero os haya sido muy útil y os sirva de plinto para seguir aprendiendo mucho mas sobre esta tecnología.

 

Os dejo también algunos videos de videojuegos en 2D que han sido programados en XNA:

 

 

 

 

 

Para finalizar os voy a mostrar el último videojuego que programé, para mostrarle una idea a uno de los lectores de nuestro blog sobre como programar un tetris. Está programado con una única pieza (la L), y sin rotaciones, para ahorrar tiempo, pero podéis ver la potencia de la plataforma que en poco mas de media hora y con las dos siguientes imágenes como base me permitieron programar el siguiente juego:

 image image

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!

lunes, 14 de septiembre de 2009

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

Buenas a todos, tras tres post explicando la programación de videojuegos con XNA ya debéis tener una idea más o menos clara del contenido necesario para programar videojuegos en 2D. Hoy vamos a complementarla con un pequeño truco en el que enseñaremos a simular el movimiento que realizaría nuestro alienígena andando. Para ello, tenemos que conseguir sprites del alienígena en diferentes posturas en las que salga andando. En mi caso, como os comenté el otro día, el muñeco lo he dibujado con el 3D Studio y me limité a tomar capturas del mismo, pues bien, hoy he colocado el personaje en diferentes posturas y he tomado las siguientes capturas mirando hacia ambos lados:

 

image image image image image image

 

Cómo es evidente, el mayor realismo a la hora de andar lo conseguiremos con sprites en posturas realistas, los mías no son los mejores, pero para enseñaros el ejemplo nos valdrán.

En primer lugar, cargaremos los sprites en la carpeta “Content” y los agregaremos al proyecto, como aprendimos en el pasado post.

Después deberemos agregar una variable textura nueva por cada nuevo sprite que vayamos a añadir, en mi caso, las seis variables siguientes:

 

Texture2D textura_alien_der_parado;

Texture2D textura_alien_der_andando;

Texture2D textura_alien_der_andando2;

Texture2D textura_alien_izq_parado;

Texture2D textura_alien_izq_andando;

Texture2D textura_alien_izq_andando2;

 

Y en la función Loadcontent() enlazaremos a las variables sus respectivas imágenes:

 

textura_alien_der_parado = Content.Load<Texture2D>("alien-der-parado");

textura_alien_der_andando = Content.Load<Texture2D>("alien-der-andando");

textura_alien_der_andando2 = Content.Load<Texture2D>("alien-der-andando2");

textura_alien_izq_parado = Content.Load<Texture2D>("alien-izq-parado");

textura_alien_izq_andando = Content.Load<Texture2D>("alien-izq-andando");

textura_alien_izq_andando2 = Content.Load<Texture2D>("alien-izq-andando2");

 

Bien, una vez cargados los sprites, nos queda la tarea de simular el movimiento, para ello mostraremos los sprites en cadena, enlazándolos a las pulsaciones de las teclas, es decir, en principio el alienígena comienza parado, si pulsamos una vez la tecla derecha, avanza 5pixels a la derecha y mostramos el sprite del alienígena levantando un poco una pierna, si volvemos a pulsar la tecla derecha avanzaremos otros 5pixels y mostraremos el sprite del alienígena levantando mas la pierna. Para ello hay infinitas maneras, yo os voy a proponer la siguiente que es bastante sencilla:

En primer lugar crearemos las siguientes variables, que nos permitirán almacenar la dirección del movimiento del teclado, y el número de sprite a mostrar (parado, andando1 o andando2):

 

const int izq = 1;

const int der = 2;

int direccion_movimiento=2, num_movimiento=0;

 

Después modificaremos el contenido de la función Update() por el siguiente:

 

estadoteclado = Keyboard.GetState();

Keys[] teclaspulsada = estadoteclado.GetPressedKeys();

foreach (Keys ekey in teclaspulsada)

{

if (ekey == Keys.Left)

{

alien.X -= 5;

direccion_movimiento = izq;

num_movimiento += 1;

if (num_movimiento == 3) num_movimiento = 0;

}

if (ekey == Keys.Right)

{

alien.X += 5;

direccion_movimiento = der;

num_movimiento += 1;

if (num_movimiento == 3) num_movimiento = 0;

}

}

 

Como veis, el único cambio que hemos realizado es que cuando identificamos que se ha pulsado la tecla del cursor derecho o izquierdo almacenamos el movimiento, y aumentamos la variable num_movimiento, que definirá el nº del sprite a mostrar.

Finalmente modificaremos la línea de código de la función Draw() que pintaba al alienígena en la pantalla por el siguiente código, en el que dependiendo de la dirección del movimiento y del número de movimiento pintará un sprite u otro:

 

switch (direccion_movimiento)

{

case izq:

switch (num_movimiento)

{

case 0:

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

break;

case 1:

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

break;

case 2:

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

break;

}

break;

case der:

switch (num_movimiento)

{

case 0:

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

break;

case 1:

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

break;

case 2:

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

break;

}

break;

}

 

Si compilamos y ejecutamos deberíamos ver un movimiento como el siguiente:

 

 

 

En mi caso no ha quedado perfecto ya que los sprites no eran los mejores, para que salga el efecto más realista os recomiendo bajaros los sprites hechos de internet, como hice con el juego que os mostré en el primer post y que programé para rememorar un antiguo Sonic.

El próximo día avanzaremos un poco con las clases de XNA y estudiaremos como reproducir colisiones entre dos objetos del juego, en el ejemplo del videojuego alien, vamos a hacer que se encuentre con una piedra que le frene el paso, y tenga que saltarla para seguir adelante.

Así que hasta el próximo post os dejo tiempo para que practiquéis y probéis varios sprites hasta que os queden movimientos más realistas, lo más importante es la imaginación!

Saludos!!

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!

jueves, 3 de septiembre de 2009

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

 

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

 

Buenas a todos, en el post de hoy vamos a continuar con la cadena de posts sobre Microsoft XNA, comenzando por donde lo dejamos el ultimo día, la instalación del producto.

Para instalar la plataforma completa deberemos tener dos ejecutables diferentes, el primero será el archivo que nos instalará el Visual Studio Express Edition, bien la versión 2005 ó bien la versión 2008 según la que nos hayamos descargado. El segundo será el instalador de XNA, donde se encuentran todas las librerías necesarias para la programación de videojuegos.

Hacemos doble clic en el primero de ellos, el Visual Studio, como veréis es un instalador normal, procederemos con la técnica del “siguiente, siguiente,…”, por lo que no nos vamos a entretener mas en explicarlo. Una vez instalado, instalaremos XNA desde su ejecutable de la misma manera.

Tras instalar ambos elementos, abrimos el Visual Studio:

image

Una vez abierto iremos a la pestaña “Archivo” y seleccionaremos “Nuevo proyecto”:

image

Deberíamos ver lo siguiente:

image

Ya tenemos todo preparado para empezar a programar nuestros videojuegos. Pero antes de tirarnos al rio, vamos a aprender jugando un poco. Como habréis visto en la imagen anterior, al instalarnos XNA, se nos ha instalado el código fuente de un videojuego que nos dan de ejemplo, al que han llamado “Platformer Starter Kit (3.1)”. Vamos a utilizar este código y generar el juego para practicar, para ello seleccionaremos el icono del muñeco que pone “Platformer Starter Kit (3.1)”, le daremos un nombre, una ubicación y aceptamos, deberíamos ver, el siguiente árbol de clases en el explorador de soluciones:

image

No os asustéis al verlo, aunque sea muy grande, es porque está el videojuego programado para las tres plataformas, es decir, es el mismo código, pero copiado tres veces para ejecutarse en Windows, en Xbox 360 y en Zune.

Si compilamos y ejecutamos el juego, pulsando F5, podremos jugar a nuestro primer juego hecho con XNA.

image

Tras haber jugado un poco con esta especie de “Indiana Jones” en 2D, vamos a pararnos un rato a estudiar el código. Cómo veréis, tenemos numerosas cosas, en primer lugar veremos 3 grandes bloques, uno con un icono de Windows, otro con un icono de Xbox 360 y otro con el icono de Zune, como es obvio y habréis intuido, es el mismo juego, pero programado para las tres plataformas diferentes. Si ahora nos centramos en el bloque del código de Windows, veremos numerosas clases diferentes, “enemy, animation, gem, player …”, pero ¿para qué queremos todas estas clases? Bien, cuando creemos un nuevo proyecto, se nos generará una única clase llamada “game”, donde contendrá todos los elementos necesarios para ejecutar el videojuego, pero por mantener un poco de orden y limpieza, y que cuando llevemos algunos cientos de líneas no nos comencemos a liar, está bien el utilizar una de las ventajas que nos ofrece C#, la orientación a objetos, y separar los elementos principales del juego en clases independientes, que iremos instanciando en la clase “game” según vayamos necesitando. Por ejemplo, podemos separar en clases independientes los movimientos que puede realizar el personaje principal del juego de los de otros personajes que salgan en el juego, sus texturas y variables, … Si no tenéis muy claro aún de que estamos hablando, cuando veamos algo de código volveremos sobre ello.

Por otro lado, además de las clases, veréis una sección en la que pone HighResolutionContent y otra que pone SharedContent, estas son las carpetas que contendrán las imágenes, fondos, músicas y demás elementos externos que utiliza el videojuego. Todos estos elementos externos como imágenes, sonidos, música de fondo… los almacenaremos en la carpeta “Content”, que se nos ha generado dentro de la carpeta raíz del proyecto, y luego podremos ir generando dentro de ella subcarpetas para organizar todo un poco.

Tras explicaros un poco a “groso modo” el contenido del videojuego de muestra, vamos a cerrarlo y a crear el proyecto de nuestro primer videojuego.

Al igual que antes vamos a la pestaña “Archivo” y seleccionamos “Nuevo proyecto”, se nos abrirán todas las plantillas que podemos seleccionar, de todos los elementos que salen a nosotros solo nos interesan tres de ellos:

  • Windows Game (3.1)
  • Xbox 360 Game (3.1)
  • Zune Game (3.1)

Para comenzar vamos a generar un “Windows Game”. Bien, ahora le damos un nombre, una ubicación y aceptamos.

image

Si os fijáis en el explorador de soluciones, ya no tenemos todas las clases que teníamos en el videojuego anterior, como os dije solo tenemos ahora una clase llamada Game1, donde deberemos programar todo el juego. Por otro lado tenemos otra clase llamada Program, que ignoraremos, ya que simplemente es la encargada de llamar a la clase Game1 para ejecutar el juego.

Para finalizar por hoy, vamos a abrir el código de la clase Game1.cs y estudiarlo un poco, para ello, podemos hacer doble clic sobre ella, se os abrirá la clase con el siguiente código que vamos a analizar por partes:

En primer lugar veremos todas las librerías que utiliza, si os fijáis la mayoría llaman a la biblioteca de Xna:

using System;

using System.Collections.Generic;

using System.Linq;

using Microsoft.Xna.Framework;

using Microsoft.Xna.Framework.Audio;

using Microsoft.Xna.Framework.Content;

using Microsoft.Xna.Framework.GamerServices;

using Microsoft.Xna.Framework.Graphics;

using Microsoft.Xna.Framework.Input;

using Microsoft.Xna.Framework.Media;

using Microsoft.Xna.Framework.Net;

using Microsoft.Xna.Framework.Storage;

Avanzando un poco llegamos a una serie de funciones, de las cuales nos centraremos únicamente en cuatro de ellas, ya que serán las únicas que debemos tocar a la hora de programar el juego.

La primera de las cuatro funciones que aparecen es la función Initialize, esta función se ejecuta únicamente cuando se inicia el videojuego, así que la aprovecharemos para inicializar variables, inicializar las texturas de los personajes e inicializar el tamaño de pantalla del videojuego:

protected override void Initialize()

{

// TODO: Add your initialization logic here

base.Initialize();

}

La siguiente función, LoadContent, la utilizaremos para cargar las imágenes (que almacenaremos en la carpeta “Content”) que representaran las texturas del juego y los sonidos y demás elementos externos que requiramos en el videojuego:

protected override void LoadContent()

{

// Create a new SpriteBatch, which can be used to draw textures.

spriteBatch = new SpriteBatch(GraphicsDevice);

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

}

Las dos funciones anteriores, Initialize y LoadContent se ejecutarán únicamente al principio del juego. Ahora vamos a explicar las siguiente funciones que se ejecutaran de manera infinita hasta que el juego finalice, es decir, en un bucle cuya función de salida es cerrar el videojuego.

En la función Update deberemos programar las acciones que determinen las modificaciones en el juego, es decir, por ejemplo, si el personaje principal, se mueve hasta la mitad de la pantalla y hay una piedra, que no pueda avanzar más, o por poner otro ejemplo, si estamos programando un juego de coches, si el jugador pulsa la tecla flecha izquierda, haremos que el coche gire a la izquierda:

protected override void Update(GameTime gameTime)

{

// Allows the game to exit

if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

this.Exit();

// TODO: Add your update logic here

base.Update(gameTime);

}

Finalmente nos encontraremos con la function Draw, que se ejecutará después de la función Update, y será la encargada de dibujar todos los elementos en pantalla, por tanto, si se ha producido un cambio en el juego en la función Update, cambiaremos los objetos de pantalla para reproducir ese cambio en la función draw. Por continuar el ejemplo, si tenemos el coche en el centro de la pantalla, y en la función Update detectamos que el jugador a pulsado la tecla izquierda, y hemos indicado al coche, que gire a la izquierda unos pixels, dibujaremos el coche en esta iteración del bucle general unos pixels mas a la izquierda, para visualizar la acción que ha ejercido el jugador sobre el teclado en la pantalla:

protected override void Draw(GameTime gameTime)

{

GraphicsDevice.Clear(Color.CornflowerBlue);

// TODO: Add your drawing code here

base.Draw(gameTime);

}

Con todo esto, tenéis para practicar durante los próximos días, hoy ya hemos visto un código terminado, es más sencillo de lo que parece a primera vista, y como habéis visto en el videojuego que estamos programando desde cero, las funciones para las que debemos generar el código se resumen en cuatro muy sencillas de entender y que tienen una finalidad muy delimitada, lo que las simplifica enormemente.

El próximo día rellenaremos estas cuatro funciones para generar nuestro primer juego, en él, añadiremos un muñeco que se mueva por la pantalla, un ejemplo sencillo y muy ilustrativo, por si queréis ir preparándolo, necesitaremos un fondo como el que habéis visto en el videojuego “Platformer Starter Kit (3.1)”, y dos imágenes de un muñeco mirando hacia ambos lados.

Un saludo y espero estéis disfrutando del manual!!