Developing Game in Unity? Check Template Projects, Tools, VFX & many more!

Unity 3D Create Main Menu With UI Canvas

6596

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

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

In this tutorial I will be showing how to create 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)

Unity Create Canvas

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

Unity Create Image in Canvas

  • Assign the Texture to a newly created Image. You can use the image below (Right click -> Save as...), but make sure its Texture Type is set to 'Sprite (2D and UI)' in Import Settings:

  • Create new script, call it SC_BackgroundScaler then paste the code below inside it:

SC_BackgroundScaler.cs

using UnityEngine;
using UnityEngine.UI;

[ExecuteInEditMode]
public class SC_BackgroundScaler : MonoBehaviour
{
    Image backgroundImage;
    RectTransform rt;
    float ratio;

    // Start is called before the first frame update
    void Start()
    {
        backgroundImage = GetComponent<Image>();
        rt = backgroundImage.rectTransform;
        ratio = backgroundImage.sprite.bounds.size.x / backgroundImage.sprite.bounds.size.y;
    }

    // Update is called once per frame
    void Update()
    {
        if (!rt)
            return;

        //Scale image proportionally to fit the screen dimensions, while preserving aspect ratio
        if(Screen.height * ratio >= Screen.width)
        {
            rt.sizeDelta = new Vector2(Screen.height * ratio, Screen.height);
        }
        else
        {
            rt.sizeDelta = new Vector2(Screen.width, Screen.width / ratio);
        }
    }
}
  • Attach SC_BackgroundScaler script to a newly created image. (Upon attaching, the script will automatically scale the background image to fit the screen):

Now we will create Menu buttons:

  • Right click on Canvas -> Create Empty then rename it to "MainMenu". This Object will contain the UI elements for the Main Menu.
  • 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 the 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 3 times) 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), change its Pos Y to 0 and type the credits text.

Part 2: Programming Menu Buttons

Now we need to make the Buttons functional by creating a script.

  • Create new script, call it SC_MainMenu then paste the code below inside it:

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();
    }
}
  • Attach SC_MainMenu to Canvas object
  • Assign "MainMenu" Object to Main Menu variable
  • Assign "CreditsMenu" Object to Credits Menu variable

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

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

  • Assign the Object with SC_MainMenu script (Canvas) to the Button "On Click ()" 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).

NOTE: PlayNowButton() function in SC_MainMenu.cs will attempt to load a Scene called "GameLevel". So make sure you have a scene with a name "GameLevel", which is also added to Build settings (alternatively you can change the name in that line to correspond the name of the Scene you want to load).

The Main Menu is now ready!

Interested in learning more about UI creation? Check our tutorial on How to Make Mobile Touch Controls in Unity 3D.