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

Content not available.
Please allow cookies by clicking Accept on the banner

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:         

2 thoughts on “Unity UI C# Simple Main Menu

  • March 16, 2018 at 3:06 am
    Permalink

    excellent tutorial… but my exit-button doesn’t work and I get an error when I try to build

    Reply
  • March 16, 2018 at 4:40 am
    Permalink

    I get a list of errors when i try to build game

    1
    Scene ‘Movement’ couldn’t be loaded because it has not been added to the build settings or the AssetBundle has not been loaded.
    To add a scene to the build settings use the menu File->Build Settings…
    UnityEngine.SceneManagement.SceneManager:LoadScene(String)
    LoadSceneOnClick:LoadScene(String)
    UnityEngine.EventSystems.EventSystem:Update()

    2
    Could not delete file ‘H:/AIE 2018/Work/Unity/Build test/New Unity Project 1/Library/ScriptAssemblies/Assembly-CSharp.dll.mdb.bak’

    UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr)

    3
    Error building Player: Could not delete file ‘H:/AIE 2018/Work/Unity/Build test/New Unity Project 1/Library/ScriptAssemblies/Assembly-CSharp.dll.mdb.bak’

    4
    Build completed with a result of ‘Failed’
    UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr)

    5
    UnityEditor.BuildPlayerWindow+BuildMethodException: 2 errors
    at UnityEditor.BuildPlayerWindow+DefaultBuildMethods.BuildPlayer (BuildPlayerOptions options) [0x00207] in C:\buildslave\unity\build\Editor\Mono\BuildPlayerWindowBuildMethods.cs:172
    at UnityEditor.BuildPlayerWindow.CallBuildMethods (Boolean askForBuildLocation, BuildOptions defaultBuildOptions) [0x00050] in C:\buildslave\unity\build\Editor\Mono\BuildPlayerWindowBuildMethods.cs:83
    UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr)

    6
    Could not delete file ‘H:/AIE 2018/Work/Unity/Build test/New Unity Project 1/Library/ScriptAssemblies/Assembly-CSharp.dll.mdb.bak’

    UnityEditor.Scripting.ScriptCompilation.EditorCompilationInterface:TickCompilationPipeline(EditorScriptCompilationOptions, BuildTargetGroup, BuildTarget)

    i have no errors when i use play mode in unity but when i try to build i get all these errors and game doesn’t even build

    WTF IS GOING ON???

    Reply

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. You can read more about it the Cookies&Privacy Policy Section Above. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this. You can read more about it the Cookies&Privacy Policy Section.

Close