Tilemap Align to Grid / tilewidth question?

I was viewing this Tiled tutorial , I downloaded the sample png tilemap and try loading it into Tiled.

The given tilemap does not align to 32x32 pixel …
The URL for the tilemap image : https://codepen.io/mikewesthad/pen/oyRjZz?editors=0010

image size is 816 x 1020, if I do my calculation, it is
816 / 32 = 25.5
1020 / 32 = 31.875

When I open the json file, I see the tilewidth is 32

  • tilewidth: 32
  • type: “map”
  • width: 40
  • height: 40

Medium Article : https://medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6

The tiles are 32x32, but have 1px padding around them where the edge pixels are doubled (this helps prevent rendering issues in some engines). When creating your tileset, set the tile size to 32x32, and set the margin to 1px, and it should work fine.

1 Like

Thanks for the pointers, after spacing of 1 didn’t work, I tried spacing of 2 and it aligned correctly…

Margin is what you need, not spacing. Spacing is space between tiles, margin is padding within tiles. Messing with the spacing will get your tiles the correct size, but misaligned within the actual tile square, you’ll be seeing part of the margin on one side and missing part of the tile on the other.

Now I am confused …

I still get mis-aligned with margin = 2

Whereas spacing = 2 is perfectly aligned…

Playing with the image myself, it looks like margins don’t do what I thought they do, and instead are a margin on the entire image. While setting the spacing to 2 will “work”, it does exhibit the issue I mentioned earlier - the left and top edges of each tile have the extruded pixels visible, and the bottom and right edges are cut off, so you will not be able to correctly preview your maps in Tiled.

@bjorn could you confirm whether the margin is meant to be around the whole image or around each tile? The documentation can be understood either way. If the margin setting is in fact working correctly, could we please get an option to have a margin within tiles as well, to handle tilesets with extruded edges, like the one in this thread?

Here’s a quick mockup showing what Margin and Spacing mean for Tiled:

The margin is actually only applied on the top/left sides (there doesn’t need to be equivalent space on the other sides). The spacing is the amount of pixels in between the tiles.

For a tileset where all tiles have been extruded by 1 pixel, you’ll usually end up with a 1 pixel margin and 2 pixels of spacing.

Ah, makes sense. I should’ve thought to combine the two, but I am a dumdum :'D

Would be nice to include a diagram similar to that one in the docs, since the wording’s a little unclear, and many people understand better with pictures :]

1 Like