Adding padding to existing tilemap?

Questions
1

Hi everyone!

I am in the process of making a game, at which point I recognized bleeding happening with the tiles. It looks like the solution to fixing the bleeding is adding padding. Currently I have 30 maps made with this tileset so I do not want to remake all of the maps.

So:

  1. I used a gimp python script to add 1 pixel of padding to all of the tiles. (Resizes from 256 width to 288 width)
  2. I edited all of the .tmx files to add spacing=“2” margin=“1” to my tags.
  3. Load up the tiled map editor, and all of the tile ids for all the maps I load are off by 2 for every row (sometimes off by more) they are down in my tilemap. (Example: a tile on the second row has an ID of 21, on my maps those squares now have ID 23)

Is there something silly I am missing or does Tiled not handle adding margin and spacing to an existing tileset?

2

Apart from adjusting the spacing and margin attributes, did you also remember to adjust the width and height properties on the image element? If you don’t update the width, then Tiled thinks your image changed size because it was extended with more tiles, and will adjust the tile indexes accordingly. This would mess things up in your case.

3

Oh my gosh can’t believe I missed that. Adjusting the width and height fixes my issue. I wrote a program to decode and decrypt, adjust the indices then encrypt and encode them back into the tmx file haha. I couldnt quite get the index transformation correct though.

It is always something small.

Thanks for the prompt help!

4

I’m trying to do the same (adding padding to an existing tilemap), but I can’t figure out the margin,spacing,width and height values to make it work.
I’m working on a 16x16 grid with tiles of the same size, and I want to set a 1 pixel padding, any help?

5

Dug up the code that fixed it. Notice I had to add the spacing and margin attributes, and updated width and height to match the newly padded tileset png.

Old Tileset:

<tileset firstgid=“577” name=“exteriortiles” tilewidth=“16” tileheight=“16”>
<image source=“…/tilemaps/exteriortiles.png” width=“256” height=“384”/>

Fixed Tileset

<tileset firstgid=“577” name=“exteriortiles” tilewidth=“16” tileheight=“16” spacing=“2” margin=“1”>
<image source=“…/tilemaps/exteriortiles.png” width=“288” height=“432”/>

6

I tried that, but when opening the tilemap Tiled tells me that the number of tiles changed from 64 o 56… so it didn’t work. These are my lines:

OLD

<tileset firstgid="1" name="cavetileset" tilewidth="16" tileheight="16" tilecount=“4096" columns="64" >
<image source="cavetileset.png" trans="ff00ff" width="1024" height=“1024"/>

NEW

<tileset firstgid=“1” name=“cavetileset” tilewidth=“16” tileheight=“16” tilecount=“4096” columns=“64” spacing=“2” margin=“1">
<image source=“cavetileset.png” trans=“ff00ff” width=“1152” height=“1152"/>

7

Not sure why it would do that, looks like the only diff between yours and mine is the tilecount and columns attribute. Good luck!

1 Like
8

Note that apart from adjusting those parameters in the tileset definition, you also need to adjust the actual tileset image. Given that Tiled only found 56 columns, it indicates that the cavetileset.png image was still only 1024px wide:

(1024 - 1 + 2) / (16 + 2) = 56 (56.944444444444...)