Donnerstag, 10. Juli 2014

Tile bleeding in LibGDX using the Tiled MapEditor

I'm currently developing my first bigger game in LibGDX using Maps made with Tiled and Box2D for physics.
It went pretty good so far, but I stumbled across a strange problem: There was some nasty tile bleeding in some areas of my game.
The first solution I found was to round the camera coordinates wich seemed to fix my problem at first, but then it happened again.
Then I found the real solution for this problem:
What you need to do is to add a so called gutter to your spritesheet. A gutter is padding between the single tiles but instead of just beeing transparent pixels the padding will be filled with the edge pixels of each tile.
You can do this with a nice little GIMP python script:
http://registry.gimp.org/node/26044

Once you have installed that script, load up your sheet file with GIMP and select "Add Gutter" from the Sprite Sheet submenu in the Filter menu.
You will see a window like this one:

Use a padding of 1, make sure to put the right tile size and enable the Generate Gutter option. When you hit OK it will do its magic and you have your sheet with padding in no time.
The next step is to add the Tileset to Tiled. Select Map>New Tileset. You will see a window like this:

The margin is the border of each tile that will be ignored for the mapping. Spacing is the distance between each tile in the image. It is important that you set the Margin to 1, to get rid of the 1 pixel border we just created around each tile with gimp. But notice: The spacing will be 2 because we have a one pixel border around each tile, and between two tiles are two borders (one from each tile) so you need to use a spacing of 2.
If your map has a transparency color be sure to set that to.

Now you are finished: You have your nice sheet in the Tiled editor and will not experience any tile bleeding while playing your game!

Have fun with this little hint!

Sources:
StackOverflow answer

5 Kommentare:

  1. Your guide helped me excellently! Thank you kindly for writing this.

    AntwortenLöschen
    Antworten
    1. No problem, took myself quite a while until I found the solution.

      Löschen
  2. Also I have to thank you for this post. That really helped me.
    Side note: I think you mixed up the image order ;)

    AntwortenLöschen
    Antworten
    1. Yes you are right, the two screenshots were indeed switched around. I fixed it now. Thanks for your feedback!

      Löschen
  3. We’ve been stumbling around the internet and found your blog along the way.

    We love your work! What a great corner of the internet :)



    this

    AntwortenLöschen