Saturday, April 24, 2010

2D Animation: Part 4 Sprite Animation

Welcome to the fourth step in my 2D sprite animation tutorial, to follow this tutorial you are going to need to follow the second part which you can find here. If you followed part 3 of this tutorial you will find the first couple of steps very familiar. This tutorial is going to cover how to make animations that will update continuously, for this tutorial it will be a loading circle that . Now lets begin, lets start by creating our class named SpriteAnimation. This class is going to inherit from our sprite manager class just like in the frame animation. Because our sprite manager had a constructor that took in parameters we have to first initialize our constructor to allow us to use the sprite manager. So this is how our class should look so far.

This is the just like our frame animation class, now to get this to load we need to initialize it in our game1 class so just add the following line to the top of game1.cs.
We have the animation variable declared but it is set to null so we need to load it within our load content method, this is the exact same as our load content from part 2 and looks like this.

Now we have our loading bar loaded but we can not see it yet so we just add the following to our Draw method in game1.cs and we can now see our loading circle. If you need more of an explanation of this see part2 here.

Now we have our sprite animation loaded and drawing but its not actually updating so lets do that now. Now there are some variables we need to define first so lets move into our sprite animation class and add some to the top. Before I show you what we need to add lets look at how we want our animations to update, we want it to draw the frame, wait some amount of time then draw the next one until it gets to the end and then either stop or loop back to the beginning depending on what is being drawn. So were going to need to know if we are looping, how long we need to wait and how long it has been since we last changed frames. So we can create the following variables.

Now the IsLooping boolean is just whether or not we are looping this animation or not. Our timeElapsed is just how long it has been since our frame has last changed but our timeToUpdate and FramesPerSecond is a little different. Now when we are updating our animation we need to know how long it takes to change from one to another but when we are assigning this we are doing it in frames per second which is how many times per second this will be changing. To find out how long it takes between each frame change we use the following.
So we first start out with saying that our speed ( S ) is equal to our change in ( change in is abbreviated with a capital delta which is that triangle ) frames ( F ) divided by our change in time ( T ). You can look at this by saying that our speed of drawing is calculated by our frames per second. Now the value were trying to calculate is how long ( time ) it takes to change images ( frames ) which can be written as our change in time over change in frames. So just by taking the inverse of both sides we can get our desired result. Now we can simplify this further because we know that our speed is in frames per second and that our time is 1 second. Therefore our final result is that our time per frame is equal to 1 divided by frames per second. This was a rather easy equation that I probably didn't need to explain this much but I thought this would be a good introduction to using the equation editor I used here, and because I might doing simple tutorials on math that is related to programming. Anyway lets continue. Now that we have some variables lets use them in an Update method for our sprite animation that we can call from our game1 class.

So first thing we need to do is make sure we have the Game Time as a parameter since this will determine how much time has elapsed which in turn determines whether or not we have to change frames. So first thing we need to do is add the amount of time that has elapsed since our last draw into our elapsedTime variable, next we need to find out if we need to update or not by checking whether or not our elapsedTime is greater than the our timeToUpdate. If it is then we simply add one to our frame index, unless we reach the end of our animation then we check if were looping and restart it by going back to the first frame. Now we are good to go but we need to define some extra variables when we are loading our loading circle so lets just add them below our other definitions in our game1 class.

Now we have everything in order except for one final piece, we need to make sure our animation is updating so add the following into the Update method of game1 and you should see the loading bar, or whatever image, animating.

So that is it for the fourth part of the tutorial be sure to check back again for part 5. Also after thinking about 2D animations I have thought of some extra ideas on making the most of your animations so I will be adding most likely two more parts to this tutorial. Part 6 will be on adding events and part 7 will be on small extra helper methods to help with creating your game like easier loading, pausing and more. Part 7 will be sort of long so I might separate it more than once.

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


  1. this will be helpful toooo : it about simple begining of the stuff

  2. Can you explain why you are doing timeElapesed -= timeToUpdate;?

    1. This is to reset the timer without simply setting it back to zero. That would remove any excess time and not keep our desired fps.

    2. Oh, ok I see, thx.

      Great guide btw. Just what I needed

  3. Hello, could someone explain me the use of the FramesPerSeconds variable please ? It looks like we are never using it anyways. If I delete the line were we set it to 30 in our game1.cs or if I change the value it will loke all the same.

    Awesome tutorial by the way !