Nick Gravelyn

Today I asked the Twitterverse if anyone knew of a tool for making sprite sheets. I got a couple suggestions, but none that were good enough for me (in fairness, I was linked this tool, but at that point I was already 90% done with mine). Ziggyware has a tool, but its placement of the images is pretty bad, wasting a lot of space. So I did what every self-respecting programmer does: I made my own. And damnit, I think it’s really good.

First off, a screenshot of the tool itself:

As you can see it is both simple and powerful, all at once. The list box supports drag and drop of the images or you can use the button to add images using a file browser. There are options for the maximum resulting image size, padding added to the individual images, whether you need a power-of-two output, and whether you want a square output. The build process is entirely multithreaded so the app doesn’t hang up if you throw, say, 720 free RPG images at it. Which is exactly what I did to get this resulting sprite sheet:

Pretty cool, huh? And that only took the tool a few seconds to crunch through and produce for me.

The tool also generates a plain text file that maps the image names to their rectangle in the sheet. You can see the output for this sprite sheet here: Sprite Sheet.txt. By doing plain text, I tried to make this program as agnostic as possible in regards to what you might do with the sprite sheets. It relies only on .NET 3.5 (and technically that might be able to be lowered down; I just left it by default).

I did utilize some awesome code from the Nuclex Framework for handling the logic of placing the rectangles (though I did change it from using the XNA Rectangle structure to the System.Drawing.Rectangle structure to break that dependency).

I’m currently talking to Cygon of Nuclex to work out licensing things (his library is under the IBM Common Public License, but I want to release as MIT since it’s just simpler and easier to read through), but once that’s figured out I plan to release the app and the code on CodePlex. So keep an eye out for that.

EDIT: After staring at that sprite sheet for a bit, I got angry. It’s pretty good, but it’s not great. Look at all that blank space you could shift those little guys around into. That just won’t do. So I did some modifications to the algorithm a bit. First I sort all images by size so as to place larger sprites first. Then I iterate the process of placing the rectangles, gradually decreasing the size of the output by the smallest sprite in the sheet until I reach a size where the sprites won’t fit. I ran the new code on the same set of images as above and got this new sheet:

Not only does that just look better, it really is better. Here are some numbers to see exactly what gains this makes:

Old Sheet: 2.35MB
New Sheet: 1.52MB

Old Sheet: 1988×1018 (2,023,784 pixels)
New Sheet: 1704×852 (1,451,808 pixels)

Now that’s what I’m talking about.

This new iterative process does increase the time to build the sheet by a little bit. Whereas that first sheet took only a couple seconds to create, the new sheet took about 14 seconds. It’s quite a large additional time, but it’s still only 14 seconds to pack up 720 images into an efficient sprite sheet. I say that’s time well spent.