Hi, I load a spritesheet of square tiles and seams lines( black color ) are found in between each tiles. Seams line is not seen when I load using display.newImage().
Anyone have solutions for that?
A screenshot can be found in this link https://www.dropbox.com/s/rz5dtybk8nx8ijv/Screenshot_2013-01-03-20-53-02.jpg [import]uid: 181558 topic_id: 34510 reply_id: 334510[/import]
Hello @ilovepure91,
What is the size of each tile, in pixels? Do the lines appear in every Simulator view (iPhone, iPad, Retina iPad, etc.)? You say that the lines don’t appear with “display.newImage”, but they do appear using “display.newImageRect()”?
Thanks,
Brent [import]uid: 200026 topic_id: 34510 reply_id: 137238[/import]
Hello @Brent,
Tiles are 32 x 32 pixels size, on a 320 x 480 resolution. Lines will not appear when using display.newImageRect(). It is possible to use spritesheet and yet there is no lines in between? Using display.newImageRect() or display.newImage() actually waste memory. Especially when drawing multiple objects of the same image. [import]uid: 181558 topic_id: 34510 reply_id: 137334[/import]
Hi again,
Are you using dynamic scaling, as in, different image sheets for different devices (iPhone vs. iPad vs. Retina iPad, etc.)? In fact, if you’re using image sheets (which I recommend), you don’t need to use “newImageRect()” at all, since dynamic scaling is defined in the image sheet setup, whether you’re using it or not. “newImageRect()” is useful when you’re laying down a single image from a single file, and you have multiple resolutions of that image file optimized for different devices.
Brent [import]uid: 200026 topic_id: 34510 reply_id: 137391[/import]
I could be wrong but those look like artifact lines caused by the OpenGL interpolation method Corona uses. (Note that the lines aren’t 0,0,0 black and that the screenshot provided is much bigger than 320x480) This will happen regardless of using different sheets.
Since we don’t have nearest-neighbor support (yet…please :), the only way to fix it is this:
Expand your tilesheet so every tile has a 1px border around it. (That means 2px between each tile since each one gets a 1px border)
Copy the edge of each tile into the border. (so the last px on each side is now two wide or two tall) I believe TexturePacker can do this automatically provided you set it up right and own that tool.
When using graphics.newImageSheet() you need to set border=1 in options, so it knows not to look at the center of each tile. Tile size should match the original, while the sheet size should reflect the new size.
This process can definitely be a hassle but it does eliminate all edge artifacts from scaling. (If you want the inside of each tile not to look blurry, though, you’ll need to make @2x assets as well) [import]uid: 41884 topic_id: 34510 reply_id: 137394[/import]
Hello @ilovepure91,
What is the size of each tile, in pixels? Do the lines appear in every Simulator view (iPhone, iPad, Retina iPad, etc.)? You say that the lines don’t appear with “display.newImage”, but they do appear using “display.newImageRect()”?
Thanks,
Brent [import]uid: 200026 topic_id: 34510 reply_id: 137238[/import]
Hello @Brent,
Tiles are 32 x 32 pixels size, on a 320 x 480 resolution. Lines will not appear when using display.newImageRect(). It is possible to use spritesheet and yet there is no lines in between? Using display.newImageRect() or display.newImage() actually waste memory. Especially when drawing multiple objects of the same image. [import]uid: 181558 topic_id: 34510 reply_id: 137334[/import]
Hi again,
Are you using dynamic scaling, as in, different image sheets for different devices (iPhone vs. iPad vs. Retina iPad, etc.)? In fact, if you’re using image sheets (which I recommend), you don’t need to use “newImageRect()” at all, since dynamic scaling is defined in the image sheet setup, whether you’re using it or not. “newImageRect()” is useful when you’re laying down a single image from a single file, and you have multiple resolutions of that image file optimized for different devices.
Brent [import]uid: 200026 topic_id: 34510 reply_id: 137391[/import]
I could be wrong but those look like artifact lines caused by the OpenGL interpolation method Corona uses. (Note that the lines aren’t 0,0,0 black and that the screenshot provided is much bigger than 320x480) This will happen regardless of using different sheets.
Since we don’t have nearest-neighbor support (yet…please :), the only way to fix it is this:
Expand your tilesheet so every tile has a 1px border around it. (That means 2px between each tile since each one gets a 1px border)
Copy the edge of each tile into the border. (so the last px on each side is now two wide or two tall) I believe TexturePacker can do this automatically provided you set it up right and own that tool.
When using graphics.newImageSheet() you need to set border=1 in options, so it knows not to look at the center of each tile. Tile size should match the original, while the sheet size should reflect the new size.
This process can definitely be a hassle but it does eliminate all edge artifacts from scaling. (If you want the inside of each tile not to look blurry, though, you’ll need to make @2x assets as well) [import]uid: 41884 topic_id: 34510 reply_id: 137394[/import]
