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.