Search code examples
unity-game-engineunity-ui

How do you sort UI elements in Canvas?


I don't get how you sort UI elements Z-index in Unity inside a Canvas, is it by hierarchy order ? I'm trying to do a settings screen like in this video: https://www.youtube.com/watch?v=-qNo1jloR_k

It's quite simple, you click on the button and it set the whole panel as first sibling in the hierarchy.

But this is what I get: https://gyazo.com/cec14f21df2ded191875e6a8cfd9f124

Also, my gameplay panel had a red background, my graphics panel a green one, and my sound panel a yellow one.

I could avoid this problem by changing alpha on panels, but would like to make it work with z sorting... that I can't seem to understand on Unity.

Using unity 2017.1.2 and .NET 4.6 .


Solution

  • The child that is lower in the hierarchy is rendered on top of other ones.
    Let's say there are 2 panels. panel1(red) and panel2(green).If the hierarchy is like this:
    -panel1
    -panel2
    Then panel2 will be rendered on top of panel1. So, you'll see green panel.
    Hope this answers your question.
    Another suggestion, it is better to deactivate the unused panels and activate only the used panels. Because, if the unused panel is active, when it's not shown, it'll still take the processing power which is a waste. For example, if you have animation in the main menu, but currently you are showing the settings panel, your approach will keep the animations running in the main menu.