Why are my UI elements hidden behind the background?

Questions & Answers
1

I’m having an annoying problem with building a menu screen. For starters, I’m brand new to this and this is the first project I’m trying. I’m still learning the ropes. Whenever I place a button, which is a png file I have stored in the location First_Try_At_This/Assets/Sprites folder in my project (First_Try_At_This is my project root folder), the button and panel get placed behind the background. I know because when I have my background on, which is a white screen with the title of the game I want to build on it, the button and panel are hidden. I can’t see it. The screen looks like this:

101636-screenshot-47.png
101636-screenshot-47.png2736×1824 321 KB

Then, when I hide the background (by changing the sprite source of my background to “none”), they show up:

101637-screenshot-48.png
101637-screenshot-48.png2736×1824 296 KB

Can anyone tell me what I’m doing wrong? As far as I can tell I did everything right, but being a newbie, my definition of “everything” is skewed.

Thanks in advance!

3

Hi, I was having a similar problem with my game as well.
I see you already have Image (script). For anyone else having this problem make sure you have that component added, because thats what fixed mine. ’ Add Component’ then ‘UI’ and finally ‘Image’. Only needed to drag the sprite into the Source image and it worked for me.

4

You need different assets on different panels. As the UI operates in only 2 dimensions. (up down, left right)your background should be a standalone panel, with just it on it. Then put your assets on different panels, In your hirecahry it should / could look this.

canvas

  • Canvas
  • background panel
  • other UI asset panel //
    - text //
    - image

Items are displayed in order of top to bottom of the hirecahry, so you need your larger elements high up, so other items display on top of them.

So on and so forth. Group UI assets that relate to each other. I. E in a fantasy game you would probably group health and mana together, but have spells in a different panel.
I. E 2 health and armour in one panel and weapon icon and ammunition in another if it were a shooter genre.

Hope this helps and happy creating :slight_smile:

2

Hey there, perhaps try (because of how Unity layers it’s sprites) creating a few separate panels for each layer in descending render priority.

Because it looks as though you’re overwriting what sprite the button has set inside it with the background and back again. Perhaps add an Image or a Panel to your hierarchy?

-edit-
Make sure both are set to Sprite 2D for importing to Unity, and that the panel has the background, and the button your button.