UI Hierarchy Layering

Updated on July 31, 2017 in [A] GUI
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on Reddit0
2 on July 29, 2017

Hello BrackeysForum!


 This is my first time posting, so I am not sure if it is being done in the correct location or not, so please feel free to correct me if I am not properly aligned with the forum guidelines.

My issue:
I am working on the pause menu for an android game, and I am have problems with the layering of my UI game objects. When the game pauses the first time, the menu displays without issue(Figure.1), I can move back and forth between the panels, and everything stays as it should. When I resume the game, and pause again, my main background (TINT/SHADE) image shifts itself and covers up everything beyond the initial pause menu screen (Figure.2). 


Here is the script that is toggling the pause menu – 


public void PauseGame ()
       pause = !pause;
       if (pause == false)
            pauseMenu.SetBool("Hide", true);
            canvas.enabled = false;
            bgImage.enabled = false;
            camerLook.enabled = true;
            Time.timeScale = 1;
       else if (pause)
           canvas.enabled = true;
           pauseMenu.SetBool("Hide", false);
           bgImage.enabled = true;
           camerLook.enabled = false;
           Time.timeScale = 0;


As you can see, all I am doing is triggering animations, and enabled the canvas that provides the menu.

Why is this happening, and how can I prevent it? When the game is running, the image is still in its original location in the hierarchy. However, moving it up or down, and then back to its original position corrects it, and it is in the right order again.

I have been messing around with this for days and cannot figure it out, any help is greatly appreciated!

Thanks for the read – j


Figure 1.


Figure 2.


  • Liked by
1 on July 30, 2017

Check out sorting orders on the canvas / sprites.

on July 31, 2017

Wow… I cannot believe it was that simple, thank you!
I had created an alternate solution where I was re-instantiating the image, setting its parent, and destroying it with each pause cycle, and that seemed to work too. However, simply setting the sort order of the canvas to a negative value also proved to do the trick (without unnecessary code bytes).

Show more replies
  • Liked by