Easy way to find sprite position

Question

When making HTML5 games, we can animate by using a single file with lots of images on it (I think this is called a sprite image?) instead of sending multiple images in multiple files. We erase the image in canvas and redraw it, changing the position of the sprite file, thus changing the image and giving the animation effect.

My question is, how can we quickly find the pixel position to redraw the image and draw the part of the sprite file we want? Because we need to pinpoint the exact position, down to a single pixel accuracy. How can we do that without a lot of trial and error?

You can use Firebug - it lets you adjust the positioning of the background easily. Or you could create an .mp4. The other approach would be to choose a set width and creating a series of images that could be appended to each other and repositioned using the chosen width. — user2182349, Aug 28 '15 at 03:07
What do you mean create an .mp4? Then open the spritesheet on browser and using firebug to find the position for each image in the sprite? I see... not too automated but I guess people in general either do that way or build a small tool to determine the pixel position from each individual sprite right Thanks — badso, Aug 28 '15 at 03:10
Use an .mp4 to create a video instead of trying to use sprites to simulate animation. — user2182349, Aug 28 '15 at 03:11
Didn't know we could do that - use mp4 to animate a game Wouldn't the mp4 file be bigger than the sprite file? — badso, Aug 28 '15 at 03:12
Are you trying to position sprites on your own new spritesheet or are you trying to figure out the positions of sprites on an existing spritesheet? — markE, Aug 28 '15 at 06:11
I'm trying to figure out on existing spritesheet... But this it matter if its an existing one or if i'm creating a new one? — badso, Aug 28 '15 at 06:12
@Vic, Yep, it matters :-). If you are creating a new spritesheet, you already know all sprite sizes and just need to efficiently place each sprite on the spritesheet. If you are examining an existing spritesheet you must discover the bounding boxes of each existing sprite. — markE, Aug 28 '15 at 06:26

score 1 · Accepted Answer · edited May 23 '17 at 11:44

The exact [left,top] positions of every individual sprite on a spritesheet are always fully known by it's creator. That really is the essential property of a spritesheet.

If you have the creator's code, you might examine the code to get the positions of the individual sprites.

If you don't have the creator's mapping coordinates and the sprites appear to be arranged in a grid pattern (rows & columns), you can often correctly guess the mappings like this:

var spriteWidth = spriteSheetWidth / spriteCountPerRow;
var spriteHeight = spriteSheetHeight / spriteCountPerColumn;

Many spritesheets are not arranged in a grid pattern, but rather are arranged to allow as many sprites as possible to exist in as small an image size as possible.

If you just have the spritesheet without code, then you can find the bounding box of each sprite by using edge detection. Here's an outline of how to do it:

Use context.getImageData to get the RGBA information of all pixels on the canvas.
Start at the top-left of the canvas and find the first pixel that is not the background color. This will be one pixel of an individual sprite.
Use the "Marching Squares" algorithm to find the [x,y] of all the pixels around the border of that sprite. Here's a previous Stackoverflow post showing how to implement Marching Squares: Draw border around nontransparent part of image on canvas

Scan the [x,y] in step#3 to find the bounding box of the sprite.

The minimum x will be the leftmost coordinate of the bounding box.
The minimum y will be the topmost coordinate of the bounding box.
The maximuinimum x will be the leftmost coordinate of the bounding box.
The minimum y will be the topmost coordinate of the bounding box.

We're done with the discovered sprite, so erase the bounding box of the discovered sprite.
Go back to step#1 to find the next sprite.

Easy way to find sprite position

1 Answers1