[XNA] Animação de Sprites – Parte 2

Pelo visto muitos leitores estavam ansiosos por mais tutoriais sobre animação de sprites, então vamos hoje falar mais um pouco. Neste tutorial basicamente falaremos sobre o sprite sheet (folha de imagens) e descreveremos uma estrutura básica que armazenará as animações que compõem este objetos 2D. Esta estrutura consiste de uma classe que definirá as animações ou seja, qual o quadro de inicio e quantidade de quadros na sequência desta uma animação, se esta animação se repete ou não, entre outras coisas que podem ser acrescentadas no futuro.

Primeiro passo para se criar uma animação é preciso ter um sprite sheet de um objeto (nosso caso um personagem de rpg) como vimos na primeira parte deste tutorial a imagem do Mario e Luigi. Nosso personagem animado que será animado neste tutorial é o Claudius.

 

A esquerda sprite sheet do personagem Claudius e a direita o sprite sheet com a marcação dos quadros (frames)

Perceba que o sprite sheet possui as imagens espaçadas igualmente tanto na vertical quanto na horizontal formando quadros de mesmo tamanho, facilitando assim o processo de animação. Este sprite sheet tem 192 x 256 pixels, então cada quadro tem 32 x 64 pixels. Se dividirmos esta imagem nos seus respectivos quadros teremos a imagem a direita marcada.

Vamos criar então uma classe que possa representar cada animação deste personagem. Daremos o nome para esta classe de Animation, veja como ela ficaria abaixo.

public class Animation
{
    #region [ Fields ]

    ///
    /// Lista contendo a sequência de quadros da animação
    ///
    public List Frames
    {
        get { return this.frames; }
    }
    private List frames = new List();

    ///
    /// Intervalo de tempo de passagem dos frames da animação
    ///
    public float Interval
    {
        get { return this.interval; }
        set { this.interval = value; }
    }
    private float interval = 0.25f;

    ///
    /// Define se existe repetição na animação
    ///
    public bool IsLooping
    {
        get { return this.isLooping; }
        set { this.isLooping = value; }
    }
    private bool isLooping = false;

    ///
    /// Quantidade de frames da aniamação
    ///
    public int FramesCount
    {
        get { return this.framesCount; }
    }
    private int framesCount = 0;

    #endregion

    #region [ Constructor ]

    ///
    /// Construtor de uma animação
    ///
    /// Nome da animação que será utilizada como chave
    /// Tamanho do quadro
    /// Quadro inicial
    /// Quantidade de quadros
    public Animation(List frames, int startFrame, int framesCount)
    {
        this.framesCount = framesCount;
        // Armazena os quadros referêntes a esta animação
        for (int i = startFrame; i < startFrame + framesCount; i++)
            Frames.Add(frames[i]);
    }

    #endregion
}

No próximo tutorial veremos então como gerenciar as animações que serão criadas utilizando esta classe que definimos hoje. Abraços, até a próxima.