Image sheet frames overlapping

Audio and Graphics
#1

I have an image sheet with four frames that I use for creating sprites. Each frame is 64px in both directions, making the full sheet 256 x 64 px. The sheet looks like this:

KLHXzeL.png

Sometimes when I use this for a sprite it seems like the frames are positioned slightly off within the sheet, so it looks like one frame is “stealing” one pixel column from another frame. Like this, where one pixel from the first frame floats over into the second frame:

OZ19mHn.png

The weird thing is that it doesn’t happen on all sprites, and only for some device resolutions. So I’m figuring it could possibly have something to do with how Corona handles scaling of image sheets to match the current resolution?

I’ve seen this problem several times before with my image sheets and have worked around it by leaving a 1px transparent margin around all my image frames. Anybody else noticed this behavior? Should I do something differently when creating and configuring my image sheets? 

The Lua config for my image sheet looks like this:

local options = { frames = { { x=0, y=0, width=64, height=64, }, { x=64, y=0, width=64, height=64, }, { x=128, y=0, width=64, height=64, }, { x=192, y=0, width=64, height=64, } }, sheetContentWidth = 256, sheetContentHeight = 64 }
#2

Nobody recognizes this problem? 

#3

You might want to try and searching for tile gaps. Here’s a string I searched on Goole and it brought up several forum topics:

corona sdk gap tiles

Rob

#4

Thanks for replying Rob. I did some more googling and actually found a thread explaining the problem here at the Corona forums: https://forums.coronalabs.com/topic/40647-sprite-sheet-best-practices-how-to-avoid-pixel-overlap-from-one-frame-to-another/

It seems to be a well-known problem, and not related to Corona SDK in particular. Suggested solution is to use gaps between the sprite frames, possibly using a tool like TexturePacker to handle it for you.

I handle this myself using the free command line tool ImageMagick since I don’t have a ton of sprites to manage.

For example, tiling up three frames horizontally with a 2x transparent padding between each frame can be achieved using ImageMagick’s montage tool like this:

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

Then I only need to adjust the image sheet frames in my code accordingly, so that the padding isn’t included in the actual sprites.

I wrote a more detailed blog post about it here: http://bitstopixels.blogspot.com/2016/11/avoiding-pixel-overlap-between-sprite.html

#5

Glad you found the solution.

Rob

#6

Nobody recognizes this problem? 

#7

You might want to try and searching for tile gaps. Here’s a string I searched on Goole and it brought up several forum topics:

corona sdk gap tiles

Rob

#8

Thanks for replying Rob. I did some more googling and actually found a thread explaining the problem here at the Corona forums: https://forums.coronalabs.com/topic/40647-sprite-sheet-best-practices-how-to-avoid-pixel-overlap-from-one-frame-to-another/

It seems to be a well-known problem, and not related to Corona SDK in particular. Suggested solution is to use gaps between the sprite frames, possibly using a tool like TexturePacker to handle it for you.

I handle this myself using the free command line tool ImageMagick since I don’t have a ton of sprites to manage.

For example, tiling up three frames horizontally with a 2x transparent padding between each frame can be achieved using ImageMagick’s montage tool like this:

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

Then I only need to adjust the image sheet frames in my code accordingly, so that the padding isn’t included in the actual sprites.

I wrote a more detailed blog post about it here: http://bitstopixels.blogspot.com/2016/11/avoiding-pixel-overlap-between-sprite.html

#9

Glad you found the solution.

Rob