Learn
Unity
Create A 2D Game With Unity Engine Part 6: Introduction To Unity’S UI System And Creating The Main Menu For Our Game

Create A 2D Game With Unity Engine Part 6: Introduction To Unity’S UI System And Creating The Main Menu For Our Game

Reading Time: 12 minutes

Level: Beginner

Version: Unity 2020.3.1 LTS

Help Others Learn Game Development

In part 5 of this tutorial series we created the Enemy script to move the enemies, we also created the EnemySpawn script to spawn the enemies.

These two scripts in combination with the Collector script form the gameplay mechanism of our game.

In this part we are going to talk about Unity’s UI system and create the main menu for our game where we can select the player with which we will play the game.

Introduction To Unity's UI System

Before we create the main menu and character select screen, let us introduce Unity’s UI system and see the main components of it that will help us build our UI.

First create a new scene by pressing File -> New Scene:

From the new window select the Basic 2D (Built-in) scene and click the Create button at the bottom right corner:

Creating a scene like this will not save it automatically, so you need to save it manually by holding CTRL + S or CMD + S on MacOS, or File -> Save or Save As:

When you are prompted to save the scene make sure that you set the correct save destination, and in the Save As field give the scene a name, in our case MainMenu:

Now, to create a UI element you can either click on GameObject -> UI:

Or, inside the Hierarchy tab, Right Click -> UI:

Let’s start by creating a simple UI Image. In the Hierarchy tab, Right Click -> UI -> Image:

You will notice that not only the Image object has been created, but also a Canvas and EventSystem object:

So why are all these objects created when we just wanted a simple image?

Well, every UI element in Unity needs to be a child of a Canvas, and when you create a new UI element, if there is no Canvas present in the scene, a new Canvas will be automatically created, which is what happened when we created the Image.

The EventSystem carries the scripts that is responsible to detect interaction with UI elements such as pressing the button.

While the image looks normal in the Game tab, when you look at it in the Scene tab it will look enormous:

As you can see from the preview video above, the Canvas and the Image look huge in the Scene view while they look normal in the Game view, what is the issue here?

UI Canvas

The reason why the Canvas and the Image are huge in the Scene view is because the Canvas object has settings options that determine how the UI elements that are children of that Canvas will be rendered.

You can find these settings by selecting the Canvas game object in the Hierarchy and in the Inspector tab under Canvas script, you will see Render Mode option which is currently set on Screen Space – Overlay:

So what is Screen Space – Overlay render mode?

The Screen Space – Overlay render mode will place the UI elements on the screen rendered on top of the scene. If the screen is resized or changes resolution, the Canvas will automatically change size to match this:

Screen Space – Camera render mode is similar to Screen Space – Overlay, but in this render mode the Canvas is placed a given distance in front of a specified camera object(we drag the camera object in the empty field).

The UI elements are rendered by this camera, which means that the camera settings affect the appearance of the UI.

If the screen is resized or changes the resolution, the Canvas will automatically change size to match as well:

In World Space render mode the Canvas will behave as any other object in the scene. The size of the Canvas can be set manually using its Rect Transform component (its Transform component for UI elements).

UI elements that are children of a Canvas that uses World Space render mode will render in front of or behind other objects in the scene based on 3D placement.

This is useful for UI’s that are meant to be a part of the game world such as health bars for enemies or players.

Canvas And UI Elements Sorting Layer

Same as normal sprites, the Canvas also has the Sorting Layer and Order in Layer property in the Canvas script:

The concept is the same as with other sprites, if the Canvas is set on a higher Sorting Layer it will be rendered on top of game objects that use lower Sorting Layers, and the same goes for the Order In Layer as well.

This is really important to know because in the majority of cases you want your UI elements to be rendered on top of all other elements in the game, and this is how you can set that up.

Canvas Scaler Component

Another cool feature the Canvas has is the Canvas Scaler component. This component has a property called UI Scale Mode which has different options that allow us to determine how UI elements in the Canvas are scaled:

The Constant Pixel Size makes UI elements retain the same size in pixels regardless of screen size.

The Scale With Screen Size makes UI elements resize if the screen resizes.

And the Constant Physical Size makes UI elements retain the same physical size regardless of screen size and resolution.

What I do in every game that I create, I set the UI Scale Mode to Scale With Screen Size:

Next, I use the Reference Resolution which allows us to to enter a resolution in pixels, full HD for example, which I do most of the time, and the Reference Resolution option will make sure that if the resolution of the game is larger, then our UI elements will scale up, and if it’s smaller then the UI elements will scale down.

This is done in accordance with Screen Match Mode which I set at 0.5 which means match width and height equally:

UI Anchors

A really amazing feature that Unity’s UI has is the ability to keep the UI element in the same place on all screen size. This is achieved with the help of anchors.

First let’s take a look at this example:

The UI Image is in the bottom left corner when the resolution is 1920×1080(Landscape), and when we resize the screen the Image is in the bottom left corner all the time.

But when we change the resolution to 1080×1920(Portrait) then the image disappears and we don’t even see it on the screen. This is because the anchor for the Image was not set to the bottom left corner.

The way the anchors work is when you set an anchor for an UI element, that element will be positioned as close to its anchor when the screen size changes.

To demonstrate this, select the Image in the Hierarchy tab, and in the Inspector tab in the Rect Transform component click on the Anchor preset:

This will open the Anchor preset window where you can select one of the available anchors for the UI element:

You can set the anchor in the middle, top middle, bottom middle, left, right, bottom left, bottom right and so on.

So in our case for the Image, we are going to set it at the bottom left:

As you can see, when we set the appropriate anchor for the UI element, it will stay as close to its anchor as possible no matter what the screen resolution is, and we saw that when we changed the the resolution in the Game tab, the Image was positioned in the bottom left corner on every new resolution.

Creating The Main Menu UI

What we covered about the UI system so far are the most important things we need to know to create UI’s for our game.

Later down the road when need specific things like interacting with buttons, sliders, or other UI elements, we will cover them on the go.

For now, we have everything we need to create our main menu UI.

We are going to use the same Canvas as we did in the examples above, I am just going to rename it to Main Menu Canvas.

For the Canvas Render Mode I am going to set it on Screen Space – Camera and attach the Main Camera from the Hierarchy tab in the empty field:

Next, select the Image and rename it to BG and for the Anchor or the BG image select the stretch anchor at the bottom right corner:

The stretch anchor will make the UI element stretch itself to match the specified part of the screen, in this case, it will stretch to match the full size of the screen.

But for that we need to change the values in the Rect Transform component:

When we set the values for Left, Right, Top and Bottom to 0, the UI element will stretch and take up the whole screen.

At the moment, we only see white because that is the default color of the UI Image.

Select the BG Image in the Hierarchy, and from the Assets -> Sprites folder, drag the Background sprite in the Source Image empty field of the Image component for the BG UI element:

Now our main menu background image looks like this:

Because we set the anchor for BG UI to stretch, every time we change the resolution of the game the BG Image also changes its size to fit that resolution.

Of course, it doesn’t look good on every resolution especially if you designed your background for a landscape game but you set a portrait resolution the background will look distorted, so you should keep that in mind.

Changing The Size Of UI Elements

Moving forward, select the Main Menu Canvas in the Hierarchy, Right Click -> UI -> Image to create a new image.

Name the image Moon and from the Assets -> Sprites folder drag the Moon sprite in the Source Image:

One thing that you will notice is that the Moon image is small and it looks distorted. This is because the default width and height of the UI Image is 100 by default:

As you can assume, we can change the values for the Width and Height in the Rect Transform component and this will change the size of the image in the game:

We can go like this until we find the size that we like for the specific image, but there is a shorter way to do this.

Select the Moon image in the Hierarchy tab, in the Inspector tab for the Image component click on the Set Native Size button:

This will automatically change the Width and Height values in the Rect Transform to the native size of the sprite image e.g. the size of the actual image file.

You can always resize the image and any other UI element using the values in the Rect Transform, and you can also resize UI elements with the help of the Rect Tool:

Next, change the anchor for the Moon object to top left corner:

And now we can position the Moon object somewhere in the top left of the screen, but before we do that, one thing that I want to mention is that the UI elements also game objects, which means we can move them in the Scene tab the same way we move other game objects:

UI Text

Next, select the Main Menu Canvas and Right Click -> UI -> Text. Name the text object Game Logo, and set its anchor to top middle:

Set the following values for the position and the size of the text UI:

When it comes to the text UI the are all sorts of things that we can change. We can use custom fonts, we can change the font size, we can set the text alignment, we can change the text color and so on.

All these options are located under the Text component that is attached on the text UI object:

The field options are self explanatory, in the Text field you can type the text that will presented by the text UI.

Under Font you can set your custom font, under Font Style you can set the text to be normal, bold, italic etc. The Font Size option will resize the text and so on.

Under Paragraph you have the alignment, and below it you have the color that you can use to set any color you want for your text. You can play around with the settings and see the outcome on the text UI object.

To use a custom font, just place the font that you imported in the Font field. From Assets -> Fonts folder drag the FEASFBI_ font in the field of the Game Logo:

For the text we are going to write Monster Chase, Font Size is going to be 214, Alignment middle center and the color of the text is going to be white:

When we are done, this is how our text UI looks like:

UI Button

To be able to select a specific player with which we want to play the game with, we need buttons.

Select the Main Menu Canvas, Right Click -> UI -> Button. This is going to create a default button and place it in the game:

You will notice that the button has a text that comes along with him. In our case we don’t need the text so we can safely delete it by selecting it under the Button object in the Hierarchy tab:

There will be examples of using the text to denote what is the purpose of the button and we will see that in other games that we will create.

Same as how we can attach a sprite to the image, we can also attach a sprite to the button. But before we do that we first need to slice the sprite sheet who has the images that we will use for our buttons.

In the Assets -> Sprites folder, select the Players sprite and slice it. Name the left sprite Player 1 Button and the right sprite Player 2 Button, if you need help, you can click here for a guide that will help you do that.

Now that we sliced the player select button images, we can attach them to the button:

The same way how you can resize a UI image, you can resize the button by pressing the Set Native Size in the Image component on the button object.

Rename the button to Player 1 Button, we will leave the anchor at its default which is middle center, and set the following values for the position of Player 1 Button:

Now we can simply duplicate Player 1 Button, rename it to Player 2 Button, attach the Player 2 Button sprite to the Image component of Player 2 Button object, and set the position of Player 2 Button to the following values:

When we are finished, this is how our main menu will look like:

You can always reposition the UI elements or add your own UI elements to make the main menu look better, that is up to you.

Where To Go From Here

In this part of the tutorial we learned about Unity’s UI system and we learned how to use anchors to position UI elements on the screen.

We also created the main menu for our game along with the character select buttons.

In the next part titled On Click Listeners, Singleton Patterns And Loading Scenes you will learn how to interact with UI buttons, how to navigate between scenes and you will learn one of the most important concepts of Unity game development called singleton pattern.

Create A 2D Game With Unity Engine Part 6: Introduction To Unity’S UI System And Creating The Main Menu For Our Game

Table of Contents

Create A 2D Game With Unity Engine Part 6: Introduction To Unity’S UI System And Creating The Main Menu For Our Game

Introduction To Unity's UI System

UI Canvas

Canvas And UI Elements Sorting Layer

Canvas Scaler Component

UI Anchors

Creating The Main Menu UI

Changing The Size Of UI Elements

UI Text

UI Button

Where To Go From Here

Leave a Comment Cancel reply