I am working on a procedurally generated island that is made out of rectangle tiles and I have an issue I can’t fix.
In my simulator, everything is fine and the terrain looks normal. However, on my phone I always have lines that appear between my rectangles and it causes major distraction and is really ruining the experience.
I should mention that the terrain is moveable, but not zoomable.
What might be the cause of this problem?
Do you see these lines on static picture or while moving?
Try to round coordinates/values/xy/heights-widths to same integer values. Especially while moving your image
i.e. each frame do movement and (in «enterFrame» listener) round xy of near borders to put them on SAME INTEGER (whole) coord.
if your image is static try to round these coords while generating them. My english is poor but I think you can understand the idea.
As far as I understand it, this happens because of how Corona handles dynamic content scaling. Under certain circumstances it’s possible that the output is actually a decimal width/height, and of course a screen can’t colour half of a pixel in, so has to either round up or down. Unfortunately if the rounding is down you’re left with the possibility that the x/y of the next image is actually 1px further away than the right/bottom edge of that tile.
Because your gaps aren’t consistent, i.e. you’re not seeing a gap after every single row, my guess is that your anchor points are central (default) or at least, not top left. The mid point of a not quite perfectly sized image is again a decimal and is therefore going to round when output to screen. You’ll find that if you scroll around really, really slowly these gaps shift to different rows because of these rounds.
My advice would be to play around with math.floor and math.ceil when positioning your tiles, and/or use anchor points of 0,0. Or try scaling your images up by a tiny, tiny amount just to force those rounds to create a 1px overlap instead of a 1px gap. What actually works for you is subject to your code really.
Additionally, you might find that this helps at the cost of losing the anti-aliasing of resized images:
display.setDefault("magTextureFilter", "nearest") display.setDefault("minTextureFilter", "nearest")So far I have tried scaling (even by 10%), changing anchor to (0, 0), ceiling, flooring and nothing seems to work. It is frustrating because it works in the simulator and not on the device. I wish it was the other way around…
Make your tile image a bit bigger. It will overlay but it will be great. Increase the size of your texture of 1%.
Does not work. Looks like corona cuts off the edge pixel and I wish someone could know how to prevent cutting since it really ruines everything.
Did those minTextureFilter and magTextureFilter lines help at all? Place them at the top of your code and see how that runs.
Okay guys I have fixed it and the problem was surprisingly in sprites. What actually happened was that all my tiles were in a single sprite image and were all connected to each other (there was no empty space between tiles).
What happened is that sometimes a tile would take 1px line from adjacent tile in sprite image for some reason which creates those lines.
See picture for visual: http://prntscr.com/k8f9ty - The purple line is the line of pixels that the green tile would take from adjacent blue tile.
I fixed it by spacing my tiles (1 tile, 1 empty space, 1 tile) and I would color 1px around the tile in the color of that tile.
Like so: http://prntscr.com/k8fc5r
I hope this can help someone in the future and thank you all for your suggestions.
That’s what I thought the first time I read, the problem probably is the extrude.
Is there a way to fix this without having to space out tiles in a sprite?
I use texturepacker and I set extrude value to 0.
Check out https://docs.coronalabs.com/api/library/display/setDefault.html#texture-keys
This covers magTextureFilter and minTextureFilter which I referenced in my posts above, but also isImageSheetSampledInsideFrame which might be more what you’re looking for?
Yes! Setting “isImageSheetSampledInsideFrame” to true achieved exactly what I needed. Lines are gone and I can use the no spacing sprite format. Thank you so much!
Do you see these lines on static picture or while moving?
Try to round coordinates/values/xy/heights-widths to same integer values. Especially while moving your image
i.e. each frame do movement and (in «enterFrame» listener) round xy of near borders to put them on SAME INTEGER (whole) coord.
if your image is static try to round these coords while generating them. My english is poor but I think you can understand the idea.
As far as I understand it, this happens because of how Corona handles dynamic content scaling. Under certain circumstances it’s possible that the output is actually a decimal width/height, and of course a screen can’t colour half of a pixel in, so has to either round up or down. Unfortunately if the rounding is down you’re left with the possibility that the x/y of the next image is actually 1px further away than the right/bottom edge of that tile.
Because your gaps aren’t consistent, i.e. you’re not seeing a gap after every single row, my guess is that your anchor points are central (default) or at least, not top left. The mid point of a not quite perfectly sized image is again a decimal and is therefore going to round when output to screen. You’ll find that if you scroll around really, really slowly these gaps shift to different rows because of these rounds.
My advice would be to play around with math.floor and math.ceil when positioning your tiles, and/or use anchor points of 0,0. Or try scaling your images up by a tiny, tiny amount just to force those rounds to create a 1px overlap instead of a 1px gap. What actually works for you is subject to your code really.
Additionally, you might find that this helps at the cost of losing the anti-aliasing of resized images:
display.setDefault("magTextureFilter", "nearest") display.setDefault("minTextureFilter", "nearest")So far I have tried scaling (even by 10%), changing anchor to (0, 0), ceiling, flooring and nothing seems to work. It is frustrating because it works in the simulator and not on the device. I wish it was the other way around…
Make your tile image a bit bigger. It will overlay but it will be great. Increase the size of your texture of 1%.
Does not work. Looks like corona cuts off the edge pixel and I wish someone could know how to prevent cutting since it really ruines everything.
Did those minTextureFilter and magTextureFilter lines help at all? Place them at the top of your code and see how that runs.
Okay guys I have fixed it and the problem was surprisingly in sprites. What actually happened was that all my tiles were in a single sprite image and were all connected to each other (there was no empty space between tiles).
What happened is that sometimes a tile would take 1px line from adjacent tile in sprite image for some reason which creates those lines.
See picture for visual: http://prntscr.com/k8f9ty - The purple line is the line of pixels that the green tile would take from adjacent blue tile.
I fixed it by spacing my tiles (1 tile, 1 empty space, 1 tile) and I would color 1px around the tile in the color of that tile.
Like so: http://prntscr.com/k8fc5r
I hope this can help someone in the future and thank you all for your suggestions.