In this lecture, we're going to start looking at building the UI for our game.
Now, before we just jump into unity and start adding things to a canvas, let's have a little think
about what we're going to need to appear on this UI and where we're going to place it all.
So let's bring up a screenshot of our current game so we can visualize what we're doing.
And the first thing we're almost certainly going to want is to indicate the player's current health.
Now, there are many ways to do this in a game such as this, we could go with a simple slider somewhere.
We could potentially use something akin to heart containers.
We could go with a simple text option to display the percentage of health or something like that.
Or we could do something a bit more diegetic and potentially play around with the player's sprite.
So we might have showed icons or damage that gets applied to the Sprite itself.
That last one is probably a little bit out of scope for the UI we're going to be working with.
So for me, I'm just going to use a simple slider because we've seen those before and it'll be good
practice to use them in a different context.
After health.
I think the second most important thing to display to the player is going to be their current score.
And when it comes to displaying score in a game, there really is only one option and that is text.
Now for my game, I'm just going to stick with these two things, health and score.
But if you want to expand your UI, then here's a couple of other things you might want to think about.
You may want to add some information on the current wave or even potentially future waves.
You may want to indicate whether the player has any power ups they can use or whether power ups have
been activated.
And if you're going with an endless runner style game, then you may want to add something like the
playtime.
So with thoughts on what UI we're going to include now, let's think about where we're going to place
it all.
And the trick with UI is it should be easily accessible but non intrusive.
So first of all, let's think about where the player's eye is generally going to be focused when playing
our game.
Well, I think it's probably going to be most focused around the area where our enemies are going to
be, so around the center of the screen.
But we do also have our player ship and the player is going to be looking at that quite a lot.
So with this general idea of where the eye is going to be tracking, it would make sense in this case
to probably have our UI at the bottom of the screen.
So with a general game plan in hand, let's jump over to Unity and start implementing this.
So to add our UI, we're going to need a canvas.
So let's right click on our hierarchy, go down to UI and then add our canvas.
When we add this canvas, we also get the event system for free.
But if we click on our event system in our current project, we're currently getting a warning message.
And this is because we're using the new unity input system and it's by default set up for the old system.
This isn't going to be relevant for this particular scene because our UI isn't intractable, but because
we will be using it later on.
Let's just go ahead and click on this replace with Unity Input System button here.
This will set up a bunch of stuff behind the scenes that we really don't need to worry about, but it
will now allow all of our UI to be interacted with via the new input system.
So with that set up, the next step is let's click on our canvas.
And the last time we used the canvas, we pretty much ignored most of the stuff that was going on in
here.
But because we're not working with a fixed pixel size now, we're working with an aspect ratio, things
are going to change based on how big or small our screen is.
So the first step to making this function nicely is to change our canvas scalar.
We can see that it's currently got a UI scale mode of constant pixel size.
This isn't what we want though.
We want things to grow and shrink based on the amount of screen real estate they're taking up.
So let's change this to scale with screen size.
This will then ask us for a reference resolution.
So let's pick something that's in the nine by 16 range and I think maybe 1080 by 1920.
So HD resolution but on its side with that set now let's start adding some elements to our UI and my
UI is going to have three things.
First of all, it's going to have a UI panel.
And remember, this comes in absolutely giant in comparison to our game world.
So let's double click on our canvas so we can see it all.
And by default, this is already set to stretch regardless of what size our screen is.
But we don't want this panel taking up the entire screen.
So let's change this size a little bit.
First of all, we're going to move the anchors and there's a few ways to do this.
We could change them with our anchor presets if we wanted to.
We could change them manually by typing in the numbers we want or in the scene view.
We can click on the handles and start dragging them around.
So I'm going to drag them down to be about 0.07, so about 7% of the total height of our screen.
And then to fit the image inside of those anchors, we're just going to change the rect transform and
we.
You can see the top alignment is -1700.
So let's change that to zero.
And now it fits nicely at the bottom of our screen.
And if we go ahead and resize our game view, we'll see that our panel always occupies the same percentage
of the screen.
So anchors are really important and very useful for making sure elements stay where they're supposed
to be.
Now, inside of our panel, we're going to need two things.
First of all, we're going to need a UI slider for our health.
So let's call this the health slider.
To set this into position, I'm going to break our anchors apart so that it fills the total height of
our panel, but it only extends around halfway.
Then let's reset the rect transform.
And rather than allowing it to go right to the edges, let's add some padding.
So I'm going to add a left padding of maybe around 25 and a right padding of around 25.
This positioning looks about right to me.
So then down in the slider, let's turn off interactive.
Because we don't want the player to be dragging that slider around.
We're not going to need any transitions so we can set that to none and to make it easier to see our
colors that we're going to be adding later.
Let's just set the value around 0.5.
Finally, because our slider isn't going to be intractable, we're not going to need the handle.
So you can go ahead and either disable that or delete it entirely.
Finally, for our UI, we want some score text.
So let's again right click on our panel, go down to UI and then up to text, text mesh pro.
If we haven't already imported our TMP essentials, let's go ahead and do that.
Now, if you can't see this pop up window, then just make sure that it isn't hidden behind another
window or on another monitor if you've got a multi-monitor setup.
And then once that's done, we can close our window in here, we're again going to want to break our
anchors apart.
So let's scroll in so we can see a little better.
So again, this is going to take up the full height of our panel and around half of its width and place
our text in the center.
Let's change the left padding again to around 25 to bring in a touch.
Let's set the top to zero, the right to 25 and the bottom to zero.
Then to arrange our text, let's go into our text mesh element.
And rather than giving a fixed font size, let's select auto size.
Instead, if we take a look in the auto size options, then we can set a minimum and maximum font size.
So I'm going to go with a minimum of around five and a maximum.
I'll leave at 72 for now and for the alignment, I'm going to go with a right middle alignment.
And then so we're not looking at new text, let's add some numbers into the box so we can see how they
all look.
To me, they do look a little bit rubbish at the moment because we are using the default liberacion
sans font, but with our elements now in place, it's time for your challenge.
I want you to go ahead and improve the look of your UI.
So for this I want you to be thinking about the color scheme of your UI and I also want you to find
a nicer font for our score text.
So pause the video now and work on the design for your UI.
Okay.
Welcome back.
So hopefully you had fun designing the UI for your game and picking a nice color scheme while you've
been away.
I've set up mine in this nice blue and purple scheme, so let me walk you through the changes that I've
made.
So on my panel.
The only thing I've really changed here is the image color.
So I've gone with this nice purply color over on our health slider.
If we look at the background, I've reused that exact same color but at full opacity and for the fill
under the fill area I've picked this nice blue color.
Then over on the text side of things, I've gone ahead and found a nice font I liked.
The look of this again is from Kenny and it's called Kenny Space because we're working with Text Mesh
Pro, we need to turn that font into a font asset.
So remember we can do that.
If we select our font, we can go up to window down to text mesh pro and then click on font asset creator,
select our font that we want to create and then generate our font atlas.
With that set.
We're then able to drag that into the font asset section and create this outline effect.
What I've done is, rather than playing with the vertex color of the entire text, I've gone down to
the bottom under extra settings in text mesh pro, and I've adjusted the face color to be that same
blue color that we used for our health slider.
But I've turned the opacity right the way down and then I've added the same blue again.
But as an outline at full opacity, I've added a thickness of around 0.25 and then to really make it
pop, I've also added some glow with our game UI now sorted, it's time to write some code to get all
of this connected up, but to stop this lecture from becoming too long, we'll stop things there for
now and work on hooking everything up in the next lecture.
So I'll see you there.