1px space between tiles

Million Tile Engine
#1

Hello, I’m having a huge issue with MTE, as shown in the picture, there is a 1px space between tiles, sometimes horizontally, sometimes vertically, I just don’t know why. It happens when the camera starts to follow the player : for example, if I go to the left border of my map, the camera doesn’t follow him anymore (that’s normal) and the 1px space problem is not occurring. When I start to move right, the camera follows hims and a 1px space is created. Thanks you in advance for your answers.

PS : Just realized it only happens in the background tile layer, not in the “physics” one (grass platforms).

#2

Hello Ulydev5,

Edge artifacts are a common problem when using non-extruded tileset image sheets. They’re most common when the camera moves or on maps with a scale other than 1. This is a normal result of how Corona SDK (and most other frameworks) display images on the screen. When an image scales or moves by a fraction of a pixel Corona has to decide where that fractional pixel value should come from. Sometimes it chooses a pixel outside of the tile, causing a colored line along one of the edges. You can try a few things to fix it:

  1. You can extrude all your tiles and create a new tileset. This is the best solution because it addresses the cause of the problem directly, but it is also the most time consuming. A program such as TexturePacker can help you do this.

  2. Alternatively you can change the default texture filter from “linear” to “nearest” by making these calls when your app starts:

    display.setDefault(“magTextureFilter”, “nearest”) display.setDefault(“minTextureFilter”, “nearest”)

  3. Finally, you can use the overDraw parameter of mte.setCamera() to slightly increase the size of the tiles on the screen. This is the least ideal solution because it may only partially obscure the edge artifacts.

#3

Thanks you for your answer.

I already tried the second solution, it didn’t work.

The overdraw parameter worked, but it scales up my tiles and they look even uglier than they are.

So, I only had the first solution left. I extruded every tile of my tileset manually, because I prefer to do it myself rather than with Texture Packer for different reasons.

So, here’s what I basically did :

140410080114458332.png

Became :

140410080033671206.png

And I also changed the tileset properties in my map.tmx :

\<tileset firstgid="1" name="tileset" tilewidth="8" tileheight="8" margin="2" spacing="2"\> \<image source="../images/tileset/tileset.png" width="112" height="80"/\>

But I now get an error when I try to load the map :

Incorrect number of frames (w,h) = (8,8) with border (2) in texture (w,h) = (112,80). Failed after frame 55 out of 88.
#4

So far so good, the only snag here is that the simplified configuration format for image sheets doesn’t support margins larger than the number of pixels the tiles have been extruded. The margin you enter in Tiled should always be the number pixels the tile’s have been extruded (in your case, 1) and the spacing should always be twice that amount. You can solve the problem by reducing the width of your image to 110 (repositioning your tiles accordingly) and changing margin to 1 in your TMX file.

#5

Worked like a charm. Thanks you once again, Dyson !

#6

Hello Ulydev5,

Edge artifacts are a common problem when using non-extruded tileset image sheets. They’re most common when the camera moves or on maps with a scale other than 1. This is a normal result of how Corona SDK (and most other frameworks) display images on the screen. When an image scales or moves by a fraction of a pixel Corona has to decide where that fractional pixel value should come from. Sometimes it chooses a pixel outside of the tile, causing a colored line along one of the edges. You can try a few things to fix it:

  1. You can extrude all your tiles and create a new tileset. This is the best solution because it addresses the cause of the problem directly, but it is also the most time consuming. A program such as TexturePacker can help you do this.

  2. Alternatively you can change the default texture filter from “linear” to “nearest” by making these calls when your app starts:

    display.setDefault(“magTextureFilter”, “nearest”) display.setDefault(“minTextureFilter”, “nearest”)

  3. Finally, you can use the overDraw parameter of mte.setCamera() to slightly increase the size of the tiles on the screen. This is the least ideal solution because it may only partially obscure the edge artifacts.

#7

Thanks you for your answer.

I already tried the second solution, it didn’t work.

The overdraw parameter worked, but it scales up my tiles and they look even uglier than they are.

So, I only had the first solution left. I extruded every tile of my tileset manually, because I prefer to do it myself rather than with Texture Packer for different reasons.

So, here’s what I basically did :

140410080114458332.png

Became :

140410080033671206.png

And I also changed the tileset properties in my map.tmx :

\<tileset firstgid="1" name="tileset" tilewidth="8" tileheight="8" margin="2" spacing="2"\> \<image source="../images/tileset/tileset.png" width="112" height="80"/\>

But I now get an error when I try to load the map :

Incorrect number of frames (w,h) = (8,8) with border (2) in texture (w,h) = (112,80). Failed after frame 55 out of 88.
#8

So far so good, the only snag here is that the simplified configuration format for image sheets doesn’t support margins larger than the number of pixels the tiles have been extruded. The margin you enter in Tiled should always be the number pixels the tile’s have been extruded (in your case, 1) and the spacing should always be twice that amount. You can solve the problem by reducing the width of your image to 110 (repositioning your tiles accordingly) and changing margin to 1 in your TMX file.

#9

Worked like a charm. Thanks you once again, Dyson !