Image Sheet problem across different devices

Audio and Graphics
#1

Hello,

I’m in the process of making a simple puzzle game which is played on a tile board. Each tile is simply a frame taken from an image sheet. The problem is that the tile is not cropped properly from the image sheet. But here’s the twist: the result is a bit different across the different devices which can be simulated in Corona. Here’s a simple image I made to showcase this:

EC3B0l4.png

The desired result is what is displayed on the iphone4. Here’s what the imageSheet looks like:

8wsXsXb.png

So the yellow bits around each tile seems to come from a problem with the cropping. The code doesn’t change though. Here is the code for the imageSheet:

local tileOptions = { -- The params below are required width = 64, height = 64, numFrames = 40, -- The params below are optional; used for dynamic resolution support sheetContentWidth = 640, -- width of original 1x size of entire sheet sheetContentHeight = 640 -- height of original 1x size of entire sheet } local tileSheet = graphics.newImageSheet( "tiletest.png", tileOptions )

and here’s the code that creates the scene:

local group = self.view local background = display.newImageRect("background.png",320,480) background.x = 160; background.y = 240 group:insert(background) tileSizeX = 50 tileSizeY = 50 --A layer of tiles --frame #12 is the black square display1 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display2 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display3 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display4 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display5 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display6 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display7 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display8 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display9 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display1.x = 64 display1.y = 64 display2.x = 64 + tileSizeX display2.y = 64 display3.x = 64 + tileSizeX + tileSizeX display3.y = 64 display4.x = 64 display4.y = 64 + tileSizeY display5.x = 64 + tileSizeX display5.y = 64 + tileSizeY display6.x = 64 + tileSizeX + tileSizeX display6.y = 64 + tileSizeY display7.x = 64 display7.y = 64 + tileSizeY + tileSizeY display8.x = 64 + tileSizeX display8.y = 64 + tileSizeX + tileSizeX display9.x = 64 + tileSizeX + tileSizeX display9.y = 64 + tileSizeY + tileSizeY --Stacking another layer of tiles display10 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display20 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display30 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display40 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display50 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display60 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display70 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display80 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display90 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display10.x = 64 display10.y = 64 display20.x = 64 + tileSizeX display20.y = 64 display30.x = 64 + tileSizeX + tileSizeX display30.y = 64 display40.x = 64 display40.y = 64 + tileSizeY display50.x = 64 + tileSizeX display50.y = 64 + tileSizeY display60.x = 64 + tileSizeX + tileSizeX display60.y = 64 + tileSizeY display70.x = 64 display70.y = 64 + tileSizeY + tileSizeY display80.x = 64 + tileSizeX display80.y = 64 + tileSizeX + tileSizeX display90.x = 64 + tileSizeX + tileSizeX display90.y = 64 + tileSizeY + tileSizeY --And a third one display100 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display200 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display300 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display400 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display500 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display600 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display700 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display800 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display900 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display100.x = 64 display100.y = 64 display200.x = 64 + tileSizeX display200.y = 64 display300.x = 64 + tileSizeX + tileSizeX display300.y = 64 display400.x = 64 display400.y = 64 + tileSizeY display500.x = 64 + tileSizeX display500.y = 64 + tileSizeY display600.x = 64 + tileSizeX + tileSizeX display600.y = 64 + tileSizeY display700.x = 64 display700.y = 64 + tileSizeY + tileSizeY display800.x = 64 + tileSizeX display800.y = 64 + tileSizeX + tileSizeX display900.x = 64 + tileSizeX + tileSizeX display900.y = 64 + tileSizeY + tileSizeY --Single tile by itself display1337 = display.newImageRect( tileSheet, 12, tileSizeX, tileSizeY ) display1337.x = 200 display1337.y = 300

Any insight or solution would be greatly appreciated!

Thank you.

I have attached all the files (in a zip file) you need to test it yourself.

#2

Hi @travaildereligion,

If I understand the issue, you want NO yellow “trim” lines to appear on other devices? When dealing with image sheets and scaling, it’s normal to get some kind of bleed if you have image regions touching right up against each other on the image sheet. The solution is to pad your image (on the sheet) with a few pixels of transparent space all around.

Hope this helps,

Brent Sorrentino

#3

Hi Brent,

I just tried putting 10 transparent pixels around each image in the image sheet but keeping the spacing between tiles as if they were still 64 by 64 and everything works perfectly !

Thank you for the reply !

#4

Yep, basically that’s it. :slight_smile: I would suggest 2-4 pixels of padding though, just to be “safe”… and then specify your image as 68x68 or whatever (not 64x64).

Brent

#5

Hi @travaildereligion,

If I understand the issue, you want NO yellow “trim” lines to appear on other devices? When dealing with image sheets and scaling, it’s normal to get some kind of bleed if you have image regions touching right up against each other on the image sheet. The solution is to pad your image (on the sheet) with a few pixels of transparent space all around.

Hope this helps,

Brent Sorrentino

#6

Hi Brent,

I just tried putting 10 transparent pixels around each image in the image sheet but keeping the spacing between tiles as if they were still 64 by 64 and everything works perfectly !

Thank you for the reply !

#7

Yep, basically that’s it. :slight_smile: I would suggest 2-4 pixels of padding though, just to be “safe”… and then specify your image as 68x68 or whatever (not 64x64).

Brent