If you look up “tilemap coordinates” or look at some proper tutorials on 2D gamedev, you can probably find more detailed tutorials, so I’ll keep this pretty basic.
In Tiled and most (but not all!) game engines, coordinates start in the top left corner of the map/scene. This is where the coordinates are 0,0. As you go further to the right, the x position increases. As you go down, the y position increases.
If you have the location in pixels, that corresponds to the above like this:
Each tile is
tileWidth pixels in width, so if you divide your pixel x by
tileWidth, you get your x location in terms of tiles. Ditto for y and
tileHeight. So for example, if you have tiles that are 16x16 pixels, and your pixel coordinates are 26, 22, that means your tile coordinates are
x / tileWidth = 26/16 = 1.625
y / tileHeight = 22/16 = 1.375
So, you’re partway into tile 1,1, similar to the diagram above (coordinates for tiles also start at 0,0, so the top left tile has tile coordinates 0,0, and the one with the dot in it has tile coordinates 1,1).
For finding a tile though, it doesn’t matter where in the tile you are. That’s why you
floor these values, to get them to integers.
tileX = floor(1.625) = 1
tileY = floor(1.375) = 1
You can think of this as the point where the tile starts. These are the coordinates you need to get the tile from the array it’s stored in.
The index stuff is a little bit more complicated. It has to do with how the tiles are stored. If they were stored in a two-dimensional array, then you could get them like
layerTiles[tileX][tileY], without any extra calculations. But, in TMX files and in many game engines, tiles are instead stored as a one-dimensional array, just a list of tiles. The tiles are stored in a predictable order that you can usually find in the documentation for the engine or library, but typically it’s in this kind of order starting from the top left:
Let’s say you’re looking for tile 1,1, since that’s what we calculated in the example above. If you look at the diagram above, you can probably tell it’s going to be the tile with index
4, but how do we calculate that? Pretty simply :]
Every row has a fixed number of tiles in it. That’s the
mapWidth. This means that for every increase of the tile’s y coordinate by 1, the index goes up by
Then to that, you add the tile’s x coordinate, that’s just how many tiles into the row it is.
mapWidth 3 like in the diagram (because that map is 3 tiles wide), and the tile at 1,1, that’s
index = 1 * mapWidth + 1 = 1*3 + 1 = 4
How about the top left tile, 0,0?
index = 0 * mapWidth + 0 = 0 * 3 + 0 = 0
How about the left-most tile in the third row? That’s tile 0, 2 (remember, the coordinates start at 0, that’s why the third row has y = 2)
index = 2 * mapWidth + 0 = 2*3 + 0 = 6
Hopefully that helps! This isn’t Tiled-specific, by the way. Most games deal with tiles and similar 2D data in some way very similar to this, with small adjustments for engine and language quirks.