Unity Help: Why Won’t My UI Elements Display Over Sprites?

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.

UI Canvas

 

Then, simply check the “Override Sorting” option on the canvas containing your UI elements.

Canvas sorting override

Voila!

And now the Pause menu elements show up on top of the sprites.

Zombie Swipe Paused

If you have a better – or alternate – way of accomplishing the same thing let me know in the comments.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s