How can I get depth sorting right in this scene (image inside)?

In the image I’m using two layers. I’d like to have the candle appear exactly where it is in that picture.

I placed it at column 5, row 3 on layer 2 and use a vertical layer offset of -50 of the 2nd layer.

The problem is the pillar which is supposed to be in front of the candle. The pillar is one single tile and located at 6|5 on the first layer and it does not hide the candle. It would if I placed it on the second layer; but the pillar’s base is then no longer aligned with the floor tiles.

What’s the correct way of solving this?

Unfortunately this isn’t easily solved right now because Tiled renders the map layer by layer. So one layer will always be either fully above or fully below another layer.

Two approaches would work in the current version of Tiled based on modifying your graphics:

  1. Ensure that you can place the column and the candle in the same layer, which would resolve the render order issues. Instead of changing the graphics, this could also be achieved by using the tileset tile offset attribute to shift the candle up.

  2. Split the column in pieces, which can then be placed in different layers at various height offsets. This way, you can place the parts of the column that should be above the candle in layers above it.

In general though, the most ideal way to solve this would be to implement the following feature in Tiled:

I’m loading the TMX files in my own isometric engine which does exactly that: render all as one. I start with column 0, row 0 and then render it for every layer (bottom to top) before moving to the next column/row. This fixes the problem but leads to sorting issues in other scenarios. Maybe drawing the layers top to bottom helps? Nobody said it would be easy :slight_smile:

Ok…just thought, I’d share this. Here are two images. The first one shows how Tiled renders the scene (all the candles, books, flags and ice blocks are on a second layer with a Y offset of -65 and the horizontal bricks across the two columns in the back are on a third layer with a Y offset of -256; the rest - including the higher walls are all on the base layer). Because of how layers are treated individually, the walls don’t hide the objects correctly.

In my game engine I use a z-index to sort things correctly and the result is as below: all perfect. Right now, I just live with the limitations of Tiled and preview the result in my engine. Tiled is still giving me a lot of support.

1 Like

Thanks for sharing! Indeed it’s not ideal, and I hope eventually Tiled will support this use-case as well. I’m glad that the editor is useful to you in the meantime!

I’m working through this problem also right now actually. Basically I keep layers which are “levels” of height on the z-axis then merge and offset them when loaded into the map (I need to keep custom properties for layers also). Sorting is done using quad trees based on isometric coordinates (for viewport culling) then building a dependency graph on chunks of the viewport and finally sorting using a topographical sort. It’s WAY more complicated then I thought it would to sort isometric tiles properly.

In tiled there’s just no way to make things look right because tiles that are higher than 1x1 will be overlapped by higher layers. Like was mentioned in the other posts Tiled needs a way to “merge and offset” layers during drawing for proper isometric maps that use height. Having a standard way to reference tiles by z axis would be nice also .

This is what I’m looking for from Tiled, atm I’m using hundreds of layers just to portray the tiles properly.
Has anyone found a solution in tiled other than creating x^10 layers ?