Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Unity Basics!
You have completed Unity Basics!
Preview
The Unity Canvas is huge… literally and figuratively. Let’s get one set up and display our new score system to the player, updating it in real-time.
Unity UI Documentation
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In this video, we're going
to add some text to the screen
0:00
and show the player their current score
and update it in real time.
0:03
UI elements are crucial
for any video game, whether it be simple
0:07
text, a heads up display, menus
with buttons, health bar sliders, etc.
0:11
Unity has an... interesting way
of working with these
0:17
and to be honest, I struggled
with it for a while when I first started.
0:19
I encourage you to keep practicing
and you'll get the hang of it in no time.
0:23
So first, what we need is a canvas.
0:27
Let's right-click in the hierarchy
and scroll down to UI and select
0:30
Canvas down here.
0:34
You'll notice it also added something
called an Event System.
0:38
This serves as a manager
that handles and facilitates input events,
0:42
such as mouse clicks,
keyboard presses, or touch inputs,
0:46
to enable interactivity with UI elements.
0:49
We don't need it for this score text,
but we'll need it later on, so
0:53
we can just leave it there.
0:56
You may have noticed this new box
appeared in our scene view.
0:58
Let's zoom way out.
1:01
You can also
1:07
double-click on the canvas object
to focus on it.
1:08
You're probably wondering,
why this huge box?
1:11
Well, Unity displays
this large canvas in the scene view
1:15
because it represents
the pixel dimensions of the screen,
1:18
where one unit in the scene
corresponds to one pixel on the screen.
1:22
This design allows for precise UI element
placement and scaling, while maintaining
1:27
a 1 to 1 pixel to unit ratio
that optimizes rendering performance.
1:32
A Unity unit is an arbitrary measure
of distance in the game world, often
1:37
interpreted as 1 meter, but this can vary
based on the project's needs.
1:42
Since our screen is 1920 by 1080,
we get this very large box.
1:46
This render
mode property is used to determine
1:56
whether UI elements are rendered
in screen space or world space.
1:58
We'll leave that as screen space overlay.
2:03
This mode places UI elements on the screen
rendered on top of the scene.
2:05
If the screen is resized or changes
resolution,
2:10
the canvas will automatically change size
to match this.
2:14
If you're seeing this warning
about keeping vertex color in gamma space
2:18
don't even worry about it, just go ahead
and check this box for vertex color
2:22
always in gamma color space.
2:26
Down here we have a UI scale mode
2:30
option. By default
it's set to constant pixel size.
2:32
This will make UI elements
retain the same size
2:36
in pixels, regardless of the screen size.
2:39
Let's change this to scale
with screen size, because we want the UI
2:42
elements to grow and shrink
depending on the player's screen size.
2:46
Let's add in 1920 by 1080
in this reference resolution.
2:49
This is used to scale the canvas area
if the aspect ratio
2:54
of the current resolution
doesn't fit the reference resolution.
2:57
Now don't worry about the logic
behind these too much for now.
3:02
These are the settings I've placed on
every game I've made so far.
3:05
Changing the UI scale mode
3:09
to scale a screen size
and adding in the reference resolution.
3:10
There are links in the teacher's
notes below
3:14
if you want to dive deeper into the canvas
object.
3:16
Okay, tongue twisters aside, moving on.
3:19
Let's right-click on our canvas
in the hierarchy and go back to UI.
3:22
You'll see all of these awesome options
that we have that the player can see
3:26
and even interact with.
3:29
What we want for our score display is
text, so let's select Text, TextMeshPro.
3:31
We're going to get this pop-up saying we need to
import the TextMeshPro essentials.
3:37
This is necessary to add to our project
to use this feature, so let's click
3:41
Import TMP Essentials.
3:45
Optionally, you can also import
3:49
the examples and extras
for a few more fonts and features.
3:51
I'll add this as well.
3:54
Now we have a text
4:00
object in our canvas
and a TextMeshPro folder in our assets,
4:01
which contains the contents
that we just imported.
4:05
Let's rename this to Score Text
4:09
and take a look at its properties.
4:11
We can see
instead of a traditional transform
4:15
we get a rect transform,
which has some different options.
4:17
Since screen sizes may vary
from player to player, we get an option
4:21
to anchor objects to areas of the screen
so that it can translate accordingly.
4:25
Let's click this box right here.
4:30
Here we can visually set the anchors,
pivots, and positions.
4:33
It's currently showing the anchor presets.
4:37
If we hold shift, we'll see
pivot point presets,
4:40
and finally if we hold shift
and alt or option together
4:43
we see both those and position presets.
4:47
There's lots of cool options here
but I want my score to be at the
4:50
top left of the screen and since the score
value may get really long
4:53
if the player has a good run
I want it to be able to have enough space,
4:57
so I'm going to select this top
horizontal stretch option here.
5:01
I'm going to select the Rect tool
with T and stretch
5:05
down this object's height a bit as well.
5:08
Down here we have this text box,
5:14
which is where we can type
what we want written on the screen.
5:16
So for our default,
let's write score colon zero.
5:20
Below are
5:24
all of your typical text
editing options, like font,
5:25
font style, size, color, and alignment.
5:28
I'll select this bangers font, which came
with the examples and extras we imported.
5:32
And I'm going to increase the font size
to about 75.
5:37
I'll center
5:44
align the text vertically within its box,
and I want a little space away
5:44
from the left side of the screen,
so let's expand this extra settings
5:48
here.
5:52
I'm going to add 50 pixels of left margin.
5:58
Nice.
6:04
Further down,
we have some other fun options.
6:09
I'm going to give it an outline,
leave it black,
6:12
and give the thickness a value.
6:15
I like point three.
6:18
This will help the player
be able to read it if it's over a lighter
6:19
background.
6:22
Please feel free to play around with
any of these settings and get creative.
6:23
Let me
just click play and see how it looks.
6:29
Awesome!
6:33
The positioning looks great to me.
6:34
Now we need a way to change the text
in our code.
6:36
Let's head back into our GameManager
script.
6:39
We're going to need a reference
to this text object, so let's create
6:46
a serialized field so that we can drag
and drop it with ease in the inspector.
6:49
If we start typing TextMeshPro,
6:57
you'll see this TextMeshProUGUI option,
coming from the TMPro namespace.
6:59
If I select that, my IDE
7:05
will automatically add
a using directive for this namespace.
7:07
If that didn't happen for you
be sure to add using TMPro up top
7:10
spelled just this. Let's give this variable
7:15
the name of scoreText.
7:18
Now, instead of logging this to
the console, let's update the UI.
7:22
We do this by typing our
7:32
variable name, dot,
and the property we need to get is text.
7:33
This represents that text box
that we edited before.
7:38
With this, we can just provide a string
of what we want it to say.
7:42
And we could use string concatenation
like this, but in my opinion,
7:46
this looks messy, especially when adding
multiple values to a string,
7:49
so I wanted to show you
string interpolation instead.
7:53
We start with a dollar sign
before our quotes.
7:57
We'll write score,
8:01
colon, and a space,
and now we can just plug
8:03
our variable straight
in by wrapping it within curly braces.
8:05
Cool.
8:11
Let's save this and check it out.
8:12
Now I'm going to introduce
8:15
an error here on purpose
because I want to show it to you.
8:16
It's likely the most common error
you'll see.
8:19
I'm going to click play and as soon as
I make it through some pipes,
8:22
there we go, we get this error.
8:28
Null Reference Exception
8:33
Object reference
not set to an instance of an object.
8:35
It also tells us the script, method,
8:39
and line of our code that it ran into
this issue. We can even double-click
8:41
this error and it'll open the script
and move our cursor right to that line.
8:45
This is my most common issue when setting
references in the Unity Editor
8:50
and it happens because I forget to drag
8:54
and drop our game object
into the script component. So let's click
8:56
on our GameManager object and we'll see
our score text is empty still.
9:00
So when we hit the trigger
and tried to run that method,
9:04
it didn't understand what score text was
and what we were talking about.
9:07
Let's click and drag
our score text object in and play again.
9:11
It's working!
9:23
I'm going to change the player's force
amount to 6,
9:28
as I'm kind of struggling
with this much force currently.
9:30
Nice job making it through this
lengthy lesson.
9:39
I'll see you in the next one.
9:41
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up