In my previous blog, I showed you how to use a pre-built class to generate animations that move like a Gif, mainly because I have not shown you how to move the image. But reviewing the code, it seemed somewhat complicated, which means I didn’t quite get it, maybe you did. So when that happens I “boil” it down to the absolute minimum.
(Previous blog: http://blogs.msdn.com/b/devschool/archive/2012/03/13/free-animated-sprites-software-reading-the-flipbook-image-and-showing-it.aspx)
So to deviate from the previous blog, I decided to show how to implement, simply, the process of showing the several images in a spritesheet. And yes, I realize that there are sheets out there with a gazillion of images, I am talking about using very simple spritesheets that have a single row.
Let’s start with a spritesheet that looks like the following:
This was carefully made using Paint, just the plain old Paint that is included on Windows by default. If you don’t get the squares exactly right, then you may not see the program working correctly. the following code the rectangles to contain the correct image are generated. In production code you would use loops and collections to simplify the code. The code sample attached to this blog contains all of the code and was working when I posted it.
As you can see the lines of code move through the numbers in the image first using the Framewidth from the x location on the image of zero (not the playing field). Then the location is moved to the x location at the Width of the frame, the 2X of the width of the frame and then 3X of the width of the frame.
So it looks like this:
Seems repetitive? That is one of the things computers are good at and humans aren’t.
In this case the spriteBatch.Draw does most of the work, you could create a class to simplify the “Game” class, but we won’t in this case to keep everything really simple. You could also place the rectangle processing directly in the spriteBatch.Draw code, but I doubt if that would be efficient and it would be really messy.