El documento detalla la creación y despliegue de animaciones en 2D utilizando sprites en un proyecto XNA Game. Se explican los métodos necesarios para inicializar, actualizar y dibujar animaciones a partir de una tira de imágenes y también se introduce el manejo de textos con distintas fuentes. Finalmente, se propone un taller para construir un juego que incorpore estas animaciones y mensajes de texto.

1. Despliegue de sprites
animados 2D
Juan Carlos Zuluaga

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

3. Sprites Animados y
Mensajes
Proyecto #2

4. Sprites Animados
Proyecto #2 – Parte #1

5.  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;

6.  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();

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

8. 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:

9. 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));
}

10.  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);

11. 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 here
playerAnimation.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:

12. spriteBatch.Begin();
playerAnimation.Draw(spriteBatch);
spriteBatch.End();
 Ya puedes probar el proyecto y ver a Ken corriendo como un condenado

13. Mensajes de Texto
Proyecto #2 – Parte #2

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

15.  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

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