Introduction: (3) Starting to Make a Game - Making a Menu - Part 1

By

Today we will learn how to make a main menu in Unity. We will add a title and four buttons:

  1. Play Game
  2. Options
  3. Credits
  4. Exit Game

Let's Get started!

Step 1: Making the Menu Scene

First, we will make a scene named "Menu" in the "scenes" folder by right clicking -> Create -> Scene

Then double click on the new scene to go into it.

Step 2: Setting Up the Canvas

Now we will add a Text and four Buttons by right clicking -> UI -> Text or Button.

Rename the Text to Title and the four Buttons to

  1. Play
  2. Options
  3. Credits
  4. Quit

You should see something like the image above.

Step 3: Changing the Texts

Now before we start arranging the menu we should change the texts from "Button" or "Text" to what we want it to say.

Besides the four buttons there should be arrows pointing right, click on the arrows so that they point down, this will show the button text.

Click on the "Title" text and rename it to your game title.

After that change the Title Font Size to a bigger size such as 75. (This will make the title invisible for now)

Then click on the button texts and rename it to what makes sense. So, the "Play" button's text will say "Play".

Step 4: Arranging the Menu

Now you have to click the "2D" button on the top bar. Then you can easily move around the buttons and title.

But if you're moving a button make sure you select the actual button not the button text, if you make a mistake type: ctrl + z

Step 5: Adding Button Background (Optional)

Personly I like to add an image behind the buttons so that the buttons stand out more, so if you want you can do that too then you have to make another Image and rename it to "Button Background".

Make sure the Button Background is above all the buttons like in the image above.

Resize the image so that the buttons fit nicely inside, then change the color of the image to whatever you want(Mine will be see through black).

To make the color see through you must change the alpha value (A) a little bit lower, mine will be at 125.

Step 6: Fixing Title and Adding Menu Controller

To make the title visible again you have to drag the corner of the text box to make it bigger until the title is clear.

Then make an empty gameobject by right clicking -> Create Empty and rename it to Menu Controller.

Make sure the Menu Controller is not under the Canvas.

Step 7: Adding Anchors

Anchors will basically keep something in place instead of moving weird and looking ugly, I'm sorry, I'm bad at explaining it but here is the Unity Manual on Anchors if you want to check it out.

So first we will select the title and click on the box that has a red circle around it, that will make another box called Anchor Presets.

Now hold shift and select the anchor preset that the red arrow is pointing to. This will make the title stay at the top if you want the title to stay at the top left corner then select the preset beside the one I'm using.

Holding Shift will also set the Pivot point.

Step 8: Adding Anchors

Now we will put Anchors on the buttons. If you did the "Adding Button Background (Optional)" step then do the "Button Background" step, otherwise do the "No Button Background" step.

No Button Background

  1. Select the button your gonna add the anchor to. (eventually all of them)
  2. Then click on the box that has a red circle around it, that will make another box called Anchor Presets.
  3. Now hold shift and select the anchor preset that the red arrow is pointing to. This will make it stay at the bottom left corner.

Button Background

Select all the buttons (select multiple buttons by holding shift) and drag them to the Button Background, then click on the Button Background and do the "No Button Background" instructions but skip the first step.

Step 9: Menu Background (Solid Color)

This is exactly the same as setting the background for the splash screen.

So click on the Main Camera and set Clear Flags to "Solid Color".

Then change the Background color to anything you want, personally, i like to make it white.

Step 10: Menu Background (Image)

For this purpose, I'm gonna use this Image by Drew Selby.

You have to open the folder where your background is located then drag and drop the picture into the "Assets" folder in Unity.
Then click on your background and at the top, change the Texture Type to "Sprite (2D and UI)". After that at the bottom click "Apply".

Step 11: Menu Background (Image)

Then create an image named "Background" and make sure it is above everything else (The picture above shows it at the bottom, the picture is wrong, sorry!)

Now click on the image named "Background" and drag your background to the Source Image space.

Step 12: Menu Background (Image)

Ok, that's good and everything but... the background doesn't fill up the whole screen, so we need to set Anchors!

So now we will select the image named "Background" and click on the box that has a red circle around it, that will make another box called Anchor Presets.

Now hold shift and alt then select the anchor preset that the red arrow is pointing to. This will make the Background stretch across the screen no matter what resolution the game is.

Step 13: Making the Menu Script

Make a script called "Menu" in the "scripts" folder and delete all the code, then copy+paste this code into the script:

Menu Script

If you have any questions about how the code works comment what you want to know I will gladly help!

Step 14: Setting Up Buttons and the Menu Controller

First, make sure you drag and drop the "Menu" script to the Menu Controller.

Then, for each button do the following:

  1. select the button
  2. under the "On Click" tab at the bottom, there should be a + symbol, click it.
  3. Drag and drop the Menu Controller to the box that says "None (Object)"

Then:

If you selected the "Play" button then you would click on: No Function -> Menu -> PlayGame

Keep the text box blank for now.

If you selected the "Options" button then you would click on: No Function -> Menu -> Options

Then Type "Options" in the text box.

If you selected the "Credits" button then you would click on: No Function -> Menu -> Credits
Then Type "Credits" in the text box.

If you selected the "Quit" button then you would click on: No Function -> Menu -> QuitGame

Step 15: Testing

So. now if you test out your game so far, nothing will happen, it will just crash when you click a button. That is normal though because we don't have anything for the buttons to do next. But I assure you if you follow the next Instructables everything will work properly!

NOTE: Remember to save! (ctrl + s)

If you had any problems or if you have any questions or comments, comment them below, I'll be happy to help!