20 de noviembre de 2010

[XNA] Añadir un personaje al juego (2D)

Teniendo en mente el funcionamiento de la programación orientada a objetos de la que hace uso XNA, un personaje de un juego no puede ser otra cosa que un objeto. En este tutorial vamos a ver como incorporar un personaje, posicionarlo y manejarlo con el teclado en un juego 2D usando XNA.

En primer lugar lo que tenemos que hacer si no tenemos creado un proyecto es crearlo. Si no sabéis cómo hacerlo podéis echar un vistazo a este tutorial.
Una vez tengamos el proyecto, lo que vamos a hacer es crear la clase a la que pertenecerá el personaje. Para esto nos vamos a la pestaña del explorador de soluciones que aparece en la derecha (si no te aparece ve a "View > Other Windows > Solution explorer "). Hacemos Clic Derecho sobre el nombre del proyecto y nos aparecerán una serie de opciones. Como lo que queremos es crear una clase, nos vamos a "Add > New Item..." y nos aparecerá una ventana con todos los posibles archivos que podemos crear con Visual Studio. A nosotros solo nos interesan los archivos de XNA así que hacemos clic sobre "XNA Game Studio 4.0" (Arriba a la izquierda) y elegimos la opción "Game Component". Le damos un nombre (preferiblemente el nombre del personaje) y le damos a "Add".


 Ahora si nos fijamos en la pestaña de soluciones podemos ver que aparece una clase más, la que acabamos de crear.
Lo siguiente que vamos a hacer es cargar la imagen en la carpeta de contenidos del proyecto. Para esto hacemos clic derecho sobre el apartado "xContent (Content)" (donde x es el nombre que le has puesto al proyecto), luego "Add > Existing Item..." y se abrirá una ventana del explorador para que elijas la imagen que deseas añadir, en nuestro caso, la imagen del personaje. Una vez hecho te aparecerá el archivo en el explorador de soluciones.

Con la imagen ya creada y la imagen cargada en el contenido del proyecto, solo nos queda meterle mano al código. Si recordamos lo expuesto en la entrada anterior, los componentes básicos del juego eran el constructor, el inicializador, la carga de contenido, la actualización y dibujar en pantalla, pero, si echamos un vistazo al código que se ha creado automáticamente, comprobamos que no están todas las funciones, con lo cual, lo primero que vamos a hacer es crear las funciones que nos faltan. La primera función que falta es la encargada de cargar el contenido. Para ponerla nos situamos detrás de la función que se encarga de inicializar y escribimos el siguiente código:


        protected override void LoadContent()
        {
    
        }

La otra función que falta es la de dibujar así que también la ponemos:


        public override void Draw(GameTime gameTime)
        {
            base.Draw(gameTime);
        }


Si nos fijamos, al escribir la función "Draw" aparece un error. Para que no se produzca el error, vamos al principio del código y donde pone:
 public class Link : Microsoft.Xna.Framework.GameComponent
(donde "Link" es el nombre que tiene la clase) y lo cambiamos por esto:
 public class Link : Microsoft.Xna.Framework.DrawableGameComponent
Ahora vamos a añadir más código. Vamos al principio de la clase y escribimos esto:

 public class Link : Microsoft.Xna.Framework.DrawableGameComponent
    {
        private SpriteBatch sprite; //Declaración del sprite.
        private Texture2D textura; //Textura que va a tener el sprite.
        private Vector2 posicion; //Vector de posición.
    ...

Luego vamos al inicializador y escribimos lo siguiente:

 public override void Initialize()
        {
            // TODO: Add your initialization code here
            sprite = new SpriteBatch(Game.GraphicsDevice);
            posicion = Vector2.Zero;
            base.Initialize();
        }

Continuamos con la función LoadContent:

        protected override void LoadContent()
        {
            textura = Game.Content.Load("link"); //"link" es el asset name de la imagen.
            posicion.Y = Game.GraphicsDevice.Viewport.Height - textura.Height; //Posición en la que se coloca el personaje.
            base.LoadContent();
        }
Para ver el asset name de la imagen hacemos clic derecho sobre la imagen en el explorador de soluciones y vamos a propiedades.
La posición inicial que hemos puesto para el personaje es la de la esquina inferior izquierda de la pantalla.


Tras cargar la imagen, vamos a la función Update. En esta función vamos a poner los controles del personaje.

  public override void Update(GameTime gameTime)
        {
            // TODO: Add your update code here
            KeyboardState estado = Keyboard.GetState();

            if (estado.IsKeyDown(Keys.Left))
                posicion.X -= 1.0f + gameTime.ElapsedGameTime.Milliseconds;
            if (estado.IsKeyDown(Keys.Right))
                posicion.X += 1.0f + gameTime.ElapsedGameTime.Milliseconds;
            if (estado.IsKeyDown(Keys.Up))
                posicion.Y -= 1.0f + gameTime.ElapsedGameTime.Milliseconds;
            if (estado.IsKeyDown(Keys.Down))
                posicion.Y += 1.0f + gameTime.ElapsedGameTime.Milliseconds; 
            base.Update(gameTime);
        }
No olvideis que las coordenadas de los videojuegos tienen el punto (0,0) en la esquina superior izquierda de la pantalla.

Para acabar con el código en la clase del personaje que hemos creado, nos dirigimos a la funcion Draw para que se dibuje el personaje en pantalla.

        public override void Draw(GameTime gameTime)
        {
            sprite.Begin();
            sprite.Draw(textura, posicion, Color.White);
            sprite.End();
            base.Draw(gameTime);
        }

Si le damos a compilar comprobaremos que en la pantalla no se muestra ningún personaje. Esto se debe a que para que se muestre el personaje tenemos que añadir la clase del personaje a la clase Game1.cs. Para esto vamos a la clase Game1.cs y en la declaración de variables escribimos:
Link link;
Luego vamos al constructor y ponermos:
link = new Link(this);
Components.Add(link); 

Deberia quedarnos algo así:

public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        Link link;

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


Recordemos que "Link" es el nombre que he usado para la clase del personaje.

Con esto conseguimos poner un personaje en pantalla que podemos mover por la pantalla con el teclado.

Ejemplo (Descargar).

No hay comentarios:

Publicar un comentario