‫Welcome back.
‫In this video, we are going to have a look at UI elements and in particular, we are going to have
‫a look at text.
‫So I've created a new project.
‫I call it Pong Basics.
‫And here I want to create a UI element.
‫So in the hierarchy view I make, I do right click and then I go to UI.
‫I have multiple options here.
‫I have text, image, raw image, button and so forth.
‫For now, I'm just going to use text.
‫And as you can see, the new text appears on our screen here at the bottom left.
‫So if we zoom out to the right position, we will see.
‫This is where our text currently is.
‫It's at the bottom left.
‫So this is the render mode that we have for our canvas, which is screen space overlay.
‫So what that does, it will overlay whatever we assign to the UI layer or to the UI space here on top
‫of our game mode or game view itself.
‫So now no matter what we have in there as our game object, so let's say we add a 3D cube and position
‫it at 000.
‫This is where it is.
‫And as you can see, it's somewhere around here.
‫So the game mode itself is very tiny in comparison to this huge screen that is or to this huge layer,
‫which is our UI layer, our canvas, which is put on top of.
‫So that's what the screen space overlay does.
‫There are other options for, for example, screen space camera.
‫What that will do is you need to give it a camera here, render camera, and it will take a different
‫approach.
‫So now it's based on where the camera currently is and you have a certain canvas in between the camera
‫and the play mode.
‫And it's it's almost like a layer on top, but it's still a slightly different approach.
‫Then you have world space where you can assign a specific width and height for your canvas and you can
‫do some additional layer changing and so forth.
‫We will use the different render modes throughout the course, so no worries there.
‫You will see those in detail in the next videos or in the next chapters.
‫I just wanted to quickly show you the different modes.
‫Now within the canvas we have the text and at the same time we also have created a an event system.
‫So whenever we create a UI and we didn't have a UI element before, our canvas and event system are
‫created for us directly, automatically.
‫And I created a text.
‫As you can see, it's child of our canvas, so it's inside of our canvas folder and now we can go ahead
‫and change the text, for example.
‫So here we had new text.
‫Let's change that to a plain zero.
‫And as you can see, we can barely see that zero.
‫So let's change the font size to, let's say 50.
‫And now you might say, oh, --, where did it go?
‫I can't see it anymore.
‫That has to do with the fact that the height and width don't fit with the font size anymore.
‫So our text.
‫Element itself.
‫Our text UI element has a height of only 30.
‫So only if I increase it to four, for example 60, I will be able to see my number again on my text
‫again.
‫Now let's go back to 30 and say I still want to keep it at 30, but I still want to see my zero, so
‫how can I solve it otherwise?
‫What you can do is you can use overflow.
‫So horizontal overflow and vertical overflow will do so that as you can see, your number will still
‫appear.
‫Now, however, it's cut off.
‫So how do I move my zero?
‫Well, you can move it from here.
‫So let's zoom out to the point where we can actually see something.
‫So you can move it around here.
‫As you can see with our transform editor here or with our Transform tools.
‫Now, you can drag it around and you can see where it is.
‫Another way to change the position of something is, of course, to change, direct, transform here
‫directly so you can add values here.
‫So you could say zero zero is the right position for you.
‫Now the zero is not in the center.
‫Why is that?
‫Well, that's because the alignment of our text here is not centered.
‫So you can align it centrally in both directions and then it will be perfectly centered and you can
‫still change that by changing the anchor.
‫So here, for example, now it's an anchor preset to the center.
‫You could anchor it to the top left, so now let's anchor it to the top left.
‫As you see, nothing has changed except for the post Y and the Pose X.
‫So those two values have now changed.
‫So if we bring those back to zero and zero, you can see that our zero goes back or goes perfectly to
‫the edge of our top left corner.
‫Now, of course, we would want to move it a little bit so that we still see the zero.
‫So let's move it into our game.
‫Now, Black might be that might not be the right color for you.
‫If you want to change that, you can go to the color property here and change the color to, for example,
‫red or white or green or whatever you like.
‫All right.
‫So let's take this pink because it's it fits into the blue.
‫We can see it very well.
‫And then what you can do is, of course, change the line spacing.
‫So let's say you have a second line in here.
‫Then you can change the line spacing.
‫So let's say you want to have a bigger distance between lines.
‫So that's the line spacing.
‫One is totally fine.
‫And finally, of course, you can change the font any time.
‫So the standard is A and there are no further fonts.
‫By default.
‫You can download fonts either from the asset store or you can import them from wherever you downloaded
‫them, for example.
‫So you download them to your machine and then you can import it from there.
‫But be careful that you don't download fonts that you don't own because some fonts actually cost money
‫most of the don't.
‫So just search for free fonts or royalty free fonts and then use those.
‫All right.
‫So that's about the font and the text.
‫And now let's have a look at how we can change that number programmatically in the next video.