Journal 75 — Unity’s “The Great Fleece”, Set Up Main Menu

Objective: Create a UI Manager and all menu screens

In “The Great Fleece”, we have added a Game Manager, Audio Manager, and fixed all the cutscenes. Now for this last in a series of articles, we want to add a UI Manager and add all the functionality to the menu screens.

UI Manager

First, let’s create an empty game object and new script for the UI Manager. We also want to use the singleton design pattern.

We can fill in the singleton design pattern, and add two functions to restart and quit the game. To use the restart function, we need to add a new Namespace UnityEngine.SceneManagement. We also need to add the scenes to the Build Settings.

Now we can open up the game over cutscene and add the functionality for restart and quit to the UI buttons. Note that you need to have a complete game build for Application.Quit to work. It will not work while testing in the Editor.

We can do the same updates in the win level cutscene.

Let’s check the restart functionality.

Main Menu

Let’s start a new scene and add a UI Image called “Background”. There is an asset already for the menu background that we can drag in.

Next we can fix the background image to fill the screen.

Then we can add another UI image called “Title_Img” and follow the same procedure to stretch the title to the entire screen.

Now let’s add the Start and Quit UI Buttons. You can change the Alpha on the buttons to remove the background of the button, and just show text.

Animate Main Menu

Let’s add some animation effects to the Main Menu. We will want to add a fade to black screen and also animate the Title image. We can start by creating a new UI image and stretch it to the entire screen and change the color to black.

After that, we can create a new Timeline asset on the Canvas.

Next we can create an Animation Track and add the Fade image. We can start with full Alpha, and then after a short time, turn the Alpha to 0. We can also record the x-position of the Title image shifted to the right of the screen, and then record its x-position back at 0 after a short time. This can all be adjusted to your preferences.

Here are the results.

Background Music

Let’s add background music.

Main Menu Buttons

Next let’s make the UI buttons work. We can add a new C# script and add the functionality to start the game and quit the application.

Next, we can add the UI Button Click events for start and quit. Note that the Fade image needs to have Raycast Target deselected so you can mouse click on the UI buttons.

Loading Screen

Let’s create a new scene to show a loading bar when transitioning from the Main Menu to the game. Let’s first create the new scene with a UI image and add the loading screen background.

Then we can add in a progress bar image, and reposition it so it fills the red bar along the bottom.

Now we can change the type of fill to horizontal.

We can add a Red Overlay image effect with the same approach as the progress bar.

Loading Bar Action

Let’s add functionality to show the progress bar. Let’s create a new C# script on the loading screen Canvas. We can use the LoadSceneAsync function to load the game and match the progress bar to the progress loading the Main scene.

Before testing this, we need to do a couple more things: we need to update the Build Settings to make sure the Menu, LoadingScreen, and Main scenes are all in order, and we need to update the Menu scene to make sure we load the LoadingScreen instead of the Main scene.

Here are the final results from the Main Menu, to Loading Screen, to game.

Thank you for your time!