Daily Progression: Create A Menu Screen!

Objective: Create a Menu Screen to display controls.

Something I overlooked on the mobile dungeon escape game was the menu button on the main menu screen.

To begin, create a UI Panel to contain everything related to the main menu.

I reuse the box sprite from the merchant, and set that as the source image of the panel.

Make sure the alpha layer is at its max level.

I don’t want the panel to take the who screen. So I set the anchor to stretch and add a buffer to the rect transform.

With the size sorted we can begin populating the menu panel. I only used text but feel free to use images, and buttons, and whatever else you need to create your menu panel.

Create a UI Text object, position in the middle at the top of the panel. With big white font I title the section of the menu as controls.

Duplicate the title, Set the text to the action.

Now rinse and repeat for the other two input actions i.e. move and attack.

Now on the opposite side of the menu using text objects write the button associated with the action.

This is a good place to end this tutorial. In the next tutorial we will finished populating the menu panel and create the functionality of opening and closing the menu panel. I’ll see you in the next tutorial!