Lesson 5: How to Customize Your UI

Lesson 5 Video Transcript

Hey there everyone. Welcome to another Unity tutorial. In this lesson, we’re going to be covering UI or the user interface of the game.

UI can be very complicated and Unity has a lot of features to help us. Way too many to cover in a single lesson. Honestly, way too many to cover in even a module or even a whole lecture series.

There’s a lot that goes on with UI, but we’re going to be covering it in its most basic form right now to create a button that’s just displayed on the screen. We can also add text or images to the screen, but for right now, we’re just going to stick with a single thing, that button.

In order to make this button work, we’re going to try to add some context here. So we’re going to be creating a button on our main menu.

So for our main menu, we should make a scene called Main Menu that will contain the button.

(00:56)
So I’m going to go into the scenes folder and create a scene and call it main menu. Pretty basic. I’m going to double-click it so it appears up here. And now we’re on the main menu.

In order to create UI in the hierarchy, we need to right-click, and instead of doing 3D Object, which is what we’ve done in previous lessons, we’re going to go down here to UI. And you can see there are a lot of options here at Unity.

If we just go into this space and add a button, you’ll notice it adds a few other things as well, and I won’t go into too many details right now, but for UI to exist, it needs to be in a canvas, and so you can see it automatically created the canvas.

If I drag the button out of here, it disappears because it doesn’t know how to draw unless it’s on the canvas.

(01:44)
There are a few settings here that are important, but you’ll note that if I change the resolution, you’ll see the button doesn’t fit exactly in the canvas.

As you might expect, if I switch from the free aspect to something like 16 by nine, which is pretty standard, you’ll see that it still falls outside of the screen, and that’s because the canvas is set up with a pixel size parameter right here in the scaler.

So the first thing that we’re going to do with our UI is we’re going to make it scale with screen size, and we’re going to enter 1920 by 10 80 a k, a, 16 by nine. And now that we’ve done that, no matter how I scale this, the button stays in its relative position.

So that’s the first thing that’s important to know. When you’re creating a menu or doing UI and Unity, you want to make sure that it scales properly.

On mobile, this can be more complex because of all the different resolutions, but for our purposes, this is a great first step.

Now let’s get back to the button. As you can see, it’s gotten pretty small since the screen size we made was quite a bit larger of a resolution. So why don’t we scale the button up? We could use its scale parameters as we’ve done,

(02:59)
But UI actually has some other parameters we can mess with. We can change its width and its height as opposed to just its scale. To do this a bit more easily, we can press T, which gives us these bounds right here that we can drag.

And so we can drag these, and now the button is much larger. We can also click and drag the button itself and using its pivot point right here. I’ve just aligned it in the center of the screen.

So far, so good.

Now, if you see the button actually has another child object, something that moves along with it, the text, it can be a bit hard to see. So why don’t we scale up the text as well by clicking on it and going to its text component.

Again, we could change its scale, but we could change the font size.

(03:52)
So I’m just going to drag this up. 120 actually sounds pretty good, and instead of it saying button, we’ll make it say play because we’re pretending this is the main menu. So there we go.

Now again, as you can see, the text is a child object of the button, just like the button is a child object of the canvas. So if I drag the button around, the text stays firmly in place with the button, and there you have it. This is the most basic form of the UI.

In Unity, we’ve successfully created a button, and in the next lesson, we’re going to add some code to our game that will make the button function as we want.