Unity is displaying UI elements behind background image

Question

I have been trying to fix this for 2+ hours, I am very new to Unity.

This is my hierarchy:

I have the notes and buttons in front of the canvas (I have these outside of canvas, I was just moving the objects around when taking this screenshot).

The buttons and notes appear behind the background image somehow (I have tried to put the image behind the canvas on a panel and on another canvas but none have worked).

This is how it looks like on 3D camera: (I have moved the notes in front of the background image, but it still appears as is behind the background).

This is how it looks like when running the game (with background image at opacity 100%):

Keep in mind that i have tried to change "Order in Layer" to from 0 to 1 and even 2, added some user layers and tried to order the objects through it, and I tried to put everything on a canvas. My notes and buttons are 2D sprites.

I have also tried these solutions, and none have worked: https://answers.unity.com/questions/9729/how-can-i-display-a-flat-background-2d-image-not-a.html

https://answers.unity.com/questions/1405451/why-are-my-ui-elements-hidden-behind-the-backgroun.html

https://answers.unity.com/questions/945937/ui-covering-my-sprite.html

Answer 1

Answer by Vivien_Lynn · Mar 25, 2021 at 12:08 PM

The Z-value of your Panels and Buttons does not matter for what is rendered first.

The Order in Layer for your Canvas describes where your whole Canvas gets rendered. So Order in Layer 5 will always be rendered in front of anything below 5.

To render the Buttons on top of your Background, you need to put your Background at a higher position in your Hierarchy. Since the render order is Top to Bottom.

Here is an example: alt text

screenshot-2021-03-25-130615.png (22.7 kB)

Add comment · Show 5 · Share

LaaGostim · Mar 25, 2021 at 01:18 PM 0

Share

Hi! I tried your method, but it didn't work, I created a canvas for each object, one for buttons (CanvasButtons), one for notes (CanvasNotes), one for the score (CanvasScreen) and another one for the background image.

Unfortunately, the image still shows in front of only the notes and buttons specifically, both the notes and buttons are on sort order 1, while the background image is in sort order 0.

The strange part is that if the sorting layer on button and notes are 1, then everything is normal, but if i change both to 2, then the order gets messed up again.

Changing the buttons and notes to higher order values, do not work. alt text

6.png (377.2 kB)

Vivien_Lynn LaaGostim · Mar 25, 2021 at 02:33 PM 0

Share

Just for your information: the order in the Hierarchy only matter withing a Canvas, like I said in my original post. The order of your whole Canvases in your Hierarchy does not influence where things are rendered. (So your CanvasBG could be at the very bottom in your Hierarchy and that would not change if it is on rendered on top or not). Hope you understand what I mean. Are you 100% sure all your Canvases are setup correctly? All set to either Screen Space Camera or WorldSpace? Also, there shold not be any "Sorting Group" component on any of your GameObjects.

Vivien_Lynn LaaGostim · Mar 25, 2021 at 02:42 PM 0

Share

This might not be the source of your problem, but I would highly recommend you to group your Canvases differently. Put everything that belongs together into one Canvas. Like your whole Game-HUB into one Canvas.

LaaGostim Vivien_Lynn · Mar 25, 2021 at 05:42 PM 0

Share

I have changed the perspectives to screen space camera and worldspace on various game objects, i have put everything in one canvas, mixed the position of the game objects, i messed around with a lot of stuff, making the camera "perspective" instead of "orthographic", i have seen a lot of youtube tutorials etc..., and even remaking the whole game, and still, nothing works, i think i will just give up on this game and make something new. It's been more than 5 hours trying to solve this.

Show more comments

Answer 2

Answer by FuzzyWeasel · May 29 at 03:46 AM

Pardon answering to the old thread. I had the same problem and discovered the answer. At least for me.

You must create canvas objects to display on the canvas. If you drop an image it wont render, but a UI->Image will. It comes with a host of attached components that make it work. (Canvas renderer, rect transform vs transform). You can either create the new object and rework it, or add those components to your existing setup.

Hope this helps someone.

Add comment · Share

Unity is displaying UI elements behind background image

2 Replies

Your answer

Follow this Question

Related Questions