Animation

Creating Animation Class

You need to create a new class, so from the main menu click File, and select New File. Name the class Animation:

You will have the following code:

using System;
namespace TestGame
{
	public class Animation
	{
		public Animation()
		{
		}
	}
}

You will need to add the following to the using section:

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.Graphics;

This will allow the class to access the MonoGame framework and SDK. You need to add the following variables inside the class. Try to add these straight after the { after the public class Animation line:

// The image representing the collection of images used for animation
Texture2D spriteStrip;

// The time since we last updated the frame
int elapsedTime;

// The number of frames that the animation contains
int frameCount;

// The index of the current frame we are displaying
int currentFrame;

// The color of the frame we will be displaying
Color color;

// The area of the image strip we want to display
Rectangle sourceRect = new Rectangle();

// The area where we want to display the image strip in the game
Rectangle destinationRect = new Rectangle();

// Width of a given frame
public int FrameWidth;

// Height of a given frame
public int FrameHeight;

// The state of the Animation
public bool Active;

// Determines if the animation will keep playing or deactivate after one run
public bool Looping;

// Width of a given frame
public Vector2 Position;

Now add the following method into your class, this is the Initialize method for the animation:

public void Initialize(Texture2D texture, Vector2 position, int frameWidth, int frameHeight, int frameCount, Color color, bool looping)
{
	// Keep a local copy of the values passed in
	this.color = color;
	this.FrameWidth = frameWidth;
	this.FrameHeight = frameHeight;
	this.frameCount = frameCount;

	Looping = looping;
	Position = position;
	spriteStrip = texture;

	// Set the time to zero
	elapsedTime = 0;
	currentFrame = 0;

	// Set the Animation to active by default
	Active = true;
}

The update method involves using currentFrame to identify which frame to display, simple mathematics will allow us to work out which part of the sprite strip needs to be displayed. Every 100 milliseconds the currentFrame will be incremented. When the framecount equals the currentFrame the end of the strip has been reached. The code will then set the currentFrame to 0 to return to the first frame. The code will allow you to not loop an animation and if this is the case the code sets active to false:

public void Update(GameTime gameTime)
{
    // Do not update the game if we are not active
    if (Active == false) return;

    // Update the elapsed time
    elapsedTime += (int)gameTime.ElapsedGameTime.TotalMilliseconds;

    // If the elapsed time is larger than the frame time we need to switch frames
    if (elapsedTime > frameTime)
    {
        // Move to the next frame
        currentFrame++;

        // If the currentFrame is equal to frameCount reset currentFrame to zero
        if (currentFrame == frameCount)
        {
            currentFrame = 0;
            // If we are not looping deactivate the animation
            if (Looping == false)
                Active = false;
        }

        // Reset the elapsed time to zero
        elapsedTime = 0;
    }

    // Grab the correct frame in the image strip by multiplying the currentFrame index by the Frame width
    sourceRect = new Rectangle(currentFrame * FrameWidth, 0, FrameWidth, FrameHeight);  

    // Grab the correct frame in the image strip by multiplying the currentFrame index by the frame width
    destinationRect = new Rectangle(
        (int)Position.X – (int)(FrameWidth * scale) / 2,
        (int)Position.Y – (int)(FrameHeight * scale) / 2,
        (int)(FrameWidth * scale),
        (int)(FrameHeight * scale)
        );
}