MonoGame using Tiled tilemap

1

Several questions about using a Tiled tilemap in MonoGame. I know it’s not about monogame here, but when I asked it in the monogame forum , they said: ask in Tiled forum :smiley:

  • I’m trying to use monogame to draw the layers of a tiled tilemap.
    If I make different layers in a tiled map, where are they stored in the tmx file exactly?

For example if I make a collisions layer in the tmx file, would this be a good idea in order to check for those in my engine or is this not how you should implement collisions on a tiled map?

  • In addition I also wanted to ask how in a game engine should be read what type of the tileset is assigned to each tile.

  • Does anybody know how the relation between monogame and a loaded Tiled map is made?
    If I move my player, how do I know in what tile of the tilemap I am standing? (to know what actions I can do on that tile, for example if it’s grass I can put something down, if it’s water I will have to swim, …)

thanks in advance!

2

In the TMX file are a bunch of <layer>s, they contain the layer properties and data. You can read the details in the TMX file reference: TMX Map Format — Tiled 1.8.4 documentation

No matter which approach you use to implement collision in your game, unless your parser automates this for you, you will need to read the layers and store the collision data, like you said. In one of your other threads, you linked some code that does a simple version of this using a “Collisions” layer with a bunch of objects representing colliding areas and you’ve previously posted a map using that approach - I recommend you stick with this approach, since it sounds like one you understand well. The code you linked also shows you how to actually use that collision to restrict the player’s movement.

How to calculate where in the tile grid you are will depend on your game’s coordinate system. If it’s orthogonal and in pixels like the Monogame-RPG example you linked elsewhere, then tileX = floor(x / tileWidth), tileY = floor(y / tileHeight) is your tile position. Once you have tileX and tileY, you can access the tile from the layer. The exact way to do this will depend on the library you’re using, but nearly all of them have some way to get the tiles using either tileX and tileY, or using a single index (in which case, index = tileX + tileY*mapWidth). Once you have the tile, you’ll need to access its properties. This again depends on the exact library you’re using, so you’ll need to check the docs or community for that. TiledSharp looks like it will give you a tile ID, and you can use that to get the tile from the tileset, and then you can get its Properties and check them. In TiledCS, you’d do tile = tileset.tiles[index], and you can get its list of properties with tile.properties.

3

Hi

You write games yourself, right?
Your answers are super clear and to the point. I rarely see this on forums!
Thx a lot.

If it’s not asked too much, can you show me with a small drawing how tilex , tiley and index are found using orthographic map in pixels?
I don’t reallly understand where the calculation comes from.
I understand all library things I need to do but I never use things I don’t understand completely.

4

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.
image

If you have the location in pixels, that corresponds to the above like this:
image

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
tileX = x / tileWidth = 26/16 = 1.625
tileY = 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:
image

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 mapWidth.
Then to that, you add the tile’s x coordinate, that’s just how many tiles into the row it is.

So for 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.

5

Hi

Thanks a lot!
I understand everything now.
But why do developers make it harder by storing it in a 1 dimensional array?
I would never do that myself.

6

For performance. It avoids the memory and processing overhead of using a multi-dimensional array. It’s a small optimization, but these kinds of small optimizations can add up over the course of a large project like a game.

And for experienced programmers who are used to this sort of thing, it doesn’t feel any harder than using a two-dimensional array, and sometimes leads to shorter code that’s easier to write. For example, when iterating all tiles of a map, a 1D array needs just one simple loop, instead of a nested loop, and bounds-checking is simpler since there’s only one array’s length you need to worry about.