How do I correctly stack isometric TileMapLayers?

[rasalhage]

Godot Version

4.4.1

Question

I am trying to stack multiple isometric TileMapLayer nodes to create a complete isometric map. Here’s an example:

In this example:

• The leafy tiles and wheat tiles correctly overlap other tiles on their layer. (They are y-sorted.)
• Tiles on higher layers occlude tiles on lower layers.

That all works great. However, I would like tiles in lower layers to occlude tiles in higher layers if that higher-layer tile is in a “column” that is further back.

Here is my layer structure in the editor:

Here are the (seemingly) relevant settings for TileMapLayer2 node:

(Layer3 has a y-position of -16.0, and Layer has a y-position of 0.0)

Am I boned? Do I have to roll my own “TileMapColumn” node or do something hacky? Or is there some way to have these layers talk to one another and figure out which tiles “align” with which?

[hexgrid]

I think you may be in “roll your own” territory with this. I could be wrong, but I don’t think there’s a direct way to get multiple TileMapLayer nodes to interact like that.

If you want this to work with minimal custom code, I’d suggest maybe a 3D view with an isometric camera and use GridMap in place of TileMapLayer; that should get you proper depth-based occlusion.

[rasalhage]

Contrary to the poster above, there is a way:

To achieve this:

• The TileMapLayers must be attached to a node that also has CanvasItem.YSortEnabled turned on.
• Each TileMapLayer must have its Node2D.Transform.Position.y set increasingly negative. (I used steps of -8, -16, and so on)
• Each TileMapLayer must have its own Rendering.YSortOrigin set opposite of its y transform, to “negate” the y-movement.

The result looks like this in the inspector:

There’s one issue that can arise when you stack tiles directly on top of one another: The bottom layers “peek through” the layers above them, like so:

There’s no easy code solution around this. The solution is to make an “empty”, sides-only tile in your tileset, and use that tile exclusively for filling in lower layers:

I hope this helps any users who come along and get told “just abandon pixel art and make it 3D”!