Programando videojuegos: Tutorial XNA Game Studio 4.0 parte 1

Antes de nada quiero disculparme por la ausencia de las ultimas semanas, he estado demasiado ocupado como para poner ninguna entrada, pero ya estoy de vuelta, y empiezo fuerte.

En las próximas entradas, vamos a trabajar sobre XNA, un entorno de desarrollo proporcionado por Microsoft para el desarrollo de juegos 2D y 3D. Tiene un montón de ventajas, pero en mi opinión la mas importante es la portabilidad del código a la hora de trasladar un juego entre las diferentes plataformas soportadas (PC, XBox 360 y Windows Phone). Evidentemente no es lo mismo trabajar con la pantalla de un móvil que con una tele, pero las diferencias en cuanto a código se reducen a eso y a los controles del juego.

Quiero mencionar que este tutorial esta orientado tanto a gente que nunca ha programado videojuegos como a gente que nunca ha utilizado XNA. Solo se requieren conocimientos básicos de C#, e intentare ir paso por paso y explicarlo todo con detalle.

Para este tutorial, dividido en varias partes, vamos a desarrollar un juego para Windows (Un juego de naves en 2D), pero no es nada difícil trasladar este código a cualquiera las plataformas anteriormente mencionadas. ¿Que necesitamos para empezar a programar en XNA game studio? Pues simplemente, un visual studio y una versión de XNA Game Studio compatible con este. Yo voy a utilizar VS 2010 y XNA GS 4.0 por ser las ultimas versiones de ambos, pero las diferencias en cuanto al código deberían ser mínimas.

¿Donde conseguimos XNA Game Studio? Muy fácil, aquí mismo: http://creators.xna.com/es-ES/downloads

Una vez tenemos todo instalado podemos comenzar a programar. Lo primero que haremos será crear un nuevo proyecto de XNA para Windows Games.

Tras esto veremos que nos autogenera ya bastantes cosas. La clase principal es la que nos habrá llamado Game1 y tiene los siguientes métodos:

• Initialize se llama al principio de la ejecución del juego. En principio lo utilizaremos para crear instancias de los objetos que vamos a necesitar y para cambiar cosas como el titulo de la ventana.
• LoadContet se llama después de Initialize. Este método creara una instancia de SpriteBatch, la cual usaremos para dibujar cosas por pantalla mas adelante. Además es aquí donde debemos cargar las imágenes de nuestro juego.
• Update se llamara varias veces por segundo a lo largo de la ejecución del juego, y aquí deberemos insertar la lógica del juego.
• Draw se llamara varias veces por segundo también y se encargara de dibujar cosas por pantalla valiéndose del antes mencionado SpriteBatch. Es importante tener en cuenta de que si una cosa se dibuja mas tarde que otra, la que mas tarde se dibuje quedara por encima de la otra.

Si probamos a ejecutar veremos una pantalla en azul.

No es gran cosa, pero es el comienzo de nuestro juego. Lo primero que debemos notar es que ese fondo azul no nos sirve (si alguien quiere hacer un juego de una piscina quizás sirva, pero nosotros vamos a hacer un juego de naves) así que cambiaremos el color de fondo por negro. Para ello habrá que modificar el método Draw:

protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.Black);

        // TODO: Add your drawing code here

        base.Draw(gameTime);
    }

Con esto el fondo de nuestra aplicación ya será negro. En partes posteriores de este tutorial se explicara como cambiar el fondo e incluso animarlo. El próximo paso para que la ventana sea mas adecuada a nuestras necesidades es cambiar el titulo. Esto lo insertamos dentro del método Initialize:

protected override void Initialize()
    {
        // TODO: Add your initialization logic here
        this.Window.Title="Space Burst";
        base.Initialize();        
    }

Tras esto la ventana ya esta preparada para nuestro juego, con un fondo negro y Space Burst de titulo, el próximo exitazo de ventas esta preparado para arrancar :P. Ahora toca preguntarnos que es lo que falta en nuestro juego? Es un juego de naves, así que es bueno tener alguna. Yo voy a utilizar la siguiente imagen, que es un sprite con varias posiciones de una nave

Para añadir la imagen a nuestro proyecto la copiamos en la carpeta del proyecto y la añadimos (arrastrándola mismamente) a Content de nuestro proyecto. Esto será una especie de proyecto a parte para los que usen XNA GS 4.0 o una carpeta en caso de usar versiones anteriores.

Ahora crearemos la clase Nave. Podríamos poner todo dentro de la clase Game1, pero el código resultante no sería nada elegante. Añadimos la nueva clase al proyecto Click derecho>Añadir>Clase y comenzamos con nuestra nave. Antes de nada y para evitar futuros problemillas añadiremos los diferentes imports necesarios:

using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.Input;

¿Que atributos necesitamos que tenga? Pues vamos a ir poco a poco, así que empezaremos con 2: un objeto Texture2D donde se almacenara la imagen y un objeto Vector2 donde se almacenara la posición.

        private Texture2D imagen;
        private Vector2 posicion;

Además de esto, tendremos que añadir a la clase nave los métodos importantes de la clase Game1: LoadContent, Update y Draw, y así en la clase Game1 solo tendremos que llamar en cada método a los métodos correspondientes de todos los objetos que tengamos en la pantalla.

Debemos crear la instancia de posición dentro del constructor de la clase y la de imagen dentro de LoadContent. Como algo opcional podremos pasar al constructor de nave el ancho y alto de la ventana, para saber donde dibujar inicialmente la nave y que no quede demasiado descentrada:

 public Nave(int altoVentana, int anchoVentana)
    {
        posicion = new Vector2(altoVentana-100, (anchoVentana)/2);
    }
    public void LoadContent(ContentManager Content)
    {
        imagen = Content.Load<Texture2D>;("battleship");
    }
    public void Update()
    {

    }

El parámetro ContentManager es necesario para cargar imágenes, y lo pasamos al invocar el método desde la clase principal. Hay que notar que el nombre de la imagen se escribe sin terminación. Esto es importante, por que sino no te encontrara tu imagen. También añadimos ya el método Update de la clase nave, aunque aún no haga nada.

Aprovecho para explicar el sistema de coordenadas utilizado por XNA. Las medidas son en pixeles y al contrario que el sistema cartesiano el eje (0,0) esta situado en la parte superior izquierda de la ventana. Así por ejemplo si tenemos una ventana de 800x600 el punto (800, 600) sería la esquina inferior derecha, (800, 0) sería la esquina superior derecha y (0, 600) la esquina inferior izquierda.

Tras esto implementamos el método Draw de Nave, que dibujara la imagen en la posición adecuada:

public void Draw(SpriteBatch spbtch)
{
 spbtch.Draw(imagen, posicion, new Rectangle(42, 88, 42, 44), Color.White);
}

Que es todo esto, os preguntareis. Lo primero es el parámetro, el objeto SpriteBatch anteriormente comentado, que se encarga de dibujar cosas por pantalla. Lo utilizamos para llamar al metodo Draw. Pide varios parámetros: con imagen le pasamos la imagen que debe dibujar, con posición le pasamos donde debe dibujarla (hasta ahí espero que lo entendáis bien), pero ¿que es ese Rectangle? Pues muy sencillo. Nuestra imagen tiene varias imágenes de la nave en diferentes posiciones, y ese Rectangle indica que parte de la imagen hay que dibujar. En caso de que la imagen fuese una sola no haría falta este parámetro. Los números que necesita para crearse son las coordenadas donde empieza a dibujar, x e y por ese orden, y el ancho y alto de la imagen. Nuestra imagen consta de 9 imágenes de 42x44, así que con esos parámetros debería dibujar la imagen central.

Tras esto solo queda crear una instancia de Nave y llamar a los métodos necesarios en la clase Game1:

    public class Game1 : Microsoft.Xna.Framework.Game
   {
       GraphicsDeviceManager graphics;
       SpriteBatch spriteBatch;
       Nave _nave;

       public Game1()
       {
           graphics = new GraphicsDeviceManager(this);
           Content.RootDirectory = "Content";           
       }

       protected override void Initialize()
       {
           // TODO: Add your initialization logic here

           _nave = new Nave(graphics.PreferredBackBufferHeight, graphics.PreferredBackBufferWidth);
           this.Window.Title="Space Burst";
           base.Initialize();           
       }

       protected override void LoadContent()
       {
           // Create a new SpriteBatch, which can be used to draw textures.
           spriteBatch = new SpriteBatch(GraphicsDevice);
           _nave.LoadContent(Content);
       }

       protected override void UnloadContent()
       {
           // TODO: Unload any non ContentManager content here
       }

       protected override void Update(GameTime gameTime)
       {
           // Cuidado con esto, no usamos mando.
           if (Keyboard.GetState().IsKeyDown(Keys.Escape))
               this.Exit();
           _nave.Update();

           base.Update(gameTime);
       }

       protected override void Draw(GameTime gameTime)
       {
           GraphicsDevice.Clear(Color.Black);

           spriteBatch.Begin();
           _nave.Draw(spriteBatch);
           spriteBatch.End();

           base.Draw(gameTime);
       }
   }

Como veréis, en el método LoadContent pasamos a Nave la anchura y la altura de nuestra ventana. En Update hay que tener cuidado, puesto que al menos a mi, en el código autogenerado comprobaba que estuviese pulsado el botón Atrás dentro de un gamepad (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed), y como probablemente nosotros usaremos teclado, tenemos que cambiar eso por la tecla escape, como se puede ver en el código. Además de esto llamamos al método Update de nave que aunque no haga nada, pronto lo hará. También llamamos a _nave.Draw dentro del metodo Draw principal, pasando como parametro el SpriteBatch.

Tras todo esto, si probamos a ejecutar, veremos algo similar a esto:

Aún no se mueve, ni hace nada, pero que esperabais, Roma no se construyo en un día. ¿Ha sido largo? No mucho. ¿Ha sido difícil? para nada.

Con esto concluyo esta titánica entrada que se me ha alargado bastante mas de lo que esperaba. Muy pronto sacare la segunda parte, para que nuestra navecita ya pueda hacer cosas. ¡Sed unos cangrejos pacientes!

Etiquetas de Technorati: programación,juegos,xna,windows,xbox,C#