- Home /
How can I make sure an UI element is rendered on top of the others if my game has multi scene hierarchy?
In my game hierarchy, there are multiple scenes configured roughly like this
Scene 1
Canvas
Image 1
Panel A
Image 2
Image 3
Image 4
Panel B
GridLayout A
Scene 2
Canvas
Image 5
Image 6
Panel C
Image 7
Grid Layout B
Panel D
I understand the UI rendering order in single scene setup, but not in multi scene setup like this. Currently what I want to achieve is Panel D
in Scene 2
to be rendered on top over any other UI elements, including UI elements in Scene 1
. When the game is running, Panel D
in already rendered on top over other UI elements in Scene 2
, but I don't know how to make Panel D
is rendered on top over other UI elements in Scene 1
. Sometimes it's rendered behind GridLayout A, or Image 4, or Panel B, ...
Is there any simple way to make this possible? Or is it not supported / limited by Unity because of this statement?
My game doesn't have any sprites game object, all sprites are only being used in UI Image game object. All I have in my game is either empty game object or UI game object. All canvas render mode is set to Screen Space - Overlay. I've tried changing order of the scenes, changing order of the hierarchy, changing order of scene build index, googling around (but majority the question is about multi camera/ single scene setup; what I got is multi scene setup with single camera, I don't think I found any closely related to this), but what I got is more confusion. Please help, I will greatly appreciate it.Cross-Scene references are not supported, and are prevented in Edit mode. In Play mode they are allowed, because Scenes cannot be saved.
Extra note: I created this multi scene setup in order to achieve kind of "swappability" feature in my game. Please, don't advice me to flatten the multi scene setup.
You could move it in the hierarchy at runtime using SetSiblingIndex like this.
public class Top$$anonymous$$over : $$anonymous$$onoBehaviour
{
public GameObject AlwaysOnTop;
void OnEnable()
{
AlwaysOnTop.transform.SetSiblingIndex(transform.childCount - 1);
}
}
Just an idea.
@RobAnthem Thanks for your help, but I've tried it and unfortunately it doesn't work. It still has the same effect if I manually set Panel D as the last UI gameObject in Editor. Panel D is still displayed behind some UI gameobjects from scene 1. I think I'm starting to regret using multi scene setup for my current project...
Answer by HarshadK · May 15, 2017 at 10:26 AM
The hierarchy based draw order works for UI elements within the current scene only so setting a UI element as last child in a Canvas will render it over all UI elements from that canvas. Similarly you can draw elements from one canvas over another by setting the hierarchy order of canvases. But it works within same scene too.
To get the desired effect of having one element drawn over all other elements from other scene you can set the Sorting Order of the canvas. This will allow you to render a canvas over other canvases (even from other loaded scenes). So in your case setting the Sort Order of your canvas from scene 1 to 0 and Sort order of canvas from scene 2 to 1 will draw the canvas from scene 2 over the canvas from scene 1. Then you can set your Panel D to be last sibling in canvas from scene 2 to render it as the top most.
Simplified:
Add Canvas component to your objects and set same Additional Shader Chanels to be same as ur parent canvas. Then check Override sorting and use Sort order as your sorting value.
Note that if you want to use UI raycasts (buttons etc.), also add Graphics Raycaster component.