Bark bubble issue with isometric Tilemap

[bakelly]

I’m having trouble with the Bark bubbles and isometric tilemaps. I’m new to this library and kinda new to Unity so I’m probably just doing something wrong.

My game is a 2D game that uses an isometric tilemap (ordinary isometric Tilemap, not Z-as-Y).

To reproduce my situation:

• Add an isometric tilemap to a scene with “Order in layer” = 0 and paint some tiles on it
  NOTE: This is a normal isometric Tilemap, not the Z-as-Y variety.
• Add a red 2D box sprite with "order in layer" = 1 to be on top of the tiles
• set the red box up with a bubble style bark on it with a long duration
• add a green box sprite with order in layer=1
• run the scene and move the sprites around to see how the bark renders in different locations

When I trigger the bark, the bark is sometimes on top of the tiles, sometimes below, and even sometimes above some and below others. The bark even ends up below sprites at the same layer at times. I Only seem to get this problem when an isometric Tilemap is present in the scene. It may have something to do with the way isometric tilemap sorting works by using the center of the tiles and sprites to determine sorting order as per https://blogs.unity3d.com/2019/03/18/is ... h-tilemap/

Here’s an example of the results I’m getting:

Screen Shot 2020-01-29 at 1.31.55 AM.png (24.93 KiB) Viewed 280 times

Note that:

• The red box is my actor, the green box is just another 2d sprite in the same layer
• The green and red sprites are both at Order in layer = 1, while the Tilemap is at 0

Notice, in addition to the oddness of the tiles sorting above the bark, the green sprite is also now below the bark (weird!). without the isometric Tilemap, the green is below the bark as it should be.

I seem to be able to work around the issue by increasing the “Order in layer” for the “Bubble Template Standard Bark UI(Clone)” object instantiated under my Actor Sprite object, but this does not seem like an appropriate thing to do.

What might I be doing wrong?

[Tony Li]

Hi,

If you're using Unity's Tilemap system, that's the way layering works for isometric tilemaps. Imagine that the green box and those lower gray cubes are trees. If the bark UI were a person, it would be standing behind the trees. However, you generally want UIs to ignore this behavior. Changing "Order In Layer" is an appropriate way to ensure that the bark UI is drawn on top of all isometric tiles.

Another common approach is to use 2 cameras. Set your bark UI to the "UI" layer if it's not already set. (It may be set to "Default". If your project doesn't have a "UI" layer, you can add one.)

Add a second camera named "UI Camera" with the same settings as your main camera.

• Make it a child of your main camera, and put it in the same position as your main camera (e.g., position 0,0,0; rotation 0,0,0; scale 1,1,1).
• Set Clear Flags to Depth Only.
• Set Depth to a higher value than the main camera.
• Open the Culling Mask dropdown and set it so only the UI layer is ticked.

On your main camera, open the Culling Mask dropdown and UNtick the UI layer.

When updating the screen, Unity will draw everything visible by the main camera first (that is, everything except objects on the UI layer). Then the UI camera will draw everything in the UI layer on top of that. This guarantees that UIs will be drawn on top of gameplay elements such as tilemaps. Another benefit is that you can apply special effects (such as lighting or bloom) to the main camera, and they won't affect the UI's appearance. (Bloom is a big one, as it tends to blur things, which you don't want for UIs.)

[bakelly]

Thanks for the info - I was kind of hoping I was just missing some checkbox in the Dialog manager

I think I'll stick with simply adjusting the order in layer for the bark canvas instance for now.

Thanks again.

[Tony Li]

Happy to help.