Unity How To Create A Main Menu

Introduction

This article shows how to create a start menu scene using C# script in Unity 3D

Prerequisites

Unity Environment version 2019.4.9f1

Create the project

To create the UI let's right-click in our hierarchy. Go to UI and select panel.

The panel will create a canvas. Inside of this canvas, it will create a panel.

Now I want to go under the image and replace the source image. I've imported my own background image that we can drag and drop.

You can choose to use any sprite here. Just make sure that when you select it, under texture type it's set to sprite 2d and UI.

Rename the panel as BackGround in the scene view.

Add some text let's import a free package called text mesh pro. Let's go to the asset store search for text mesh pro select the pack here now we can just hit download or import and we'll hit import again and after it's done you should see a folder in your project .

Now we can go back to our scene view. We can right click on our canvas go up and you should now see an option here called text mesh pro.

The text renders a lot more clearly. Let's go into the font size here and let's change it to something like 100. Let's also given our text some room; I'll hold down alt to scale from the center let's make sure to align our text to the center both horizontally and vertically now instead of new text we'll write play with capital letters and I'm also going to change font asset to robot bold and I think we can make this even bold so that's also on the font style check of the b here. That looks pretty good, but currently, it's just a plain white to change this let's scroll down onto the material settings underlay in order to create a shadow let's enable this let's offset it by 1 on the x by -1 on the y. We can also increase the softness to play the shadow a bit i think that looks a lot better let's also add a gradient to the next.

We do that under the font settings where it says color gradient we'll make sure to check that and we now configure a color for both the top left and right and the bottom left and right but instead of doing that in here since I want all of my elements to share the same gradient, we can create a color gradient asset to do that we'll go to the project right click go Crete text mesh pro and let's select color gradient. Let's rename this asset to gold and now we can define some color and I have some color codes at the ready here so I'll simply paste these in I'm going to be using the same one for the top left and right and then for the bottom left and right we'll choose another one a bit darker this time so that's some nice yellow and orange colors.

Let's now select our text object and scroll to the gradient part. Now let's drag in our gold object into the gradient preset and there we go we now have a nice gradient to our text.

We want to turn this into a button. To do that let's right-click on our canvas, go to UI and create a button.

Let's start by scaling this button up and let's move it up as well for the image here we'll make that completely black. For now, we'll just go ahead and disable it.

Under our button, we'll notice a text object and this is what we want to replace with the play text that we just created, Let's delete this text object.

Instead of drag in our play text let's just rename this to text.

Instead, rename our button to play button.

We now select our text object we'll click on thr anchor presets at the top of the reg transform hold down alt and click on the bottom right corner this will snap our text to the center of our play button and make sure to always scale it to the same size as the button.

Now we should see if we hit play we can actually press.

On our text, however, we don't actually see anything changing we need some visual feedback on what's going on. To do that let's re-enable our image under the normal color let's go and change the alpha to 20.then under highlighted color we'll definitely also decrease it but we do went it to be visible and when we then press the object we went it to be even clearer so with these settings if we try and hit play .

We should see that when we hover over our text the transparent box appears and when we click it, it becomes even better.

Our button let's go ahead and duplicate (Ctrl + D ) create duplicate button it we'll click and drag while holding down shift to move it down on only one axis . and this going to be our options button so let's change the text to options let's also increase the width to make room for it and let's rename it to the option button.

We'll duplicate (Ctrl + D ) create a duplicate button this hold down shift while moving it down and finally we want this to be our quit button again we'll resize it to only just fit our text and we rename the button to quit button .

Menu let's start by creating this menu to do that let's go to a canvas let's right-click and create an empty game object.

Rename the empty game object as the main menu.

Let's also just size it up a bit this is going to contain all of our main menu elements. So we can select all of our buttons and drag them under our main menu object.

Select main menu let's then duplicate (Ctrl + d ) this object and let's rename this one to OptionMenu.

MainMenu let's disable now for this menu I don't want a lot of buttons I do want it to say options at the top so I'm going to under my options button take a text element alone and drag it to the top I'm then going to drag it up here where it says play and i'm going to delete both the play and options button.

The quit button we can turn into a back button. Let's call it the back button and change the text to back I'll also decrease the text size to something like 50 and we'll then resize it to fit and now we have some room where we can add our settings.

I'm just going to show you how to add a simple slider we'll right click on our option menu go UI and select.

Slider let's definitely make this wider and a bit taller let's go into the slider find the handle and let's disable the image component.

We can then slider select our background and make this a natural black let's also decrease the alpha to not make it stand out too much finally we can go under the fill area and select fill and let's use the color picker here to get a nice form our text.

Now we should see if we hit play that we're able to adjust our slider to anything that we like let's also add a tiny text element telling what the slider does to that let's duplicate our text let's move this on top of the slider lets rename to volume let's change the text to volume as well and let's decrease the font size to something like 40. We now shrink down this element move it to our slider and let's align it to the left and we've now created a volume slider.

Now we have our two menus as options menu as well as the main menu all that's left is to add functionality to these two menus let's begin with the play button this is found under the main menu object but instead of add a seperate script for the play button itself let's add a script to the main menu object that will have functionality for all of our menu buttons.

Create a new script Right-click on Assets. Select Create >> C# script.

Rename the script as MainMenu.

Double click it to open it up in Visual studio.

Drag and drop the MainMenu script onto the MainMenu.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
public class MainMenu: MonoBehaviour {
public void PlayGame() {
SceneManager.LoadScene("Gamescene" );
}
}

If we now save the code this and go into unity we of course need to make sure that we add our scene to the queue to do that we go file build settings.

Here, we have all the scene in our build first we want to add our menu so that has an index of 0 i will then add our game which has an index of 1.

Now the last thing we need to do is simply hook up our play button to the function that we just created to do that let's select the button let's scroll down to where it says on click this is a unity we can add an action to this event by hitting the plus button.

We need to select an object that will be our main menus let's drag that in there now we can go and find our main menu script and under here we've created a function call PlayGame.

Now if we play our game and press on the play button.

Loads the next scene.

The next button we'll hook up is the quit button again we can do this inside of the same script.we now save the code this and go into unity.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
public class MainMenu: MonoBehaviour {
public void PlayGame() {
SceneManager.LoadScene("Gamescene" );
}
public void QuitGame() {
Debug.Log("QUIT" );
SceneManager.LoadScene("Quit" );
}
}

Let's select our quit button let's scroll down to the on click event let's add an action again we want to reference our main menu and the function we want to call is under the main menu and it's called quit game.

We hit play and select quit we now see the quit massage displayed in the console.

Now the last button that's left is our options button. That's because we don't want this to load another scene or quit the program, we simply want this to change to another menu and we have that menu available right here it's just disabled so we don't actually need to do any programming we simply select the options button scroll down to the on click event add an action and here we can simply reference our options menu directly then as the function will go under game object I will choose the set active function .

The fact that we can call functions on unity components and then we can choose whether or not we want the game object to be enabled in this case we do but we also need to disable our main menu so we'll just add another action this time we'll reference our main menu we'll again go under game object choose set active and this time we want it to be false.

We now play the game and select our options.

We can see that our main menu gets disabled and our options menu get's enabled and here we are in our option menu of course we also need to be able to transition.

The back button to do that we'll go under the options menu select our back button add an action and here we want to reference our main menu go under game object you guessed it we'll select set active and we'll set that to true and then we want to disable our options menu so we'll add another action drag in the options menu go game object set active and this time false and that completes our menu.

We can go quit in order to quit the game we can go options in order to go into our options menu and adjust our volume we can select the back button and then we can go to the main menu.

Summary

I hope you understood how to create a Start Menu Scene using C# script in Unity 3D.