Posts
67
Comments
120
Trackbacks
0
Sprite Padding Using Guides in Gimp

Lately I’ve been doing a lot of drawing. A lot of it has been creating sprite animations for XNA projects. From many years of using it, I work primarily with Gimp. Some aspects of it frustrate me (mostly its awkward window management in Windows), but it suits my purposes well enough and lets me do things that other free solutions don’t.

One thing I learned quite some time ago was that when including multiple items in a single texture (i.e a sprite sheet), you want to have some separation between each item to avoid bleeding between items if you do any in-game scaling. Something like 2-4 pixels should do the trick.

Unfortunately, spacing these things out properly can get very annoying very quickly. Gimp provides the ability to display a grid, but no ability to add padding between cells. It also provides the ability to add guides. Guides are horizontal or vertical lines that you can snap to when selecting things (if desired – you can toggle that behavior on and off in the View menu) and which appear and are saved in an XCF file (Gimp’s native file format) but which don’t affect your PNG file (or whatever format you save textures as for importing into your game). Unfortunately, adding guides one-by-one gets old fast.

So to save myself five minutes of work the other day, I spent two and a half hours learning Scheme to the point where I could write a plugin to automatically add guides for me. Yes, I could have learned Python, but I know slightly more Scheme (a tiny bit) than Python (nothing beyond that it uses spacing to delineate code blocks) and the Scheme interpreter is bundled with Gimp such that nobody needs install anything extra to use a Scheme-based plugin.

Anyway, I created this plugin. You can download it here: http://www.bobtacoindustries.com/developers/utils/sprite-guides.scm provided you agree to the terms of the Microsoft Public License. To use it, you need to put it into Gimp’s scripts directory, which is normally “.gimp-2.6\scripts\” in your home directory (e.g. “C:\Users\username\” on Vista/7 or “C:\Documents and Settings\username\” on XP). If you’re using Vista or 7 you may have to unblock it.

You’ll then find when you start up Gimp and open an image, that in the “Image->Guides” menu there’s now an “Add Sprite Guides…” menu item. Click that (and find the window that pops up, often under the image windows) and you will be presented with a dialog window with four entries: Sprite Width; Sprite Width Padding; Sprite Height; and Sprite Height Padding. The default values are 64, 2, 64, and 2, respectively (you can change the defaults if you want by editing the .SCM file). Replace the values with the width of your sprite frame in pixels (e.g. 96), the height of your sprite frame in pixels (e.g. 128), and the padding you want between each sprite (I have 2 for width and height, but you can use any positive value and they do not need to be the same, e.g. you could have 3 for width and 5 for height if you wanted). Click “OK” and guides will be created for you starting at width, then width + padding then (width + padding) + width then… . Gimp already has a built-in “Remove All Guides” under “Image->Guides” so if you want to get rid of them (or swap them out for a different size), you can simply use that and they’re gone.

Anyway, I find them handy. Perhaps you will too! You’ll need to make sure to bake the padding in to calculating the positions of your source rectangles, but the math to do that is pretty easy.

n.b. The code itself is not pretty and would probably make a real Scheme developer shudder, but it works. I wound up learning more after I got it working such that I would write it differently (and more correctly) if I did it again, but I don’t have time to make a small piece of working code that’s not part of a larger project work more correctly. Still, Scheme was more enjoyable than I had remembered it being. The older I get, the more interesting functional programming becomes to me. Need to find some time to look at F# in more depth one of these days.

posted on Thursday, March 24, 2011 3:43 AM Print
Comments
Gravatar
# re: Sprite Padding Using Guides in Gimp
DarklightXNA
3/25/2011 12:53 AM
Very interesting, and I may end up using this - thanks.

But a quick question - why do you need to include padding? When you specify a source rectangle, you specify an exact rectangle of the spritesheet to display. Why would scaling the drawn sprite affect what gets included in the source rectangle?
Gravatar
# re: Sprite Padding Using Guides in Gimp
MikeBMcL
3/25/2011 3:16 AM
When using non-point texture filtering (e.g. when scaling in SpriteBatch or working inside a pixel shader), you can wind up sampling past the edge of your defined source rectange (UV coordinates in the case of a pixel shader). Have a look at http://blogs.msdn.com/b/shawnhar/archive/2009/10/21/texture-filtering-sprite-sheets.aspx and http://blogs.msdn.com/b/shawnhar/archive/2009/10/20/texture-filtering-the-edge-of-the-world.aspx. They explain it with more clarity than I likely could.

If you only ever use point filtering (point is the chunky, 8-bit style of texture filtering) or don't ever do any scaling or rotation then leaving padding isn't necessary. But taking the time to add some up front makes it easier to add scaling and/or rotation later on (e.g. if you want a character to grow large and rotate as though traveling through a vortex or start large and shrink down to normal size as though falling from the camera down to the earth).
Comments have been closed on this topic.
Bob Taco Industries is an ISV focused on game and app development for Microsoft platforms headed up by Michael B. McLaughlin. Mike is a Microsoft Visual C++ MVP (previously an XNA/DirectX MVP from 2011-2013), a developer, a writer, a consultant, and a retired lawyer. If you're a developer who is just getting started, consider checking out the BTI website's section for developers for links to code samples and other helpful sites.
Tag Cloud