Avoiding pixel overlap between sprite frames

When working with sprites in Corona SDK I've quite often run into a problem with sprite sheet frames occasionally overlapping each other. When I say occasionally I mean that it doesn't happen for every new sprite I create even though the same sprite sheet is used, and it doesn't happen on all device resolutions. This is what it might look like when the overlap happens. Not pretty...

The sprite's image sheet

Sprites in action, pixel overlapping between frames

To work around this problem in the past, I've just padded my sprite images with a couple of transparent pixels so that the possible overlap won't be visible even though it might still be there. This has caused some additional work both to set up the sprite sheet images, as well as calculating the frames' positions within the sheet. So I figured I was gonna look for another solution to be able to create sprite sheets without padding that still look good.

Tough luck it turned out. The pixel overlap is apparently a well-known problem within game development, and the standard solution is to - you guessed it - pad the frames with transparent pixels. This thread in the Corona forums confirms it, and also contains an example for how to best calculate the padding size for supported device resolutions.

A tool called TexturePacker is also mentioned in the forum thread. I haven't tried it out myself but it looks like a really awesome tool if you have lots of sprites that you need to manage. Downside is that it's quite pricey. Somewhere around $100 (1 099 SEK in my local currency) for the basic version with lifetime updates, and even more if you need additional tools like PhysicsEditor or SpriteIlluminator. Not saying it's not worth the money, just not in my case where I only have a few sprite sheets to manage. There's a trial version available, so I'll probably check it out anyway just to get a feel for it.

Padding the image frames manually could be some really tedious and error-prone work, if it weren't for the incredible and free command line tool ImageMagick. I've used ImageMagick a lot through the years, and it's completely insane what you can accomplish with just a few commands.

What I wanna do is tile up a number of images, adding some padding between them. For example, tiling up four frames horizontally with a 2x transparent padding around each frame can be achieved using ImageMagick's montage tool like this:

montage frame-1.png frame-2.png frame-3.png frame-4.png -tile 4x1 -geometry +2+0 -background 'none' sprite-sheet.png

Simple as that! After creating the padded sheet all I need to do is to adjust the image sheet frames in my code accordingly, so that the padding isn't included in the actual sprites. I guess this could cause one column of pixels to disappear sometimes, but in my case that won't matter. I'd much rather have that than a visible column of pixels of the wrong color.

This is what the image sheet options would look like taking padding into consideration. All images being 64x64 pixels without the padding.

local options ={
    frames = {            
        {
            x=2,
            y=0,
            width=64,
            height=64,

        },
        {                    
            x=70,
            y=0,
            width=64,
            height=64,

        },
        {   
            x=138,
            y=0,
            width=64,
            height=64,

        },
        {   
            x=206,
            y=0,
            width=64,
            height=64,
        }
    },
    sheetContentWidth = 272,
    sheetContentHeight = 64
}

Note that the tiles created by montage tool are always of the same size, and by default the images are centered within the tiles. In case the image frames are of different size, it might be easier to calculate x/y positions if the images are aligned to the top left corner of the tiles. In that case, use the -gravity northwest option before specifying geometry, like this:

montage frame-1.png frame-2.png frame-3.png frame-4.png -tile 4x1 -gravity northwest -geometry +2+0 -background 'none' sprite-sheet.png