Adding UI

[00:00:00]
>> So we're getting something that's closer and closer to a game here. Now, we need to add some UI and that seems like a really prudent idea because I got confused by there being no UI. So in Unity, UI exists as 2D sprite-based graphics with what's called a Canvas component as the parent game object.

[00:00:24]
So everything that's UI exists underneath a Canvas, and a Canvas can have one of three different render modes. So in games, you've probably seen a couple of different examples of UI. You've seen maybe UI that appears on the screen, and that's in what's called a screen space overlay that just renders UI elements directly on top of the screen.

[00:00:49]
There's also a screen space camera which is very similar but subtly different. It renders UI elements at a given distance in 3D space rather than 2D space in front of the camera. So that can be really useful for adding depth and perspective effects. So if you maybe want something to always be in front of the camera, but maybe you want a UI element that's kind of tilted a certain way and has the 3D perspective of the camera, you can use screen space camera.

[00:01:22]
Finally, there is world space. So you can put Canvases anywhere in the scene, they don't necessarily have to be in screen space right in front of the camera. And a world space Canvas will render UI elements as if they were 2D billboards in the scene in 3D space.

[00:01:42]
So that's useful for things like health bars or speech bubbles that maybe appear above a 3D character in a scene. So for this game, we're gonna use screen space overlay but it is possible to achieve a wide variety of effects using those other render modes. So we've got a little bit of scene setup here for the UI.

[00:02:07]
We want the player score on the upper left, the opponent score in the upper right, a timer at the top of the screen, and then some game over text in the middle. So I will switch over to Unity, these values are just here for your own reference later on, but this is all stuff that we're going to do in Unity.

[00:02:32]
We're gonna go to the Hierarchy and create a new UI Canvas And we can just leave it as Canvas, that's fine. And then underneath of that, we're going to create the timer first. So we will go to the create menu again, UI and we wanna choose TextMeshPro, and I'll call this timer.

[00:03:03]
And in the scene view, this will actually be quite large. But if we go over to the game view, you'll see that it appears normal size because this Canvas by default is going to use screen space overlay. So for our timer, we want this to be at the top of the screen.

[00:03:27]
So we could position this using these X, Y, and Z transform controls. This is actually what's called a Rect Transform which is inheriting from the transform class. So this game object still technically has a transform, it's not breaking those rules, but the transform controls look a little bit different because it's inheriting, it's slightly different.

[00:03:55]
So here we could type in these values, but we have this little handy widget here, we can click on this and we can set the anchor position of this UI element. And I want it to be at the top. If we hold down Option on Mac or if you hold down Alt on Windows, you'll notice that this menu changes.

[00:04:21]
And so we want to hold down Option or Alt, and what that's going to do is not only set the anchor of this UI element, it's also going to actually position it as well. So if we click that top center one, then it's going to place it in the top center.

[00:04:46]
And that's not exactly where I wanted it, I wanted it a little bit further away from the top. So instead of -25 for the y position, I'm going to say -50. The width of 200 is fine, but I want the height to be 100, so we have a little bit more space for the text.

[00:05:09]
Now down here on the TextMeshPro component, there's a couple of things we need to change as well. There's a font asset that I wanna change, so let's switch that out. And I have a specific font in here already, it's called Oswald, I'll select that, and that's going to be our timer text.

[00:05:35]
And then I'm going to check Auto Size to be true, and then this text I want centered for its alignment. Now this text is going to be a timer ultimately, so I'm going to just give it something that looks a little bit more like a timer like that.

[00:06:00]
And that will be its default text. And that's really just for our own purposes, so that when the game starts or when we're working in Unity rather we kind of know that that's the timer visually. So I'm going to duplicate that. Because this has a lot of the properties that we're gonna want for the player score.

[00:06:29]
But I'll change the name of this to Player Score, and then again, I'm going to click this little gizmo in the Rect Transform. I'm gonna hold down the Option key on Mac or Alt on Windows, and then we're going to click this upper left corner for the player score.

[00:06:50]
I try not to change that to player score, I think I need to type that and hit Enter, okay? So that's going to be the player score, of course, we want that to be 0 to start out with, and then we wanna change this to a different color.

[00:07:07]
Now we haven't assigned materials yet and the player is going to be a gold material, so we wanna change this to a yellow color. You can choose whatever color you want, it doesn't really affect anything, but I have a specific hexadecimal value I've picked out if you wanna follow along exactly.

[00:07:26]
That is FFCE00, so that'll be this nice gold color. And I want this to be a little bit more toward the left. Let me see how far off-screen I can get. That's too far, maybe if I set this to a value of 50, something like that, I think that should work for the x.

[00:07:57]
And then we need the opponent score. So this is gonna be the same thing, I'm gonna duplicate player score, we'll rename this to Opponent Score. And then we want this on the opposite side of the screen, so I'll click this gizmo, hold down Option, and hit the upper right.

[00:08:24]
And because this text is over in the upper right, well, actually we can leave these centered, so never mind, we'll leave both of those centered. But this is in the upper right, let's say we put player score at 50, so we should put this at -50, so it's evenly spaced.

[00:08:46]
And then we wanna change the color, so the opponent's color on its material is going to be kind of this bluish color and the x value for that I have picked out us 4583FF. And then finally, we have the game over text. So I'm going to duplicate the timer because that's closest to what the Game Over Text is going to be like, and we'll call this Game Over Text.

[00:09:20]
And then that's going to be stretched across the entire screen. So when we're placing this and want to stretch this in both directions, the horizontal and vertical, again I'm holding down Option to get this positioning, and I'll put that in the center. And by default, this text should say Collect more cubes than your opponent!Press SPACE.

[00:10:03]
To start. Now these fonts are kind of huge, I set this to auto size, but the auto sizing also has a max value. So I'm going to reduce that max value, right now it looks like it's set to 72 by default. Let's just drop that down. And actually, I do want a line break there, I want this to be on the next line.

[00:10:27]
So let's maybe drop that down to something like 32 for the game over text. And then for timer player score and opponent score, I'm actually going to multi select these because they all have a TextMeshPro component. I can modify the values of these that are the same across all three game objects.

[00:10:51]
So let's maybe set this to something like 50 for the max auto size option, and that will resize all three of them.