Daily Progression: Create A Menu Screen Part 2!

Objective: Finish populating the menu panel and add functionality!

In the previous tutorial we created a menu panel for the starting screen of the mobile dungeon crawler. In this panel we give a list of controls for the game. Now, we are going to finish the panel with a quick summery and an exit button and add the functionality.

To start directly after we left off, we have our menu panel.

We need to create a UI Text object to use as a title of the summary section.

Duplicate that Text object and write a quick summary of the story to help remind the play of what their objective is.

With that finished we can move on to the button. Create a UI Button, I am using the button sprite from before as the source image.

Set the text font size, color and text.

Finish the button of with positioning the button and settings it’s size.

The panel is populated with all the information I was now we can move on to the functionality of the panel. Open the Main Menu script. We need a variable to represent the panel we just created.

Assign the panel in the inspector.

Just like the start button and the quit button we need a method for the menu button.

This method will be called whenever we hit the menu button so what do we want to happen we the player presses the button? Open the panel, so we need to set the panel to active.

We call this method using the onclick event system in the inspector. Set the object to the Canvas and call the main menu method.

Now we need to set up the exit button on the menu panel. We need an exit menu method; this method is going to do the exact opposite as the menu button, set the panel object active to false.

Now your panel is ready for use. Play the editor and test it out. Don’t be afraid to experiment with your panel and I’ll see you in the next tutorial!