Friday, April 23, 2010

2D Animation: Part 3 Frame Animation

Welcome to the third part of the 2D animation tutorial. I am going to assume you have the sprite manager class from part 2 which you can find here, or download from the source at the bottom of the page. This tutorial will cover the creation of frame animations which are animations that go from one from to another but not always in order. You could have the next frame be based on something that happened or like in our example a random frame when we press the space bar. Now before we begin adding in the frame animation class lets first do two things, one create our sprite sheet now I used my Sprite Tool to create a dice sheet that you can see here.

Dice Sprite Sheet

You can download this by right clicking on the image and selecting save image as, or you can just drag it onto your desktop. Secondly were going to need to change our SpriteManager class from a normal class back into an abstract class. Next lets add in our FrameAnimation class and have it inherit from the SpriteManager class. All we need to add is the constructor we do not need to add in the draw method since it will be the exact same. So this is what our class should look like as of now.
So far all we are doing is inheriting and adding in the appropriate parameters to allow use to use the Sprite Manager class. We don't actually need to do anything within our constructor since that is handled by the sprite manager class. Now were going to go into the game1 class and add in our dice frame animation, you can just rename loading into dice and SpriteManager into FrameAnimation. Also since we are going to use the random number generator were going to want to add in Random variable and were also going to need to add in a KeyboardState variable to allow us to know when to change the dice. So were going to add in the following code to our game1 class.

At the top of game1 class

In the Load Content Method

In the Draw Method

Now if you were to run the game you would get exactly the same as in part 2 just the first image displayed and nothing is happening. Now what we would like to happen is that the dice will change to a random number when we press the space bar but as of now we have no way of changing the image being shown. So we are going to add in a very simple function in the FrameAnimation class that will allow us to change the frame being drawn. We already have all of the variables in place we just need to make the function and use it. So in our FrameAnimation class below the constructor were going to add in the following.
The only type of check we do is make sure that our frame were trying to set is less than how many actual frames we have because that would not work. This simple function is all we need to allow us to create frame animations so now all that is left to do is add in our keyboard input within the game1 update method. In this example we are just going to be using the space bar but if you wanted to use the gamepad you would take the same approach but using Gamepad and GamepadState instead of keyboard.
So first we make a variable name prevKbState that will store in the last Keyboard State from kbState, we then have to update our kbState to the current Keyboard using Keyboard.GetState(). Then with a simple if statement checking to see if we just pressed our space bar, if our current state we pressed space bar but our last state we didn't then we just pressed it, we change the frame of the dice using the random number generator between 0 and 6 we actually does between 0 and 5 because the 6 is exclusive. And there you go that is our Frame Animation class utilizing our Sprite Manager class to create basic animations that are not really animating but can be used for multiple cases. If you have any questions, suggestions or need help post a comment and I will reply asap.

You are free to use or modify this source in any way it is for learning purposes.
You can also use my dice image if you want too...


  1. Excellent Article, :-)

  2. Thank you.
    Would add some more tutorials but I don't know what to do it on.

  3. Very good article! I don't understand one bit though. Why did do split the FrameAnimation class into a seperate class. Could it not be just placed into the SpriteAnimation class?

  4. That helped me so much, really thank you very much :)