This is the first part in a five part series about 2D animations, I hope you will learn from this tutorial and if you have any questions, need help or whatever feel free to post a comment and I will get back to you asap. Now before I go into detail about animating in 2D I thought I would explain how exactly animating in 2D works, the different types of animating and my overall approach to simple animations. First 2D animations are not really animating at all, instead there just changing images very quickly to make it look like there animating, this is just like when you draw on multiple pages of a book and quickly flip the pages to see something move. To make this work you can either create a lot of images and draw them one after another but this can be very troublesome so instead most people create sprite sheets.
Sprite sheets are essentially a lot of images combined together to create one large image. These images are either arranged in a very specific order that the programmer can then use or after the sprite sheets are created there is an accompanied text or xml file that will give the programmer the correct locations of each image. I created a sprite sheet creator a while back that I have finalized and posted a few days ago, click here for the sprite tool ( I will be doing a video tutorial on how to create the sprite tool from start to finish in a while so check back later for that ).
I consider 2D animations as one of two types, the first and easier way is the frame animation. Frame animations will be completed in Part 3 of this tutorial. A brief description of this is that frame animations revolve around one image being drawn until something happens in which case another image will be drawn, this does not technically mean it is the next image in the sprite sheet. Lets say you want to draw someone rolling a dice, you would create a sprite sheet with the 6 dice options. Then when you want to show them animating you can draw one number, wait a little bit, then draw another random number until the user presses a button to stop the dice from rolling.
The other type is normal animating, this will be completed in part 4, where all the frames of the animation are drawn one after another with only a short pause in between. This is more common and is only slightly more difficult then frame animations. One aspect of animating that I would like to point out is that very rarely does the main object have only one animation so in Part 5 we will go over using multiple animations.
To do these animations it is fairly simple once you understand the concepts. Part of the XNA spritebatch draw method is the source rectangle parameter and in my opinion this is the main component of using sprite sheets. So if we look at the sprite batch draw method that has all of the variables we want it would be number 6.
All of these variables are really basic except for the sourceRectangle which will require some extra work but is not very hard. My approach to do this is by creating an array of rectangles that we load in with our texture and we send in the rectangle that corresponds to the current index of the animation into the draw call. This was a brief overview of 2D sprite animating check back soon for more info, source code and examples.
There are no downloads for this part.