A simple tutorial on how to create a basic Main Menu for Unity.

This main menu was designed to be simple and universal. It could be used in prototypes, game jams or as a template for more advanced menus.

Firstly create folder “SimpleMainMenu” and make three folders in it named “Prefabs”, “Scenes” and “Scripts”. To do that right click in the Assets window, then click Create→Folder. After you have finished it should look like this.

Save current scene to “Scenes” folder, name it “MainMenu”, this could be done by:

  • choosing option from FileSave Scene,
  • Ctrl/Cmd + S

Now create new Canvas in the Hierarchy – right click in Hierarchy window and choose Canvas from the drop-down submenu UI. Change it’s properties to:

We simply make it scale with the screen and not to have constant size, because we want to make our menu look good on most types of screens, not only on one.

After Canvas was created add new UI Image to it by right clicking on it and choosing Image from UI submenu. Change it’s name to “BackgroundImage” (click on the default “Image” name, delete it, enter new name and hit Enter key to save it) and it’s streach property. To change the streach property click on it, simultaneously hold Alt and Shift keys and choose this option:

It makes our Image automatically change it’s size to match the size of the Canvas. After that our “BackgroundImage” properties should look like this:

Now create four empty GameObjects in Canvas GameObject (right-click on Canvas and choose option Create Empty). Name them: “MainMenu”, “PlayMenu”, “Settings” and “Info”. Also change their Anchor(Strech) property to be the same as the “BackgroundImage”. Note that it is important that our new GameObjects should be below our Canvas GameObject, otherwise “BackgroundImage” will be rendered “closer” to the screen and they will not be visible.



After that add four UI Buttons to “MainMenu” GameObject and name them “PlayButton”, “SettingsButton”, “InfoButton”, “ExitButton” (all buttons have a child object Text, you can find it in the Hierarchy). Each button should have size of Width: 200 and Height: 45. Beggining from the first button each of them should have Pos Y = -75 * n, where n = 0, 1, 2, … . First one should be at 0, second at -75, third -150, fourth -225. Text of first button should be “Play”, of second “Settings”, of third “Info” and last “Exit”.

Click on the “ExitButton” in Hierarchy and click Add Component and choose New Script from the list. Name the script “ExitOnClick”. Remember to put that script into “Scripts” folder to keep Assets window clear and organised. After that edit script by clicking twice on it in Assets window or by clicking little gear over that script in Inspector window and choosing Edit Script option. Change it, so it looks like this:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ExitOnClick : MonoBehaviour
{
    public void ExitGame()
    {
        Application.Quit();
    }
}

The next step is to make our “ExitButton” execute this script, when player clicks on it. To do that click on the plus sign in the On Click () list property. After that drag our button from Hierarchy to this empty field:

From Function  drop-down field choose ExitOnClick→ExitGame. After that it should look like this:

“ExitButton” should now work. Let’s move onto “InfoButton”, to make it work simply add two On Click () properties fill the first one with “Info” GameObject and the second one with “MainMenu” GameObject. For both objects choose GameObject→SetActive. Check the CheckMark for “Info”. It should look like this:

“InfoButton” will now enable “Info” GameObject and disable “MainMenu” GameObject. Repeat this step for buttons: “SettingsButton”:

and “PlayButton”:

Now add new UI Text for our menu, name it “GameNameText” and change it’s properties to:

After that our Main Menu should be done, now it is time to create Play, Settings and Info menus. To begin with click on the “MainMenu” GameObject and set it inactive.

That way it will not be visible, and would not block our view for now. The next step is to create Play Menu, to do that add two buttons to it: “BackButton” and “PlayButton”, change their texts to “Back” and “Play”. Attach “LoadSceneOnClick” script to “PlayButton” and add proper On Click () properties, as shown before for the “InfoButton”.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class LoadSceneOnClick : MonoBehaviour {
    public void LoadScene(string sceneName)
    {
        SceneManager.LoadScene(sceneName);
    }
}

 

After that set the “PlayMenu” GameObject inactive. Now let’s create Settings and Info Menus. They will look the same, because we are only aiming to create a little prototype of a Main Menu. To create them, simply add “BackButton” to them and change it’s On Click () property to show and hide that menus.

“BackButton” in Info Menu:

 

“BackButton” in Serrings Menu should have differnet On Click () property, instead of turning off “Info” GameObject  we should turn off “Settings” GameObject. After changing that set Info and Settings Menus inactive and Main Menu active.

This simple Main Menu should be now complete. Drag everything from Hierarchy into the “Prefabs” folder and save scene. If you want you can export it into a Unity Package and use it in other projects. To do that click on AssetsExport Package… select everything and click export. Name the package as you want and put it somewhere on your hard drive.

You can now use this Main Menu in different Unity projects. It can be upgraded by:

  • adding different graphics for different submenus,
  • making some effects in the background,
  • implementing settings,
  • implementing info menu,
  • expanding play menu,
  • making UI animations.

Thank you for reading 🙂



Unity UI C# Simple Main Menu
Tagged on:         

Leave a Reply

Your email address will not be published. Required fields are marked *