Make Menus

The core parts of the game are added now. The player will also a way to start and restart the game and quit if they would like. This section will take you through added in a start menu, a way to restart the game and an option to quit the game.

Setup

1. Open the "Scenes" folder in your Project Files.

2. Rename the current scene from SampleScene to Game.

3. Right click anywhere in your Project files and Create a new Scene called "Main Menu":

   Create > Scene > Scene

4. Open your main menu scene by double-clicking it in the Project Files.

5. Add a label through right clicking in the Hierarchy window:

   UI (Canvas) > Text - TextMeshPro

6. Double-click the canvas button in the Hierarchy window.

   This will zoom you out to where you can see the whole of the canvas.

7. Click your canvas.

8. Find the Canvas Scaler component.

9. Change the UI Scale Mode to Scale With Screen Size.

10. Set your reference resolution to X=1920, Y=1080.

11. Change these settings for the text object.

    Rect Transform
    Pos X	0
    Pos Y	400
    Width	1000
    Height	200

    TextMeshPro - Text
    Text	Main Menu
    Font Size	80px
    Font Style	Bold
    Alignment	Center

    Success

    

12. Add a button:

    UI (Canvas) > Button - TextMeshPro

    This will be the play button on the opening menu.

13. Change these settings for the button object:

    Rect Transform
    Pos X	0
    Pos Y	0
    Width	400
    Height	100

14. Change these settings for the button's text:

    TextMeshPro - Text
    Text	Play
    Font Size	60px
    Font Style	Bold

Create Scene Transition System

1. Open your Scripts folder in the Project files.

2. Create a new MonoBehaviour script called "SceneLoader":

   Create > MonoBehavour Script.

3. Create a new empty object: > Create Empty

4. Name it SceneLoader.

5. Add the SceneLoader script to the SceneLoader game object.

6. Open the SceneLoader script.

Scene Transition

To do scene transitions, you must use the UnityEngine.SceneManagement package. Visual Studio will import a package automatically whenever you use a function the requires it.

1. Create a GoToScene function that takes in an int:

   public void GoToScene(int sceneIndex)
   {
       SceneManager.LoadScene(sceneIndex);
   }
   

2. Overload the GoToScene with a function that takes in a string:

   public void GoToScene(string sceneName)
   {
       SceneManager.LoadScene(sceneName);
   }
   

3. Save your changes by pressing Ctrl+S.

   Success

   using UnityEngine;
   using UnityEngine.SceneManagement;
   
   public class SceneLoader : MonoBehaviour
   {
       public void GoToScene(int sceneIndex)
       {
           SceneManager.LoadScene(sceneIndex);
       }
   
       public void GoToScene(string sceneName)
       {
           SceneManager.LoadScene(sceneName);
       }
   }
   

Linking Buttons

1. Minimize Visual Studio.

2. Select your play button and scroll down in the Inspector.

   At the very bottom of the Button component, you'll see an empty list with the header "On Click ()". This is an event. You give it a list of functions that will execute when the OnClick() event occurs.

3. Hit the "+" button under the list.

4. Drag and drop your SceneLoader object into the empty GameObject slot.

   You will see a dropdown that says "No Function".

5. Open the dropdown and select your GoToScene function that takes in a string:

   Scene Loader > GoToScene (string)

   An empty field will appear under the dropdown. That is the parameter value.

6. Type "Game" into the parameter field

   Warning

   Strings are case-sensitive, make sure you write "Game" exactly like that.

   Success

   

7. Save your Unity project by pressing Ctrl+S.

Add Scenes to Scene List

1. Open your Build Profiles.

   File > Build Profiles

   or hit Ctrl+Shift+B.

   Success

   

2. Press Open Scene List.

3. Drag and drop all the scenes from your Project files into the Scene List.

   Tip

   To select multiple things at a time, hold Shift while selecting each of them.

   

4. Close the Build Profiles menu.

5. Save your Unity project by pressing Ctrl+S.

6. Hit the play button to test your menu and ensure that you can proceed to the game after the menu screen.

Return to Main Menu After Winning

1. Go back to the Game scene by double-clicking it in the Project Files.

2. Right-click the Canvas in the Hierarchy window and create an Empty Game Object.

   Create Empty

   Bug

   If you create the empty object without right-clicking the Canvas, the next steps will not work.

   Be sure your empty object has a Rect Transform component.

   

3. Name it "WinScreen".

4. Right-click the WinScreen object and add an Image object:

   UI (Canvas) > Image

5. Change the image color to black in the Inspector tab.

6. Right-click the WinScreen object again and add a Text object:

   UI (Canvas) > Text - TextMeshPro

7. Select the text object, image object and WinScreen at the same time.

8. In the rect transform, click the Anchor Presets in the left side of the component.

9. Hold Alt+Shift to set the pivot and position as well, then select furthest bottom right preset.

   

   Success

   Your game view should be covered by the black image, with text in the top-left corner.

   

   I can't see the text

   If you can't see the text, your image is most likely covering it. Make sure the items inside WinScreen are in this exact order from top to bottom.

   

10. Right-click WinScreen and create a Button:

    UI (Canvas) > Button - TextMeshPro

11. Change these settings for the text inside WinScreen:

    TextMeshPro - Text
    Text	You win!
    Font Size	100px
    Font Style	Bold
    Vertex Color	Yellow
    Alignment	Justify center Vertical align center

12. Change these settings for the button in WinScreen:

    Transform
    Pos X	0
    Pos Y	-150
    Width	400
    Height	75

13. Change these settings for the text inside the button in WinScreen:

    TextMeshPro - Text
    Text	Back To Menu
    Font Size	40px
    Font Style	Bold

14. Change these settings for the image in WinScreen:

    Image
    Color	Alpha (A): 200

Win Screen Logic

Set up SceneLoader

1. Create an empty object in the Hierarchy tab:

   Create Empty

2. Rename it to "SceneLoader".

3. Add the SceneLoader component.

4. Add the GoToScene function that takes in a string to the "Back To Menu" button's On Click () function list.

5. Type "MainMenu" into the parameter field.

   Warning

   Make sure your scene name matches what you type into the GoToScene string parameter. If it doesn't it will be unable to find the scene and it will not work.

   Success

   

Show Win Screen If All Coins are Collected

1. Open your CoinManager script.

2. Add a reference to the WinScreen GameObject:

   public GameObject winScreen;
   

3. Hide the win screen on Start:

   void Start()
   {
       totalCoins = transform.childCount;
       winScreen.SetActive(false);
   }
   

4. Show win screen when the player wins:

   public void addToScore(int add = 1)
   {
       score += add;
       scoreLabel.SetText(score.ToString());
   
       if (score >= totalCoins)
       {
           winScreen.SetActive(true);
       }
   }
   

   Success

   using TMPro;
   using UnityEngine;
   
   public class CoinManager : MonoBehaviour
   {
       public GameObject winScreen;
       public TextMeshProUGUI scoreLabel;
   
       private int score;
       private int totalCoins;
   
       void Start()
       {
           totalCoins = transform.childCount;
           winScreen.SetActive(false);
       }
   
       public void addToScore(int add = 1)
       {
           score += add;
           scoreLabel.SetText(score.ToString());
   
           if (score >= totalCoins)
           {
               winScreen.SetActive(true);
           }
       }
   }
   

5. Test it.

   Success

   You are able to go from the Main Menu to the Game, and when you win you can go back to the Main Menu.

   

   Finally we should add a quit button so people can stop playing the game.

Add Quit Button

1. Go to the main menu.

2. Duplicate your play button by selecting it and pressing Ctrl+D.

3. Drag it down in the scene view or set its Y position to -150 so it is visible.

4. Change its text to say "Quit".

5. Open your SceneLoader script.

6. Write this quit function:

   public void QuitGame()
   {
       Application.Quit();
   }
   

   Success

   using UnityEngine;
   using UnityEngine.SceneManagement;
   
   public class SceneLoader : MonoBehaviour
   {
       public void GoToScene(int sceneIndex)
       {
           SceneManager.LoadScene(sceneIndex);
       }
   
       public void GoToScene(string sceneName)
       {
           SceneManager.LoadScene(sceneName);
       }
   
       public void QuitGame()
       {
           Application.Quit();
       }
   }
   

7. Go to your quit button's On Click () list.

   It should have the GoToScene function from SceneLoader

8. Click the function dropdown and change it from GoToScene to QuitGame:

   Scene Loader > QuitGame ()

   Testing the Quit Button

   Testing the quit button will do nothing in the Unity Editor, it only works in the game build.

   Warning

   Make sure you change the On Click () function for the quit button and not the play button. Since the inspector looks the same for both buttons, it will be easy to get confused.

Conclusion

Awesome! You should now have a start menu, a way to restart the game and an option to quit the game.

See below for what your screen should look like after completing this section:

Success

You have a main menu with a working play and quit button.

Your game has a win screen that takes you back to the main menu when you collect all coins.