Why Won’t My UI Elements Display Over Sprites?
This is the question I repeatedly asked myself as I tested my Pause functionality in Zombie Swipe. For some reason, the Pause UI elements were showing up beneath my sprites instead of on top of them. I had this nice dark overlay that covered the screen and “PAUSED” centered in big letters. But the Zombie sprites and Player sprite scoffed at these trivial objects and walked all over them.
What was really frustrating is that I knew this Pause UI worked when I was in the conceptualization stage and used regular Image components for my Player and (stationary) Zombies. But when I switched them out for actual sprites it stopped working. I knew that them being sprites was part of the problem, but not how to fix it. So here we go:
If you want UI elements to appear over sprites you have to put the UI elements in a separate canvas from the sprites. Previously, my sprites and Pause UI shared the same canvas.
Create a new canvas under your main canvas and name it appropriately. Place the UI elements you want to appear over sprites into it.
Then, simply check the “Override Sorting” option on the canvas containing your UI elements.
And now the Pause menu elements show up on top of the sprites.
If you have a better – or alternate – way of accomplishing the same thing let me know in the comments.