Unity 3D Create Main Menu With UI Canvas

NSDG | Nov 25, 2019 | 0 Comments
Unity 3D Create Main Menu With UI Canvas
158

UI (or User Interface) is a combination of graphics, text and buttons that play a key role in providing an enjoyable gaming experience.

One of the most prominent parts of UI is the Main Menu since it's usually the first thing that players see when loading the game.

In this post I will be showing how to make a Main Menu in Unity 3D using UI Canvas.

So let's begin!

Part 1: Designing the Main Menu

  • Create new Canvas (GameObject -> UI -> Canvas)
  • Create new Image by right clicking on Canvas object -> UI -> Image. This will be Menu Background.

Change its Rect Transform dimensions to stretch width and stretch height, then change Left, Right, Top, Bottom to 0:

Assign the Texture to your Background Image. In my case I will be using the image below. Make sure its Texture Type is set to Sprite (2D and UI) in Import Settings:

  • Right click on Canvas object -> Create Empty then rename it to "MainMenu". This Object will contain the UI elements for the Main Menu.

We also need to change "MainMenu" Rect Transform dimensions to stretch width and stretch height then change Left, Right, Top, Bottom to 0. This is needed to be able properly align the child elements:

  • Create new Text by right clicking on "MainMenu" object -> UI -> Text. This will be a title text.

Change the Text to your game name (In my case it'll be "Game Title"):

Change paragraph alignment to middle center and color to white:

Lastly change the Font Size to something bigger (for example 30) and Font Style to Bold.

However you will notice that text disappeared, that's because the Rect Transform dimensions are too small. Change them to something bigger (ex. Width: 400 Height: 100), also move it up slightly by changing Pos Y to 50:

  • Create 3 buttons (Right Click on "MainMenu" object -> UI -> Button) and move each button down by 30 pixels.
  • Change Text of each button to "Play Now", "Credits" and "Quit" respectively:

  • Duplicate "MainMenu" object and rename it to "CreditsMenu" remove all the buttons inside it except "Quit" button and change its Text to "Back".

Change font size of a title Text in "CreditsMenu" to something smaller (ex. 14) and also change its Pos Y to 0. Type the Credits:

Part 2: Programming Menu Buttons

Now we need to make the Buttons functional by creating a script. Check the Script below:

SC_MainMenu.cs

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

public class SC_MainMenu : MonoBehaviour
{
    public GameObject MainMenu;
    public GameObject CreditsMenu;

    // Start is called before the first frame update
    void Start()
    {
        MainMenuButton();
    }

    public void PlayNowButton()
    {
        // Play Now Button has been pressed, here you can initialize your game (For example Load a Scene called GameLevel etc.)
        UnityEngine.SceneManagement.SceneManager.LoadScene("GameLevel");
    }

    public void CreditsButton()
    {
        // Show Credits Menu
        MainMenu.SetActive(false);
        CreditsMenu.SetActive(true);
    }

    public void MainMenuButton()
    {
        // Show Main Menu
        MainMenu.SetActive(true);
        CreditsMenu.SetActive(false);
    }

    public void QuitButton()
    {
        // Quit Game
        Application.Quit();
    }
}

(The script above has 2 variables for each sub-menu and 4 functions for each button press.)

  • Attach SC_MainMenu to Canvas object

The last step is to bind SC_MainMenu functions to each Button.

  • Select the Button and in On Click () section click (+) to add new element

  • Assign Canvas object to the Button Object variable and select the function that corresponds the button (PlayNowButton() for Play Now Button, CreditsButton() for Credits Button, QuitButton() for Quit Button and MainMenuButton() to Back Button in Credits Menu).

The Main Menu is now ready!