Z-Index Issues

[jaised]

Hello. I am trying to make a tutorial for our game. Essentially it is supposed to be a scripted tutorial where the player needs to click certain things to advance, ect. An overlay (the same size as the window 1024x768) pops up with a collider on it (to prevent user input). The button I am wanting the user to click, I want to move in front of the overlay so that the user can only click that one button. However, when I move the button in front (programmatically), it is still drawn behind it. In the scene, it is definitely in front and I can even click it in game to receive the OnClick(), but in terms of visuals, all of the buttons look as if they are behind the overlay. I have tried to adjust the z more and more on that one button, but then every button that shares the same atlas also pops in front (or is drawn in front) of the overlay. How can I make just the one button appear in front of the overlay where the others remain behind it. I have tried the UISprite "Forward/Backward" scene widget and that doesn't work either. I want to prevent putting every sprite in its own atlas as that defeats the whole purpose to using atlas'.

Hopefully this makes sense and you can understand what it is that I am trying to do. Thank you for your time! 

EDIT: I have also manually tried to set the depth of that button to 100000 and the result is still the same.

[ArenMook]

Put this button on a separate panel.

[jaised]

Very nice! Worked perfectly. Thank you very much ArenMook =D

[jaised]

Hmm.. I tried this approach on a couple of items and sometimes it works and sometimes it doesn't. I noticed that when I add the UIPanel and it works, there are a number widgets within the panel. There is one game object that contains a sprite and yet it isn't reflected in the number of widgets. I have a feeling this is what is causing the objects to appear behind the overlay still. Is there something that needs to be called for the UIPanel to correctly get / draw those widgets? Thanks

[ArenMook]

The panel is responsible for drawing all the widgets underneath it. It's up to you to make sure that the widgets its drawing are actually in front of others. If all your widgets are on Z of 0, adding panels won't do anything. If you add a panel and then move it forward along the Z (negative), then you will indeed see a difference.

[jaised]

The panel is responsible for drawing all the widgets underneath it. It's up to you to make sure that the widgets its drawing are actually in front of others. If all your widgets are on Z of 0, adding panels won't do anything. If you add a panel and then move it forward along the Z (negative), then you will indeed see a difference.

Ok, let me explain it a little more because I don't think you understand the problem. I have a GameObject and a UISprite added to that game object. Let's say its at z=0. When I want to 'highlight' that object, I create an overlay with a collider to mask out the interface. I then add the UIPanel to that object, and move it forward (-z). The object within the scene is at -1.5, but the UISprite is still behind the overlay in terms of visuals. Even though I added the UIPanel to the object containing the sprite, it still doesn't change its z-indexing like if I did the same with a UIButton. However, I notice the difference between the two. When I add the UIPanel to a UIButton, the UIPanel component shows 2 widgets. However, when I add it to the Sprite, the uIPanel shows 0 widgets. Is this a bug or is something wrong? I have tried to tell each widget to CheckParent() and that still doesn't work. Ideas?

[ArenMook]

You need to create the panel first, then add children to it, not the other way around.

[jaised]

But that would defeat what I am trying to do entirely. I have the whole interface built the way it needs to be. Now for the tutorial, I just need to bring certain elements forward, and the only way to do that is by using the UIPanel. How could I do it your way without disrupting the whole hierarchy of UI elements? You already told me previously to just add a UIPanel (and for the most part it worked) but not for a few of the elements...

[jaised]

Essentially, this is what I am doing

1.                 // we had a UIPanel to the object so it can actually be shown through
2.                 // the overlay, after re-positioning. This is needed because putting the
3.                 // obj in it's own panel re-orders the draw calls so it is actually
4.                 // drawn in front.
5.                 this.TutorialGameObject.AddComponent<UIPanel>();
6.                
7.                 // cache starting position and rotation (so we can move it back in Destroy()
8.                 oldObjectsPosition = this.TutorialGameObject.transform.position;
9.                 oldObjectsRotation = this.TutorialGameObject.transform.rotation;
10.                
11.                 // move object in front of the overlay so it can register clicks
12.                 Vector3 newPosition = TutorialGameObject.transform.position;
13.                 newPosition.z = this.overlayGameObj.transform.position.z;
14.                 newPosition.z += -.7f;
15.                 TutorialGameObject.transform.position = newPosition;
16.  

This works for some objects like UIButton, but others like UISprite show up behind the overlay still.

[ArenMook]

Sounds like the CheckParent() isn't working as it should for the sprite then. Can you add an extra game object in between of the panel and the sprite? So you'll reparent the game object, not the sprite itself.

[jaised]

Not the cleanest code, but I finally got it to work. Thanks for the input. Below is the code just in case someone has issues later.

1. // create a new gameObject to add a UIPanel to. This object is needed
2.                 // because layering multiple UIWidgets in a GUI isn't allowed and in order
3.                 // for the UIPanel to contain the widgets, we need to attach it as the temp
4.                 // parent to where all the widgets (that we want to highlight) reside within it.
5.                 this.panelObj = new GameObject();
6.                 this.panelObj.transform.parent = this.TutorialGameObject.transform.parent;
7.                 this.panelObj.transform.position = Vector3.zero;
8.                 this.panelObj.transform.rotation = Quaternion.identity;
9.                 // reparent the object to the new object
10.                 this.TutorialGameObject.transform.parent = this.panelObj.transform;
11.                
12.                 // we add a UIPanel to the object so it can actually be shown through
13.                 // the overlay, after re-positioning. This is needed because putting the
14.                 // obj in it's own panel re-orders the draw calls so it is actually
15.                 // drawn in front.
16.                 this.panel = this.panelObj.AddComponent<UIPanel>();
17.                
18.                 // tell each widget within the panel that the hierarchy has changed,
19.                 // and they need to recheck themselves.
20.                 foreach(UIWidget w in this.panel.GetComponentsInChildren<UIWidget>())
21.                         w.CheckParent();
22.                
23.                 // refresh the panel to update it's widgets
24.                 panel.Refresh();
25.                
26.                 // cache starting position and rotation (so we can move it back in Destroy()
27.                 oldObjectsPosition = this.TutorialGameObject.transform.position;
28.                 oldObjectsRotation = this.TutorialGameObject.transform.rotation;
29.                
30.                 // move object in front of the overlay so it can register clicks
31.                 Vector3 newPosition = TutorialGameObject.transform.position;
32.                 newPosition.z = this.overlayGameObj.transform.position.z;
33.                 newPosition.z += -.7f;
34.                 TutorialGameObject.transform.position = newPosition;