What determines canvas render order?

UI UGUI
1

When you have more than one Canvas in the scene, what determines which ones get drawn first?

I am specifically referring to the Screen Space - Overlay mode, the other ones seem obvious.

2

The draw order is determine by the z position for Screen Space - Overlay canvas’s. I might try and change this to be hierarchy as well, i’d just need to find reliable data to do so.

1 Like
3

If the Z positions are equal, then sorting by transform order is sensible, but if they aren’t please don’t. I can think of no scenario where I would want one UI element to be drawn behind another when its position is in front - it’ll only confuse newbies and irritate everyone else.

4

Hmm, I’m having trouble modifying the z position. For one, it’s grayed out in the inspector (driven by Canvas). When I move the z position in the Scene view it has no effect on the draw order. Am I missing something?

5

So that’d be a bug :(. Either way we are working on unifying the sorting methodology so we dont have multiple ways of changing the order. This will come in a later beta.

2 Likes
6

You can create another camera in the scene and put its depth at an integer above the other camera.

create a new Layer (inspector > top right) > name it “UI2”
create new cam > name it CamUI2
set CamUI2’s depth great than the other Camera’s depth
Set CamUI2’s Culling mask: “UI2”
go to other camera > Culling mask: everything but UI2
go to the canvas you wanna render on top >
make sure the layer of that canvas (top right of inspector) of it and its children are set to “UI2”
drag the CamUI2 camera into the render camera parameter on the UI2 canvas.

7

So is @alti the only solution, using 2 cameras? Seems like it should be easier than that…

8

@callen since I got roped into this too, let me explain how to fix the problem, as of the new Unity version.

Canvas 0 - Screen Space Overlay.
Sorting Layer = 1
Canvas 1 - Screen Space Overlay
Sorting Layer = 0

Now your canvas will sort based on this, and your Menu (Canvas 0) since its sorting layer is higher, as above solution will render on top of the game (Canvas 1)

7 Likes
9

Thanks for this

10

Hello, if the Sorting Layer is the same for 2 canvas, how do I know which one will be in front ?

11

You don’t. The order is undefined, so it won’t be predictable.
More than likely it will be based on the order of the transforms in the hierarchy, but you should NOT rely on that if the layering of the canvases matters.

12

If the Sorting Layer is the same And the sorting order is the same then its not defined its done by first instantiation which could change depending on how your scene is set up.

1 Like
13

I I’ve sent hours trying to solve my issue reading using two Canvas where one was the game screen and the other was a pause menu. It worked but in game mode it didn’t and only played the game screen buttons but the the pause menu. Thank you so much! I prayed and then I seen this ! lol. I’m currently doing a project that’s 50% of my grade.