How to trim a sprite?

Question

I have a spritesheet:

var spriteSheet = new createjs.SpriteSheet({
    // ...
    frames: { width:520, height:600, regX: 260, regY:300 }
    // ...
});

I am computing it's physics body as follows:

var bounds = entity.sprite.getTransformedBounds();
halfWidth = bounds.width / 2,
halfHeight = bounds.height / 2,
// ... Create the physics body

The result:

The ground is a solid body, and the sprite is dynamic. I would like the sprite's feet to touch the actual ground and get rid of the whitespace around the sprite (above, below and sides).

The problem is that there is whitespace in the spritesheet. Each frame is 520x600 in the sheet. I have lots of frames and I would rather not go through each of them to figure out each one's exact dimensions.

Is this possible? Also I'm new to game dev, it's very fun. Is this what applications like TexturePacker are for?

Answer 1

Yes - you can use the Marching Squares algorithm to detect the bounds of the image within the frame, and then I would suggest storing the actual bounds (height/width) somewhere. Particularly if your sprites contain islands, as this can take a long time to locate all the little pieces in the frame.

Ideally, you would repack your spritesheets into an atlas so that you aren't wasting so much space on unused pixels and don't need to switch texture sources as much, but that is more relevant to hardware acceleration and probably premature optimization for small projects.