Monday, April 26, 2010

2D Animation: Part 6 Custom Animations

Welcome to the sixth part of my 2d sprite animation tutorial so far we have covered adding in sprite sheets with multiple animations but until now our animations are all the same except for the images. This tutorial is going to cover adding in a custom animation class that will allow us to have multiple animations with multiple settings such as different scales, size, rotations and more. Right now our animations are nothing more than a name and an array of rectangles with there properties being defined as a whole now we could change the settings of the animation whenever we change the animation but that can be troublesome so instead were going to make our own animation class.

This class is going to define what the animation settings are and will be on a per animation basis so that we can have complete control over our animations. So lets start by adding in our animation class which I named AnimationClass, I was going to call it just Animation but that runs into some other naming issues so Animation Class is fine. We already have all the properties of our animations in our sprite manager class so were going to cut and paste them into this new class. We are also going to add in the Is Looping boolean from the sprite animation class in here as well. The result of our animation class is the following.
Now we have our animation class but we now need to use it in our sprite manager class so were going to change the Rectangle array in our dictionaries to Animation Class, we will get the following for our sprite manager class.
After that we need to change our sprite manager constructor slightly to set the variable frames since some animations might have more frames than others we do not want this to be a global variable but instead a variable for each animation. We still want to know how many frames are in the total image so that we can calculate our width, height and origin but that is all.
Now that we have our constructor loaded were going to change our add animation method to now accept our animation class as a parameter, we are now also going to add in a parameter for frames to allow us to have multiple animations of different lengths. The overall method is about the same except were adding in animations and not just rectangles, below is the final result.
Now adding in this new animation class has completed messed up our drawing method in our sprite manager class. All of the properties we were using to draw the animation has now been moved but we just need to use our dictionary and animation string to get them back so lets do that real fast to get our animations to draw.
Now there is one final thing we need to do before this will run, within our frame animation and sprite animation classes we reference our frames so we just have to reference the current animations frames so our frame animations set frame method now looks like this.
And in our sprite animation classes update method we need to make the following changes.
That is it for the 6th part in this tutorial part 7 will probably be uploaded tomorrow and will go over using our new modifications to have our dude move in all directions with an idle animation in all directions using only two animations of different lengths. As of now this project will run but will not do anything since our game1 class is either broken with the new changes or empty but you can download the code below.

You are free to use or modify this source in any way it is for learning purposes


  1. A very good 2d animation.The animation is very beautiful....

    2d animation

  2. Thanks for your ideas. You can also find the details on, at the 2D to 3D image Processing. The main object of the Clippingimages is to provide quality web services and is among the few graphics design development company in Australia.
    Email :