Creating Main Menu for App
Objective: Create the main menu for the insurance app.
Select the game window and set the display to 16:9 portrait, and adjust the layout to have the scene and game windows long axis vertical side by side. Add A UI > Panel named Main_Menu_Panel. This also creates the Canvas, whose setup is shown below with Canvas Scaler UI Scale Mode set to scale with screen size. The reference resolution is set to 1080 x 1920 to give a vertical layout.
Add a UI > Image to the hierarchy window, naming it Background, as a child of Main_Menu_Panel. Check that the BG_Dark asset image texture type is Sprite (2D & UI) and assign it as the source image. Set the anchor point to stretch-stretch, zeroing the left, top, pos Z, right and bottom.
Add another UI > Image to the hierarchy window, naming it Logo, also as a child of Main_Menu_Panel. Check that the Logo asset image texture type is Sprite (2D & UI) and assign it to the source image. Set the anchor point to stretch-top, zeroing the left, pos Z, and right. The pos Y is set at -650 and height to 1060.
Similarly add a third UI > Image to the hierarchy window, naming it Grey_Overlay, also as a child of Main_Menu_Panel. Check that the GreyOverlay asset image texture type is Sprite (2D & UI) and assign it to the source image. Set the anchor point to stretch-middle, zeroing the left, pos Z, and right. The pos Y is set at -760 and height to 804.
Create a UI > Button to the hierarchy window, naming it Find_Case_Button, childing it to Main_Menu_Panel. Check that the Button asset image texture type is Sprite (2D & UI) and assign it to the source image. Set the anchor point to stretch-middle, zeroing the left, pos Z, and right. The pos Y is set at -530 and height to 2307. The text for the child text object should read, “ find claim #”.
Duplicate this button renaming it Create_Case_Button with posY is set at -816 and height to 2307. Change this new buttons text object’s text to “file new claim”.
The main menu is now complete and the hierarchy should appear as below.
Key learning is that the Canvas Rect Transform is set by its reference resolution, which is used to determine the positions of its children relative to their anchor points.
This article uses assets from GameDevHQ Filebase.
