Free Animated Sprites software: Reading the “flipbook” image and showing it


What is it about the XNA free information with respect to Sprite animation?  Why is it so hard to find a useful post on how to generate an animation?  I have no idea, but then again, most of my posts are useless, but maybe this one won’t be.  Also, will you be able to use this with Windows 8?  Not certain if you will be able to, but will test it and get back to you on that, or not.  Not being disrespectful of your time, just this is a crazy month.  It’s MARCH MADNESS!

Think about flipbooks that you might have made in your youth, unless you were lazy like me, but even I managed to find a few and flip through them. 

First of all, you need a file with images that are similar to the flipbook.  For example, here is a little guy who walks left and right, even though you don’t really need to have the two types of images, that is the left and right.  The checkerboard pattern shows that the “alpha” channel has been removed from the images.

(Image is from Kevin Sung’s curriculum material)


Open Paint.NET and remove one of the rows.  If you haven’t done this before, here is the process:

Open, and select the lower row (or upper row, your choice) using the Rectangle Select tool. image
Now you will need to shrink the canvas. image
Shrinking the canvas, select the canvas size image
Select canvas height and change it to 64 pixels image
Now you have a single row of 4 images


Normally you will use multiple rows, but to keep it simple, let’s use one row. Make sure to save your image and then include it in the XNA 4.0 project.

Once you have placed the image in your project, you will need a way to read the image and to use the frames.  Normally you would use XML or a set-up file to set the number of frames/columns, and rows.  In this case there is 4 frames/columns and 1 row

Now you need some software to read the frames, although there is some thought (Kenny Spade) that you cut out the images and save to a temporary file.  Kenny Spade is usually correct, but for this blog, I am going to do it my way.

To get started, the program has to know the length and height of each row, there is no standard for animation sprites, so an algorithm is required.

In this case I will discuss this in my next blog.

However, just for fun I have included the code here in this blog.  The code is made up of code from the MSDN article:

On some Windows 7 installations, mainly mine, the downloaded code doesn’t work as is, the easy way is to just start a new windows game and then add the code to Game1.cs and the AnimatedSprite class to your project.