Thursday, April 22, 2010

2D Animation: Part 2 Sprite Manager

Before I get into the second part of my 2d animation tutorial I would like to mention that I updated project santa which is available here.

Now lets begin, to create our two separate sprite animation types where going to first create an abstract class that will allow us to keep track of the similar functions in one class instead of two. We will call this class the SpriteManager class. The way I like to program is to start out with the base functions first, add in the functionality to the functions while adding any extra functions that simplify the process or changing old functions to work with the features. So first where going to add in the two main functions, the constructor and draw method.

So far were really not doing anything but we know for sure we need to use these functions so we can add them write away. Next lets start adding all the variables where going to need to have to load and draw in our sprite sheet, for now were going assume there is only one animation. Well we know that to draw our image were going to need a Texture2D, Position, Color, Origin, Rotation, Scale, SpriteEffect and an array of rectangles. Now one thing for sure that needs to be loaded in by default is the texture and one practice I have is adding the required variables into the constructor. One bonus to this is that we can then create our array of rectangles within our constructor as well. So for now where going to make the following changes.

One thing I would like to mention is that our Texture2D variable is protected as well as our rectangles and frame index because these are only within this class and our base class we do not want them changing the texture or changing our rectangle array that will be bad. You might be thinking "well what about the frame index why is that protected", well the reason is because we want our inherited classes to handle how that is changed not our main class. This will make more sense when I go over frame animation. Now the last bit we need to do is create the rectangle array and do our drawing. First loading of the rectangle array, this will be done in the constructor.

Now we made a slight modification to our constructor because we need to know how many rectangles to make otherwise we will not know how big the array is or how wide each image is. So after we save the texture we then create a variable named width, this is set to the width of each individual image within the animation which is easily calculated by taking the whole image width and dividing that by how many frames there are. Next we initialize our Rectangle array using frames for our count. Then we iterate through each Rectangle to create them. Rectangles need an x coordinate, y coordinate, width and height so we fill that in by taking the width times i to find the x coordinate. The y coordinate is zero since it is just at the top, the width is next and last is the height of the image. Overall its very basic. Now to use this code so far is very easy. Just modify your game1.cs to include the following.

At the top of game1.cs

In the Load Content Method

In the Draw Method

Note: To make this work you will have to do two things. One change SpriteManager from an abstract class to a normal public class and two download the loading circle image and place it in your content folder. You can download this image from the download link below. Now you should see a green semi-circle sort of thing just sitting there. Well that is all for the second part of my 2D animating tutorial I will have part 3 up very soon.

If you need help, have questions or the links don't work post a comment and I will try my best to help.

Download Source Via Dropbox
You are free to use or modify this source in any way it is for learning purposes.
You can also use my loading circle image if you wanted to...


  1. Very very helpful article :-) and very well defined... Thanks a lot... :-) It helped me a lot :-)

  2. Great tutorial,thanks you so much!