Two (or more) overlay canvases in one scene.

I have currently two canvases - one is alive between scenes, and the other is scene-specific. Both of them is using Screen Space - Overlay.

What I want to achieve is to control which one have render priority over another.

There is something like that but for raycasts - GraphicRaycaster.priority, which works great even between root canvases.

 

Do you need both to be active at the same time? I guess not as they appear in different areas.

So add a CanvasGroup component to the base of each canvas.

As you transition between scenes set the Alpha to 0 and Interactable and Block Raycast to false for the menu you want to stop appearing/interacting, and Alpha to 255 and Interactable and Block Raycast to true for the one you want to become active.

It works for the two canvases I have for my game where I have a HUD canvas and a Menu canvas.

Not sure how you're handling the scene transition but this is how I'm setting it, The HUD canvas is set to display and the Menu is set not to display. I then have a bag button on the HUD to enter the menu and a script attached to that button.

That script holds two public CanvasGroup settings for HUDCanvas and MenuCanvas. I then click on the Bag icon and drag the two canvases into the relevant slot in the inspector.

Then, still on that button I've scrolled down to the OnClick area, clicked + then dragged the bag button from the Hierarchy to the Object area which should say "None (Object)". Once you've dragged the button on, you should be able to click the Function button to the right and select the function from the script attached to the button. So, for my script I created an OnClick function that gets called.

When the menu opens I've got a close menu button that has a script to do the opposite.

 

You can change the transform.position.z to control rendering priority. This has to be done via script since it can't be changed in the inspector. (Not even in debug mode...it's editable in that case, but always just reverts to 0.) Canvases with a lower z position are rendered on top of canvases with a higher z position.

--Eric

 

This is what I was looking for, Eric! Thank you!

 

seems like you can also change the sorting layer or order when in a different canvas mode and then change back and it works.

i suppose the fact that sorting is disabled in overlay is a bug?