mort8088 Just another WordPress site

18Mar/11Off

XNA 4.0 – Tutorial 6 – Spritesheet object


Using a variable per image is fine when you're looking at the XNA samples, but what happens when you're working on a project with 100+ images? One of my projects has over 3 thousand sprites & textures that's a whole lot of variables to keep track of, so I need something that'll make the job as easy as possible.

Why a sprite sheet?

Another reason for using a sprite sheet is that when you call spritebatch.Draw with an image it copies the image into the graphics memory, this takes time. If you're using the same image over and over it doesn't need to copy it each time but as soon as you change the image your drawing, it copies the new image into graphics memory before it draws it to the buffer. so a sprite sheet is one really big image made up of all the small images you want to use, saving you a lot of time when drawing. Now your only problem is finding a way to store all the source positions of the little images. so we're going to make a small but effective sprite sheet object that you can use in all your projects.

Making a sprite sheet

I'm rubbish at drawing and for this tutorial we're going to need a large number of sprites so head over to "Google Blogoscoped" for some free sprites. Don't worry the "Last guardian sprites" by Philipp Lenssen are under a Creative Commons license for you to use. This'll give you a sample set of around 700 sprites & backgrounds to play with. Next you're going to need a tool to put all the images together into one big image. Download "Sprite Sheet Packer" by Nick Gravelyn, this is the best tool for the job. Once you unpack both your downloads open the Sprite Sheet Packer.

The list box supports drag and drop for your images or you can use the button to add images using a file browser. Once you've added the images click the button to the right of "Image File:" and select a save location for your sprite sheet. You'll notice that the "Map File:" has been auto filled but it's wrong because even though they have different extensions now when we compile them, the two files in our will have their extensions changed to XNB which will result in a compile time error. So click the button to the right of "Map File:" and change the file name to something different. Also change the Save as type to XML.

When your ready click "Build Sprite Sheet" wait Approximately 5/10 seconds and you now have a shiny new sprite sheet and a list of where each sprite is.

New project

Create a new project and drag your PNG & XML files in to the content project and add a new class to the game project, call it something like SpriteSheet.cs, then add the this code :-

this is our sprite sheet class doesn't look like much but it will get the job done.

And here's how we're going to use it in the game. We're going to have our game randomly draw some sprites to the screen so at the top of Game1.cs add the following variables:-

Here we've added an instance of our class and called it spriteSheet1, we've also added some arrays to hold our sprite data, Max_Count is a constant so we can change the number of sprites we draw without hunting through the code for all the places we used it.

Next jump to the LoadContent() method and add the following:-

These three lines instantiate our sprite sheet class and use the Content.Load method to populate our image and the list of sprite positions within that image. That's it, we're ready to draw our sprites.

Now we just need to set up our position & sprite data, add this after the sprite sheet lines :-

And update the Draw method to look like this :-

We're using the for loop to run through our array of positions and sprites, as you can see we're using an extra parameter in the spriteBatch.Draw method in this instance of spriteBatch.Draw. We pass the big sprite sheet as the image to draw, the Vector2D of where we want to draw, followed by a rectangle of the area inside the image that we want drawn.

Here we're using the spriteSheet object like an array. This is because of the indexer property we set up in the spritesheet class you can find an explanation of indexers on the Microsoft msdn website.

The reason we use an integer to reference which sprite we want to draw is because it's far more convenient than using a string; and when we come to writing an animation system we can ref reference cell of the animation by it's index number in the sprite sheet.

Conclusion

And there you have it, one of the most useful objects in game development.

The reason the Sprites all seem to be drawn inside a white box is that the sprites we used all have white backgrounds you could remove this in any paint package like Paint.NET. just make the correction on the compiled image rather than each individual image file

Comments (1) Trackbacks (0)
  1. Hi Mort8088, thanx for your info.
    I’d like to ask you if you can help me, I’m desperately in need of a ” dds to texture2D ” tool to convert Mortal Kombat 9 textures. I try to use x-packer but the tool seems to export fen from texture2d to dds but doesn’t reimport back dds to texture2D. Please can you help me please? I will donate for a little tool

    Thank you very much


Trackbacks are disabled.