How can I handle sprite sheets with nonuniform sprite dimensions?

Question

For a spritesheet with non-uniform sprite dimensions, how can I get the bounding-rectangles for each individual sprite (i.e. the blue boxes in the following image / I only drew a few examples)?

What I would like to determine are: offset_x, offset_y, width, height

So far, I have only used spritesheets on which all sprites have identical dimensions. In that case, one simply needs to specify the x- and y-offset to get a particular sprite. However, for spritesheets of non-uniform dimensions this doesn't work.

EDIT: Having read through the comments and answers, I rephrased my question to make it more inclusive wrt. the actual process of using a spritesheet in a game. Previously, the question contained the points why people produce spritesheets of non-uniform dimensions and how I can deal with that.

Answer 1

Most sprite sheets of non-identical dimensions usually have some kind of meta data with where the anchor of the sprite is. There are a lot of tools that do things like strip out full alpha pixels and give you the data you need so that this data isn't manually generated.

If you don't have this meta data you have to author it yourself. The most accurate way is the one you said in your question, which is to just do it by hand. It may take a while, but it's probably faster than making new sprites.

Answer 2

You can perform analysis on the image to locate the bounding rectangles of each sprite, sort those bounding rectangles (perhaps by increasing minimum X, then Y) and you'll have a set of bounding regions that correspond to the frames of the sprite sheet.

Because this process can be relatively expensive, you will probably want to do this offline, for example as part of the build process for your game. You can then serialize the bounding region information into a file that you store with the corresponding sprite sheet image. At runtime you load both the image and the boundary definition file and you have the information you need to access each individual sprite.

That is easier said than done, though. Essentially you'll want to do feature detection and specifically blob detection which are machine vision problems. You could also threshold the image (to black and white) and use an edge detection technique. The relevant math behind those techniques is explained far better on those links than I could, and in the case where you don't feel up to implementing that math yourself, there are a few libraries available that can assist you. The following set of links seemed the most promising to me:

• AForge has a machine vision component (for C#); here's a relevant usage example
• OpenCV (a C++ library with a C# wrapper)
• This thread provides a blob detection library for the C# wrapper for OpenCV.

Answer 3

I made my own tool for that kind of non-uniform spritesheet. It allows editing offsets, et cetera. Here's a screenshot to give you an idea:

Answer 4

Check out texturepacker

http://www.texturepacker.com/

It outputs a file like this (depending on your preffered settings)

    {
    "filename": "image_front_1",
    "frame": {"x":1,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":2,"w":36,"h":40},
    "sourceSize": {"w":36,"h":40}
},
{
    "filename": "image_front_2.png",
    "frame": {"x":36,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":36,"h":42},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_3.png",
    "frame": {"x":71,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_4.png",
    "frame": {"x":106,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
}

Using this data, you can easily grab the seperate rectangles from the image.

Answer 5

spritebuddy.com has worked great for me. Couldn't find any help on the site itself, but this Google Groups post explains it really well. It auto-guesses the bounds for your sprites, lets you adjust it, AND lets you arrange them into animation sequences. Then it spits out a metadata file for all this in either JSON or XML. Then all you have to do is parse that data file in your game to get the correct bounding rectangles.