Imagesheet Tiles Bleeding Edges/flickering Border

I’m working on a game where I stitch together sprites from an ImageSheet (generated by TexturePacker).

 

It’s looks/works fine on the iPhone simulator, however when I switch to the iPad or any of the android simulators, I’m seeing a 1px flashing border around the images as they move. See the attached image.

 

Any ideas what I am doing wrong?

There is no way to fix this as its a byproduct of the image scaling on different screen ( im assuming, as there can be different causes )

Easy way to fix is to load a low res version of the whole level and place it behind the tile map. Though this would only work for a background layer.

The other fix is to overlap each tile by 1px, so adding 4px to each tile.

This can also happen if you are using a spritesheet, happens in browsers with CSS spritsheets as well. The trick there is to add extra pixels of colour 1px around each tile then when opengl scales those colours are taken into account and not any transparent pixels. This is to do with how images are scaled and probably wont help in your case, but might.

Here’s a thread that talks all about it:

http://forums.coronalabs.com/topic/8671-lines-between-my-tiles/

It’s in the Lime sub-topic, but it’s applicable to more than just Lime. That’s just where the conversation started. :slight_smile:

 Jay

There is no way to fix this as its a byproduct of the image scaling on different screen ( im assuming, as there can be different causes )

Easy way to fix is to load a low res version of the whole level and place it behind the tile map. Though this would only work for a background layer.

The other fix is to overlap each tile by 1px, so adding 4px to each tile.

This can also happen if you are using a spritesheet, happens in browsers with CSS spritsheets as well. The trick there is to add extra pixels of colour 1px around each tile then when opengl scales those colours are taken into account and not any transparent pixels. This is to do with how images are scaled and probably wont help in your case, but might.

Here’s a thread that talks all about it:

http://forums.coronalabs.com/topic/8671-lines-between-my-tiles/

It’s in the Lime sub-topic, but it’s applicable to more than just Lime. That’s just where the conversation started. :slight_smile:

 Jay

I just banged my head against this one for another project and the user “qtt” solved it for me. The tile sizes after they are scaled are a bit smaller than what you started with… Use this to find the actual scaledTileWidth & scaledTileHeight from your original tileWidth & tileHeight
 
[lua]
local pixelHeight = tileHeight/display.contentScaleY
local pixelWidth = tileWidth/display.contentScaleX
local scaledTileHeight = math.floor(pixelHeight)*display.contentScaleY
local scaledTileWidth = math.floor(pixelWidth)*display.contentScaleX
[/lua]

So now just make sure you are placing tiles scaledTileWidth & scaledTileHeight apart and the gaps will pretty much go away.

Thanks for the credit :wink:

BTW, it’s gtt not qtt :slight_smile:

Sorry about that…  ;)  It works pretty darn well. I have a few devices, including android, and I’m only seeing spacing on a small screen sizes, but that can be fixed by changing the scaling to GL_Nearest.

Hey no2games - have you tried running the default desert tilemap in Corona Tiled? I’m noticing lines appearing when moving the map on 0.6. Bizarrely there’s some areas that the lines disappear and others where they appear darker - I guess the “gap” is getting smaller and further to give this impression?

The lines only appear vertically and don’t appear to have the “fading” effect when tested on a device.

I just banged my head against this one for another project and the user “qtt” solved it for me. The tile sizes after they are scaled are a bit smaller than what you started with… Use this to find the actual scaledTileWidth & scaledTileHeight from your original tileWidth & tileHeight
 
[lua]
local pixelHeight = tileHeight/display.contentScaleY
local pixelWidth = tileWidth/display.contentScaleX
local scaledTileHeight = math.floor(pixelHeight)*display.contentScaleY
local scaledTileWidth = math.floor(pixelWidth)*display.contentScaleX
[/lua]

So now just make sure you are placing tiles scaledTileWidth & scaledTileHeight apart and the gaps will pretty much go away.

Thanks for the credit :wink:

BTW, it’s gtt not qtt :slight_smile:

Sorry about that…  ;)  It works pretty darn well. I have a few devices, including android, and I’m only seeing spacing on a small screen sizes, but that can be fixed by changing the scaling to GL_Nearest.

Hey no2games - have you tried running the default desert tilemap in Corona Tiled? I’m noticing lines appearing when moving the map on 0.6. Bizarrely there’s some areas that the lines disappear and others where they appear darker - I guess the “gap” is getting smaller and further to give this impression?

The lines only appear vertically and don’t appear to have the “fading” effect when tested on a device.