Sunday, April 25, 2010

2D Animation: Part 5 Multiple Animations

Welcome to the fifth part of my 2d sprite animation tutorial, today I will be going over how to add in multiple animations. So for this example we are going to have our guy moving left and right with only a few modifications to our current sprite manager and sprite animation class. Before we begin lets think about how we want to arrange our animations, our final goal is to be able to create, check and assign our animations easily. For now our animations are nothing but an array of rectangles but we will extend this later. Now we can make a list of arrays and access them by index but that can get pretty irritating trying to remember which animation is which number. So instead we will use a Dictionary, a dictionary in C# works pretty much just like a normal dictionary, allow me to explain what a dictionary is and why we are choosing a dictionary type for our animations.

A dictionary is a type of collection with two variable types, one is the key and the other is the value, for our animations we are going to use a string for our key and a rectangle array for our value type. So we are going to replace our rectangle array with a dictionary, we are also going to store a string for our current animation simply named Animation, which we will use in our main class to change our animations or check which animation is currently playing.
We are also going to add in 3 int's to give us some information about our image that we will use when we create our animations. Height is the height of each individual frame, Width is the width of each frame, and Frames is the amount of frames in all of the animations. Now we need to add in one more variable to our constructor and that is how many animations there are, we are also not going to be loading any more rectangles since we now have a dictionary.
Now we have our basic variables loaded but we do not have our animations loaded, we are going to add in a function to help us with that. This is going to be a simple function that will take in the name of our animation and which row the animation is located and creates our rectangle array and adds it to our dictionary.
We now have our function to add in animations but the new method messes up some of our other stuff as you may have noticed. First lets fix our Draw method to allow us to use our dictionary.
Dictionaries work like lists but instead of an index number we use the key type which is our animation name. Next lets fix up the constructors from our Frame Animation and Sprite Animation classes by adding in the animations variable.
Now that our classes are all back to normal and functioning lets use our new functions to create our "dude" you can download the sprite sheet from the source link at the bottom of the page. You can also create your own using my basic sprite sheet creator here. Now we want to have our sprite animation move left and right so we need to initialize our sprite animation dude as well as load a keyboard state I always call kbState at the top of your game1 class.
After we initialize it lets load it and add in our animations within our Load Content method. Our loading method will look like the following.
This is similar to our last tutorial except we now have to add in the 2 in our constructor argument which represents 2 rows of animations. The two add animation calls are easy to understand, just the name of the animation right or left and which row of the image the animation is on, first or second row. After we load it we have to make sure we draw it, this is the exact same as the last tutorial but in case you forgot it here it is again.
Now for the new Update method.
For our Update method we just check to see if there pushing left or right and if they are we change the animation and there position slightly. We also have to make sure we call the sprite animation update. That is all for this tutorial check back again, probably tomorrow, for the next tutorial. Also I was going to do two more parts to this but after completing what I thought was going to be one part I think I will be separating it even more otherwise it will be way to long.

You are free to use or modify this source in any way it is for learning purposes.
You can also use the dude sprite sheet if you wanted to.


  1. this would be a better tutorial with screenshots...

  2. they have code screen shots

  3. A very nice article in the site.....

    2d animation