Modular Panel for Navigating App

Objective: Create an navigation interface that will overlay multiple forms.

Add a UI > Panel to the Canvas, naming it Border_Panel. Delete the image component and set the anchors to stretch-stretch, zeroing the left, top, Pos Z, right and bottom. Next add an UI > Image named White_Borders as a child of the Border_Panel. Add the WhiteBorder sprite as the source image, unchecking raycast target. Setup is shown below.

Create another UI > Image called Logo as a child of the Border_Panel, and add Logo_Small as the source image. Buffer the left and right by 120 and position the Logo -100 below the top or Y Pos. A Logo height of 200 is adequate to fill the top white bar.

Add UI > button to the Border_Panel to control navigation, disabling the text child object. Name this button Home_Button and add the HomeButton sprite as the source image. Anchor it to the bottom left and adjust the position within the lower white bar. Three more buttons, Left_Button and Menu_Button are similarly created using, respectively, the PlayButton and Setting sprites as the source images. The Left_Button’s anchor is bottom center with Pos X set to -100 and the Menu_Button’s anchor is bottom right with a Pos X of -140. The Right_Button is a duplicate of the Left_Button but uses a scale X of -1 to reverse the direction and a Pos X of 100 to offset right of center.

The Border_Panel must be below other panels within the Canvas. The different forms all use this navigation interface because it overlays the other panels. The forms are switched by enabling different UI panels and disabling the current form after user input.

Key learning is that the last child object of the Canvas is on top of the other objects within the Canvas, and anchor points are critical to control the position of buttons, as not all mobile devices have the same screen size.

This article uses assets from GameDevHQ Filebase.