Despliegue de sprites animados 2D

Juan Carlos Zuluaga

Dinámica de animación

En principio contamos de una tira de imágenes que representan una animación. Lo que queremos implementaremos es una función capaz de desplegar una sola imagen, y trasladando la imagen, desplegamos la siguiente imagen consecutiva, y así sucesivamente, dándonos la ilusión de una imagen animada, como el efecto StopMotion.

Sprites Animados y Mensajes

Proyecto #2

Sprites AnimadosProyecto #2 – Parte #1

Crear un nuevo proyecto XNA Game

Si ejecuta el programa verá una pantalla azul, Felicitaciones ya haz hecho el primer juego en XNA

Agregar la capeta Imágenes, y dentro de esta colocar la imgen (sprite) que deseamos mostrar en el juego, la cual es una tira de imágenes:

Vamos a agregar la clase Animation, la cual utilizaremos en múltiples proyectos. Como es una clase genérica, de alto reuso, la vamos a entender muy bien.

Lo primero que debes hacer es reemplazar los using, por estos:using System;using Microsoft.Xna.Framework;using Microsoft.Xna.Framework.Content;using Microsoft.Xna.Framework.Graphics;

Ahora agregamos los siguientes atributos a la clase:// La imagen animada representada por un grupo de imágenes

Texture2D spriteStrip;

// Valor para escalar el sprite

float scale;

// Tiempo desde la ultima vez que se actualizo la imagen

int elapsedTime;

// Tiempo de despliegue por imagen

int frameTime;

// Numero de imágenes que conforman la animación

int frameCount;

// Indice de la imagen actual

int currentFrame;

// Color de la imagen a desplegar

Color color;

// El área de la imagen que vamos a desplegar

Rectangle sourceRect = new Rectangle();

// El área donde queremos desplegar la imagen

Rectangle destinationRect = new Rectangle();

// Ancho de la una imagen

public int FrameWidth;

// Alto de una imagen

public int FrameHeight;

// Estado de la animacion

public bool Active;

// Repetir animación

public bool Looping;

// Posición del sprite

public Vector2 Position;

Para esta clase, utilizara tres métodos muy importantes: Initialize, Update y Draw.

Para el método Initialize, evidentemente inicializaremos todos los atributos para

luego desplegar la imagen

public void Initialize(Texture2D texture, Vector2 position, int frameWidth,

int frameHeight, int frameCount, int frametime, Color color,

float scale, bool looping)

{

// Mantener copias locales de los valores pasados

this.color = color;

this.FrameWidth = frameWidth;

this.FrameHeight = frameHeight;

this.frameCount = frameCount;

this.frameTime = frametime;

this.scale = scale;

Looping = looping;

Position = position;

spriteStrip = texture;

// Hacer reset a los tiempos

elapsedTime = 0;

currentFrame = 0;

// Activar la animación por defecto

Active = true;

}

En cuanto al método Update, como ya se explicó la mecánica para animar

sprites, aquí se implementa la lógica para desplegar la tira de imágenes,

mostrándola una a una para dar la sensación de movimiento de los sprites. La

lógica del método Update es el siguiente:

public void Update(GameTime gameTime)

{

// No actualizar si la imagen esta desactivada

if (!Active) return;

// Actualizar tiempo transcurrido

elapsedTime += (int)gameTime.ElapsedGameTime.TotalMilliseconds;

// Si elapsedTime es mayor que frame time debemos cambiar de imagen

if (elapsedTime > frameTime)

{

// Movemos a la siguiente imagen

currentFrame++;

// Si currentFrame es igual al frameCount hacemos reset currentFrame a cero

if (currentFrame == frameCount)

{

currentFrame = 0;

// Si no queremos repetir la animacion asignamos Active a falso

if (!Looping) Active = false;

}

// Reiniciamos elapsedTime a cero

elapsedTime = 0;

}

// Tomamos la imagen correcta multiplicando el currentFrame por el ancho de la imagen

sourceRect = new Rectangle(currentFrame * FrameWidth, 0, FrameWidth, FrameHeight);

// Actualizamos la posicion de la imagen en caso que esta se desplace por la pantalla

destinationRect = new Rectangle(

(int)Position.X - (int)(FrameWidth * scale) / 2,

(int)Position.Y - (int)(FrameHeight * scale) / 2,

(int)(FrameWidth * scale),

(int)(FrameHeight * scale));

}

Finalmente llegamos en el método Draw, donde simplemente

invocamos el método spriteBatch.Draw SIEMPRE y cuando active este

en verdadero. Aquí esta el método Draw:public void Draw(SpriteBatch spriteBatch){ if (Active) { spriteBatch.Draw(spriteStrip, destinationRect, sourceRect, color); }}

En la clase Game1, comenzaremos agregando los siguientes

atributos:Animation playerAnimation; Vector2 spritePos;

Proseguimos a dirigirnos al método LoadContent, donde cargaremos

la imagen del Content a la variable playerTexture e instanciar la

posición inicial del sprite, y se la enviamos por parámetros al

método Initialize a nuestro objeto playerAnimation. Agreguemos

estás líneas, luego de la línea: spriteBatch = new

SpriteBatch(GraphicsDevice);

playerAnimation = new Animation();Texture2D playerTexture = Content.Load<Texture2D>("Imagenes/ken");

spritePos = new Vector2( GraphicsDevice.Viewport.TitleSafeArea.X + GraphicsDevice.Viewport.TitleSafeArea.Width / 2, GraphicsDevice.Viewport.TitleSafeArea.Y + GraphicsDevice.Viewport.TitleSafeArea.Height / 2);

playerAnimation.Initialize(playerTexture, spritePos, 101, 110, 6, 80, Color.White, 1f, true);

Ahora en el método Update, basta con solo invocar el método Update

de nuestro objeto playerAnimation, luego del comentario: // TODO:

Add your update logic hereplayerAnimation.Update(gameTime);

Y Finalmente, en el método Draw, invocamos el método Draw de

nuestro objeto playerAnimation. Recuerda que debes encapsular esta

instrucción con los

metodos spriteBatch.Begin(); y spriteBatch.End(); de lo contrario, no

veras ningún elemento desplegado en escena. Luego del

comentario: // TODO: Add your drawing code here, agregamos:

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

Ya puedes probar el proyecto y ver a Ken corriendo como un

condenado

Mensajes de TextoProyecto #2 – Parte #2

SpriteFont Esta clase representa una Fuente o Tipografía a nivel de código. Será

necesario crear una instancia de la misma a través de un archivo de tipo XML con la configuración del tipo de letra, tamaño y características (negrita, cursiva, etc.)

El Archivo SpriteFont La estructura del archivo es bastante sencilla, como podremos ver a

continuación tiene campos que son clave para la definición de la fuente:

Size: Tamaño de la fuente en puntos

Font Name: Nombre de la fuente (ver Fuentes Disponibles)

Spacing: Espaciado entre caracteres

Style: Bold (Negrita), Regular (Común) e Italic (cursiva)

Los campos restantes del archivo serán vistos en profundidad en el nivel Intermedio de la carrera.

Cree la carpeta Fuente en el proyecto de contenido

Luego agregue un nuevo elemento tipo SpriteFont, llamado Fuente

Cambie los siguientes parámetros:<FontName>Segoe UI Mono</FontName><Size>34</Size><Spacing>0</Spacing><Style>Bold</Style>

Agregue el siguiente atributo a la clase Game1:SpriteFont miFuente;

En el método Load, agregue la siguiente línea al final:miFuente = Content.Load<SpriteFont>("Fuentes/Fuente");

En el método Draw, agregue la siguiente línea antes de la línea del playerAnimation: spriteBatch.DrawString(miFuente, "Corre Forrest, Corre!", new Vector2(0, 0), Color.Orange);

Prueba tu juego, ahora con el mensaje escrito

Taller #2

Con las diferentes tiras de imágenes, construya un juego en el cual se muestren las animaciones

Tenga en cuenta que algunas imágenes son JPG, debe convertirlas a imágenes PNG sin fondo, para que el efecto se vea bien

Coloque varios mensajes con diferentes tipos de letra en diferentes partes de la pantalla