UI Panels are provided by Unity to allow UI controls to be grouped and moved together, and also to visually group elements with an Image background (if desired). The sibling depth is what determines which UI elements will appear above or below others. We can see the sibling depth explicitly in the Hierarchy, since the top-to-bottom sequence of UI GameObjects in the Hierarchy sets the sibling depth. So, the first item has a depth of 1, the second has a depth of 2, and so on. The UI GameObjects with larger sibling depths (further down the Hierarchy) appear above the UI GameObjects with lower sibling depths.
In this recipe, we'll create three UI panels, each showing a different playing card image. We'll also add four triangle arrangement buttons to change the display order (move to bottom, move to top, move up one, and move down one).
For this recipe, we have prepared the images that you need in a folder named Images
in the 1362_01_08
folder.
To create the UI Panels whose layering can be changed by the user-clicking buttons, follow these steps:
Panel-jack-diamonds
. Position it in the middle-center part of the screen, and size it 200 pixels wide by 300 pixels high. Uncheck the Image (Script) component for this panel (since we don't want to see the default semi-transparent rectangular grey background image of a panel).icon_move_to_front
arrangement triangle icon image into the Source Image property, for the Image (Script) component, in the Inspector view.You've created two UI Panels, each panel containing an image of a playing card and a button whose action will make its parent panel move to the front. The button's action illustrates how the OnClick function does not have to be the calling of a public method of a scripted component of an object, but it can be sending a message to one of the components of the targeted GameObject—in this instance we send the SetAsLastSibling message to the RectTransform of the Panel in which the Button is located.
There are some details that you don't want to miss.
While the Rect Transform offers a useful SetAsLastSibling (move to front) and SetAsFirstSibling (move to back), and even SetSiblingIndex (if we knew exactly what position in the sequence to type in), there isn't a built-in way to make an element move up or down, just a single position in the sequence of GameObjects in the Hierarchy panel. However, we can write two straightforward methods in C# to do this, and we can add buttons to call these methods, providing full control of the top-to-bottom arrangement of the UI controls on the screen. To implement four buttons (move-to-front/move-to-back/up one/down one), do the following:
ArrangeActions
, containing the following code, and add an instance as a scripted component to each of your Panels:using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; using System.Collections; public class ArrangeActions : MonoBehaviour { private RectTransform panelRectTransform; void Start(){ panelRectTransform = GetComponent<RectTransform>(); } public void MoveDownOne(){ print ("(before change) " + GameObject.name + " sibling index = " + panelRectTransform.GetSiblingIndex()); int currentSiblingIndex = panelRectTransform.GetSiblingIndex(); panelRectTransform.SetSiblingIndex( currentSiblingIndex - 1 ); print ("(after change) " + GameObject.name + " sibling index = " + panelRectTransform.GetSiblingIndex()); } public void MoveUpOne(){ print ("(before change) " + GameObject.name + " sibling index = " + panelRectTransform.GetSiblingIndex()); int currentSiblingIndex = panelRectTransform.GetSiblingIndex(); panelRectTransform.SetSiblingIndex( currentSiblingIndex + 1 ); print ("(after change) " + GameObject.name + " sibling index = " + panelRectTransform.GetSiblingIndex()); } }
icon_move_to_front
, and set the OnClick event function for these buttons to SetAsFirstSibling.icon_down_one
and icon_up_one
. Set the OnClick event handler function for the down-one buttons to call the MoveDownOne()
method, and set the functions for the up-one buttons to call the MoveUpOne()
method.3.14.131.212