Animar graficos en 2D

En el anterior capitulo aprendimos como cargar un gráfico en pantalla, pero estaremos de acuerdo que pocas veces veremos un gráfico en parntalla que no esté animado.

Creo que no le decrubo un secreto a nadie si digo que para animar un grafico en 2D hay que hacerlo fotograma a fotograma, hay que ir dibujando cada uno de los movimientos y luego irlos mostrando rápidamente uno detrás del otro para conseguir el efecto de movimiento.

Para conseguir esto en el mundo de los videojuegos en 2D lo que se hace es ir dibujando todos los movimientos de un personaje en un archivo gráfico, como comente el capitulo anterior puede ser un jpg, bmp, png, etc… (pero vuelvo a reiterar que los que me gusta usar a mi son los png, ya que permiten transparencias), para ver un ejemplo de lo que os digo fijaos en esta animación de Buu andando (estos recuerdos de infancia…)

Podemos ver que en un mismo archivo gráfico están los cinco dibujos que conformarán la animación, ahora lo que hay que hacer es mostrar cada unos de estos dibujos uno tras otro para que como hemos comentado antes se produzca el efecto de movimiento, para ello lo que haremos será cargar el gráfico tal y como lo hicimos en el anterior tutorial pero esta vez en vez de mostrar el dibujo entero, solo mostraremos una parte de él e iremos iterando por el dibujo mostrando solo la parte que nos interese.

Para que te hagas una idea de lo que vamos a hacer imáginate que defines un rectángulo que vas a ir moviendo por el gráfico, y en pantalla solo mostraras lo que hay dentro de los limites de ese reactángulo, algo como esto: 

Una vez explicado esto, vamos a ver como lo hacemos:

Primero crea un proyecto nuevo, y haz doble clic en el fichero Game1.cs para poder ver y modificar su código.

Ahora hay que añadir al proyecto el gráfico que vamos a usar, para ello haz clic con el botón derecho en la carpeta Contenta y selecciona añadir > elemento existente y selecciona el gráfico que quieras cargar. Yo he usado el siguiente:

(Te preguntarás porque he usado un gráfico para escribir el tutorial y otro para picar el código, la respuesta es muy sencilla, empecé con el grafico de buu e hice el gif animado, luego cambie por este gráfico( que por cierto viene con el plataformer stated kid de XNA 3.0), y me da mucha pereza hacer el gif animado con este nuevo gráfico)

Lo primero de todo es crear las variables que usaremos:

//Grafico que se usará
Texture2D sprite;
//Para controlar el cambio de frame
float temporizador = 0f;
float intervalo = 1000f / 10f;
//Número de frames que tendrá la animación
int numFrames = 10;
int frameActual = 0;

//Tamaño del cada uno de los fotogramas (el rectángulo del ejemplo del tutorial)
int spriteAncho = 96;
int spriteAlto = 96;

Rectangle rectanguloOrigen;
Rectangle rectanguloDestino;

Ahora vamos a cargar nuestro gráfico en el juego, en el método LoadContent agrega el siguiente código después del comentario:

            sprite = Content.Load("Run");
            rectanguloDestino = new Rectangle(0, 0, spriteAncho, spriteAlto);

Lo siguiente que vamos a hacer es crear el código que hará que nuestro personaje se “anime”, esto lo haremos en el método Update, que como sabemos es donde se actualiza la lógica del juego, agrega las siguientes líneas de código:

 //Le sumamos al temporizador los milisegundos transcurruridos
            temporizador += (float)gameTime.ElapsedGameTime.TotalMilliseconds;

            //Si es mayor al tiempo que le hemos definido en el intervalo
            if (temporizador > intervalo)
            {
                //Pasamos al siguiente frame
                frameActual++;

                //Controlamos que no nos pasemos de frames
                if (frameActual > numFrames - 1)
                {
                    frameActual = 0;
                }
                //Se pone el temporizador a cero
                temporizador = 0f;
            }

            //definimos el rectángulo que mostrará el siguiente frame.
            rectanguloOrigen = new Rectangle(this.frameActual * this.spriteAncho, 0, this.spriteAncho, this.spriteAlto);

            base.Update(gameTime);

Y por último solo nos queda dibujar por pantalla, como siempre, en el método Draw:

GraphicsDevice.Clear(Color.CornflowerBlue);

spriteBatch.Begin();
spriteBatch.Draw(sprite, rectanguloDestino, rectanguloOrigen, Color.White);
spriteBatch.End();

base.Draw(gameTime);

Descarga el proyecto con el código.