Windows Técnico : Xna, Programacion

Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (VI de VI)

Juan Antonio — Mon, 28 Sep 2009 13:04:00 GMT

Buenas a todos, la pasada semana finalizamos la cadena de posts sobre programación de videojuegos en XNA explicando como se producían las colisiones entre los diferentes objetos del juego. Hoy vamos a pasar a resumir 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 canción 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 necesitábamos 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 queréis dar mas realismo a vuestros videojuegos acompañar estas prácticas con el estudio de algunas funciones matemáticas y físicas 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:

****************************************************************

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (I de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (II de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (III de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (IV de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (V de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (VI de VI)

****************************************************************

Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (VI de VI)

Juan Antonio — Tue, 22 Sep 2009 14:32:00 GMT

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:

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 a practicar mucho.

****************************************************************

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (I de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (II de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (III de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (IV de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (V de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (VI de VI)

****************************************************************

Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (IV de VI)

Juan Antonio — Thu, 17 Sep 2009 08:16:00 GMT

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:

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!

****************************************************************

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (I de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (II de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (III de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (IV de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (V de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (VI de VI)

****************************************************************

Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (III de VI)

Juan Antonio — Sun, 13 Sep 2009 22:15:00 GMT

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:

FONDO:

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.

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 ejecutarse 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!

****************************************************************

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (I de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (II de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (III de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (IV de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (V de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (VI de VI)

****************************************************************

Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (II de VI)

Juan Antonio — Sun, 06 Sep 2009 22:53:00 GMT

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:

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

Deberíamos ver lo siguiente:

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:

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.

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.

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!!

****************************************************************

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (I de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (II de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (III de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (IV de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (V de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (VI de VI)

****************************************************************

Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (I de VI)

Juan Antonio — Mon, 31 Aug 2009 08:38:00 GMT

Buenas a todos, tras una temporada de relax por vacaciones, vuelvo a Windows Técnico con un tema que atraerá a muchos usuarios de videojuegos que aún sabiendo algo de programación no han tenido la oportunidad de programarse sus propios videojuegos por la complicación que esto conllevaba. Esto gracias a Microsoft XNA ya es historia, ya que con esta plataforma, el diseño y la programación de videojuegos será una tarea bastante sencilla si poseemos algunos conocimientos de programación.

A lo largo de las próximas semanas vamos a introducirnos en la plataforma XNA de Microsoft, que nos permitirá programar nuestros propios videojuegos para Windows y XBOX 360, aprenderemos el contenido necesario que requiere un juego para ejecutarse, hablaremos de cómo conseguir efectos visuales atractivos, movimientos y de cómo conseguir que un jugador pueda interactuar con los contenidos del juego y finalmente tras aprender cómo funciona un videojuego internamente, programaremos nuestro primer juego.

En el post de hoy, vamos a empezar explicando el porqué de XNA, que es, cuanto lleva entre nosotros, que clase de videojuegos nos va a permitir crear y sobretodo que facilidades nos proporcionará para ello.

¿Qué es Microsoft XNA?

XNA es una plataforma de desarrollo de videojuegos que nos permitirá programar todo tipo de videojuegos sin limitaciones tanto en 2D, como en 3D, gracias a una rica biblioteca de clases.

XNA se instala sobre Visual Studio C# 2005/2008 Express Edition, la versión gratuita de Visual Studio para programar en C#, por lo que la programación de videojuegos bajo esta plataforma es totalmente gratuita.

¿Tiene algún coste la programación en XNA?, ¿Cómo lo podemos obtener?

Como os acabo de contar, la programación de videojuegos es totalmente gratuita, simplemente nos descargaremos Visual Studio C# 2005 Express Edition ó Visual Studio C# 2008 Express Edition desde el siguiente enlace:

http://www.microsoft.com/express/download/default.aspx#webInstall

Nos daremos de alta con nuestra cuenta de Hotmail como habitualmente, y nos enviarán una licencia de uso totalmente gratis.

Después, nos bajaremos la biblioteca de clases de XNA:

http://www.microsoft.com/downloads/details.aspx?FamilyID=80782277-d584-42d2-8024-893fcd9d3e82&displaylang=en

Y la instalaremos.

¿Qué versión de XNA nos tenemos que descargar?

En la actualidad XNA va por la versión 3.1, la cual es necesaria si queremos programar además de los juegos, los Xbox LIVE Indie Games, los muñecos o avatares que nos representan a nosotros en nuestra consola Xbox 360 e integrarlos en los juegos, ¿una auténtica pasada no?

¿En qué sistemas operativos podemos instalar Microsoft XNA?

XNA se puede instalar en todos los sistemas operativos de Microsoft a partir de Windows XP SP2. Yo lo tengo instalado sobre Windows 7 funcionando de maravilla :)

¿Cuándo comenzó Microsoft XNA?

XNA comenzó a mediados del 2006 con la versión beta, que se hizo definitiva a finales del mismo año.

En sus posteriores versiones se han ido añadiendo novedades como la integración con la versión 2008 de Visual Studio, la posibilidad de programar videojuegos para Zune, el reproductor multimedia de Microsoft, y se han aumentado el número de clases y resuelto algunos bugs..

¿En donde podremos ejecutar nuestros juegos?

Podremos programar videojuegos tanto para PC, como para XBOX 360, como para Zune.

¿Podrá alguien jugar con nuestros juegos?

Por supuesto, de hecho es uno de los aspectos más importantes con los que se ha pensado y diseñado XNA, “videojuegos de todos y para todos”, por ello han querido generar una plataforma sencilla y fácil de entender por el usuario medio.

En el siguiente link, encontrareis la comunidad que ha creado Microsoft para que todo el mundo pueda participar, intercambiar videojuegos, que sean probados por revisores, podréis conseguir manuales, códigos fuentes, los programas necesarios para el desarrollo de videojuegos y muchas cosas más:

http://creators.xna.com/es-ES/

¿Es diferente programar un videojuego de Windows a uno de XBOX 360?

No, la programación de los videojuegos es la misma, simplemente para interactuar con el ordenador, tendremos que indicarle a nuestro programa que capture las teclas o los movimientos del ratón y en el caso de la Xbox 360, que capture las pulsaciones de los botones del mando, como veréis en próximos post esta tarea es muy sencilla.

¿En qué lenguaje de programación se programan los videojuegos de XNA?

Los videojuegos se programan en C#. Si no estáis familiarizados con el lenguaje os diré que es hoy por hoy el presente y el futuro de Microsoft y de muchísimas otras empresas tras convertirse en un estándar. Es un lenguaje derivado de C/C++ orientado a objetos y que se encuentra totalmente integrado con la plataforma .NET. Si buscáis por internet encontraréis infinidad de manuales y como veréis si tenéis conocimientos de programación en C/C++ o Java, adaptaros a C# serán escasos cinco minutos.

¿Qué clase de videojuegos podremos crear?

Con XNA podremos programar todo tipo de juegos en 2D y recordar la mítica época del mundo de las consolas en la década de los 80-90 o bien videojuegos modernos en 3D, para estos últimos lógicamente necesitareis ayudaros de un programa de diseño 3D cómo 3ds Max, y luego importar los elementos que generéis a XNA. Si no queréis quedaros solo en la programación de videojuegos en 2D y queréis dar el salto a 3D pero no queréis aprender a diseñar figuras en 3D, siempre podéis descargaros algunas por internet, con cualquier buscador encontrareis cientos de ellas, yo hace poco me descargué unos cuantos coches modernos en 3D para practicar un poco.

Así que ya solo me queda decir, que os animéis a seguir esta cadena de posts que hoy comenzamos y programéis vuestros propios videojuegos, que como veréis es una tarea más sencilla de lo que parece y que os gustará y enganchará. Y si queréis intentad compartirlos con los demás usuarios, quien sabe, quizás entre ellos salga uno de los programadores del próximo Halo… J

De momento para abriros el apetito, os dejo un video de un juego que he programado en una tarde (para que veáis la facilidad que nos proporciona XNA y el ahorro de tiempo en comparación con otras plataformas) versionando un poco uno de los juegos que más me gustaron de mi infancia:

Os dejo también algunas imágenes y un video de varios videojuegos que han sido programados en XNA:

Cómo veis mi videojuego es algo más humilde a los de las capturas que os acabo de mostrar, pero como siempre en la vida, empezaremos la casa por los cimientos para luego escalar hasta el tejado.

En el próximo post, hablaremos de cómo instalar todos los elementos que nos hemos descargado, cómo crear el proyecto de nuestro primer videojuego y hablaremos finalmente de las partes de las que se compone un juego.

Saludos!

****************************************************************

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (I de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (II de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (III de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (IV de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (V de VI)

- Diseñar juegos para Windows y XBOX 360 con Microsoft XNA (VI de VI)

****************************************************************