Animando Sprites en XNA

diciembre 29, 2007 at 5:50 am (Tutoriales)

Hola, en este tutorial, les mostrare como se animan sprites en XNA, cabe resaltar que existen diversos metodos para animar un sprite. Antes de seguir con este tutorial, encuentren algun sprite sheet de prueba. En la seccion de enlaces, pueden visitar la pagina de chara-projects.net ahi hay una gran variedad de sprite sheets. Yo escogi este sprite sheet para este tutorial. El metodo que voy a utilizar a continuacion, lo vi en http://xna.animered.net y le hice unas ligeras modificaciones. El publicado en esa pagina estaba hecho para XNA beta y este es para XNA 2.0

SpriteSheet

1. Abrimos el explorador de soluciones (Si es que no esta abierto) y hacemos click en el nombre del proyecto: Agregar> Elemento existente.

2. Seleccionamos el spritesheet que estemos utilizando y lo agregamos al proyecto.

3. Volvemos a hacer click en el nombre del proyecto: Agregar> Nuevo elemento. Seleccionamos “Clase” y en el nombre, escribimos “Sprite.cs” y hacemos click en aceptar.

Y nos aparecera una ventana de codigo con las siguientes lineas.

using System;


using System.Collections.Generic;

using System.Text;

namespace AnimandoSprites2{
class Sprite{}

} Debajo de using System.Text; agregamos
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Content;
Y dentro depublic class Sprite

{

}

Agregamos las siguientes lineas:

//Numero de cuadros que contiene la animacion

 public int NumeroDeCuadros;

private int AnchoDeCuadro;

//textura

public Texture2D Textura; //posicion del sprite como vector bidimensionalpublic Vector2 Posicion;//el numero de cuadro actual

public int CuadroActual;

//constructor ponemos todo en ceros

public TexturaAnimada(){NumeroDeCuadros = 0; Posicion = Vector2.Zero;

}

Ahora que copiamos todo ese codigo, que ya esta comentarizado aclarando que es cada cosa y creamos el constructor para inicializar los valores de la clase. Vamos a escribir el metodo “cargar”, este metodo nos va a permitir cargar el sprite que utilizaremos en el juego.Justo despues de cerrar el constructor vamos a escribir lo siguiente: public void cargar(ContentManager administradorDeContenido, string archivo, int Cuadros){NumeroDeCuadros = Cuadros;Textura = administradorDeContenido.Load<Texture2D>(archivo);

AnchoDeCuadro = Textura.Width / NumeroDeCuadros;

}

Inmediatamente despues de cargar la textura que vamos a utilizar, escribimos el metodo “Animar” que es el que se va a encargar de cambiar el cuadro para que de la ilusion de movimiento. En esta parte del codigo, aplicaremos el concepto de hashing. No es la intencion de este tutorial explicar el concepto. Pero a manera breve, es utilizado por las memorias y los sistemas operativos para ‘recordar’ donde almacenaron la informacion. En XNA lo utilizaremos frecuentemente para mantener a un sprite dentro de los limites de su spritesheet. Copiamos el siguiente codigo.public void Animar(){//Sumar cuadro actual

CuadroActual++;

//Evitar que el numero de cuadros se desborde CuadroActual = CuadroActual % (NumeroDeCuadros);}Finalmente, escribimos el Metodo “Dibujar” que nos va a permitir dibujar el personaje en la clase principal. Este metodo toma como parametro un SpriteBatch.public void Dibujar(SpriteBatch Batch){//calcular el cuadro para cortarlo. El rectangulo almacena la posicion X-Y del cuadro. Como vamos a utilizar el primer cuadro, la posicion Y es 0 y la posicion X. Es multiplicada por el ancho del cuadro para encontrarla.

Rectangle Rectangulo = new Rectangle(AnchoDeCuadro * CuadroActual, 0,AnchoDeCuadro, Textura.Height); //dibujar la texturaBatch.Draw(Textura, Rectangulo, Color.White);
}
Y con eso terminamos la clase para animar sprites. Ahora en el explorador de soluciones volvemos a abrir el archivo Game1.Cs y ponemosjusto debajo del ContentManager contentprivate Sprite Personaje;
SpriteBatch Sbatch;
En el metodo Initialize() copiamos el siguiente codigo

Personaje = new Sprite();

Con esta linea inicializamos a la variable Sprite, como un componente de la clase Sprite.cs que acabamos de crear. y mediante esta variable, podemos accesar a las metodos que la misma contiene. En el metodo LoadGraphicsContent, vamos a agregarle las siguiente instruccion:Personaje.carga(content, “link”, 3);
Personaje.Posicion = new Vector2(200, 200);

La primera instruccion, le estamos pasando como parametro al metodo “carga” el administrador de contenido, la ruta y nombre de la sprite sheet y el numero de cuadros que corresponden a la animacion. La segunda isntruccion, le pasamos la posicion de nuestro personaje en coordenadas X-Y respectivamente. Vector2 es un vector bidimensional.En el metodo Update de Game.cs agregamos la siguiente lineaPersonaje.Animar();

Y en el metodo Draw() solo agregamos las siguientes lineas:

Sbatch.Begin(SpriteBlendMode.AlphaBlend);

Personaje.Dibujar(Sbatch);

Sbatch.End(); Ahora presionamos F5 para generar el proyecto y veremos a nuestro personaje animado o a la secuencia de cuadros que elegimos para animar.Ejercicios para reforzar lo aprendido:

  • Animar un sprite con mas de 3 cuadros de animacion
  • Animar dos sprites y ponerlos en el centro
  • Animar a un personaje en el origen y a otro en el centro
Anuncios

1 comentario

  1. Nano Brasca said,

    Referencia a objeto no establecida como instancia de un objeto.

    Ese mensaje me lanza el compilador al compilar la parte de

    Personaje.cargar(Content, “Rita”, 3);
    Personaje.Posicion = new Vector2(200, 200);

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: