To create the UI Panels whose layering can be changed by clicking buttons, follow these steps:
- Create a new Unity 2D project.
- Create a new UI Panel GameObject named Panel-jack-diamonds. Do the following to this panel:
- For the Image (Script) component, drag the jack_of_diamonds playing card image asset file from the Project window into the Source Image property. Select the Color property and increase the Alpha value to 255 (so that this background image of the panel is no longer partly transparent).
- For the Rect Transform property, position it in the middle-center part of the screen and set its Width to 200 and its Height to 300.
- Create a UI Button named Button-move-to-front. In the Hierarchy window, make this button a child of Panel-jack-diamonds. Delete the Text child GameObject of this button (since we'll use an icon to indicate what this button does).
- With the Button-move-to-front GameObject selected in the Hierarchy window, do the following in the Inspector window:
- In Rect Transform, position the button at the top-center of the player card image so that it can be seen at the top of the playing card. Size the image to Width = 16 and Height = 16. Move the icon image down slightly, by setting Pos Y = -5 (to ensure we can see the horizontal bar above the triangle).
- For the Source Image property of the Image (Script) component, select the arrangement triangle icon image; that is, icon_move_to_front.
- Add an OnClick event handler by clicking on the plus (+) sign at the bottom of the Button (Script) component.
- Drag Panel-jack-diamonds from the Hierarchy window over to the Object slot (immediately below the menu saying Runtime Only).
- Select the RectTransform.SetAsLastSibling method from the drop-down function list (initially showing No Function):
Figure 2.12: Addition of an OnClick event handler
- Repeat step 2 to create a second panel named Panel-2-diamonds with its own move-to-front button and a Source Image of 2_of_diamonds. Move and position this new panel slightly to the right of Panel-jack-diamonds, allowing both move-to-front buttons to be seen.
- Save your scene and run the game. You will be able to click the move-to-front button on either of the cards to move that card's panel to the front. If you run the game with the Game window not maximized, you'll actually see the panels changing the order in the list of the children of Canvas in the Hierarchy window.