jueves, 19 de febrero de 2009

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...)

buu



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:

buuanim

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:

run

(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:




[code language="csharp"]
//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;
[/code]





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




[code language="csharp"]
sprite = Content.Load("Run");
rectanguloDestino = new Rectangle(0, 0, spriteAncho, spriteAlto);
[/code]





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:



[code language="csharp"]
//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);[/code]




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



[code language="csharp"]
GraphicsDevice.Clear(Color.CornflowerBlue);

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

base.Draw(gameTime);
[/code]




Descarga el proyecto con el código.

3 comentarios:

  1. hola solo queria preguntar si estos tutoriales sirven para xna2.0 y cual es la diferencia con el codigo, y tambien si es posible decirme por que no me corren los started kits de creators club parece que sale un error de codigo bueno eso es todo gracias

    ResponderEliminar
  2. Creo que este código si te servirá para la versión 2.0, aunque no lo he probado. De todos modos mi proyecto lo he creado con Visual Studio 2008, así que si estas usando la 2005 creo que no te dejará abrirlo, aunque tampoco lo he probado. Te recomiendo que actualizes al Visual Studio 2008 (la express si no tienes licencia) y a XNA 3.0, es gratis!
    Lo de los errores tendria que ver que es lo que pasa, escribe que error te da y en que started kit.
    Saludos.

    ResponderEliminar
  3. no manches pon al menos capturas, no se cual es la carpeta contenta!

    ResponderEliminar