koobas.hobune.stream
Making UI elements appear in front of other elements
Hello, I've been working on an inventory system for a little while now. In the past, when dragging an object from one slot to another, I set the item's number in the child list so that it would appear in front of the other children (other UI item objects and slot objects).
However, as I've been working on saving and loading within the inventory system, I've paid for this shortcut; It's been causing a number of problems when I save the object list contained within an inventory and later when reinstantiating (loading) a specific inventory.
Long story short, I'm trying to find a way to make a UI object appear infront of other UI objects without changing its position in the child-parent hierarchy. If anyone has any information on how I might do this, I'd be extremely grateful.
Godspeed & May the Force Be With You
Hi there is one solution I could provide on your situation. As we all know UGUI renders all the UI objects based on their hierarchy in the project. The more superior an object is in the hierarchy, the earlier it is rendered, and thus it is displayed "deeper" on the screen. So the problem is how to change the hierarchy of the objects, both during the editing and running. In editing mode you may just change the priority of the siblings in the hierarchy -- drag and drop, that is easy. If you want to change the relationship during running time, you definitely need to script and you may take this official document for reference: Official Scripting API So now lets make some examples. How to make a text rendered in front of all the siblings, its parent and all the other objects placed above the parent in the hierarchy:
text.transform.SetAsLastSibling (); //Since it is rendered the latest, it is displayed on the top.
How to make a sprite rendered behind any other UI objects of its siblings:
sprite.transform.SetAsFirstSibling ();
Suppose that you have 8 siblings under a parent, and you know that a text is the last sibling, a sprite is the 6th sibling. How to make a sprite rendered between the text and the sprite:
anotherSprite.transform.SetSiblingIndex (7);
Unluckily you don't know the sprite's sibling order, how to get it:
int spriteOrder = sprite.transform.GetSiblingIndex ();
Up to now we have successfully resolved the problem of adjusting render order of UI objects when these objects are UNDER THE SAME PARENT. What if they are under different parents? For example an object SonA is the 7th child of A, SonB is the 8th child of B, and you want SonA to be displayed as exactly the 5th one in B. Honestly speaking, if such a situation does happen STATICALLY, it is definitely due to inappropriate designing and the obvious way is of-course re-designing the whole hierarchy. However if the situation is that you are trying to drag something out of the box, or display a pop-up-menu, you may temporarily change the hierarchy by script during runtime and restore it after the operation. (This is exactly what NGUI does in its older versions. Currently only the drag and drop in NGUI causes a temporary hierarchy change. ) Feel free to ask more. GL & HF!
Wow that was terrifically helpful. Thank you so much for taking the time to explain this concept in such detail.
Hello.
I heard that Get and Set Sibling Index only works inside the editor. Is that true?
Last paragraph helped me understand why the child kept going under his parent's sibling... What a mess to fix tho... Wish we could simply define Z index...
