[MUSIC]

Hopping around the playable area and collecting flies would be more meaningful

to the player if we showed them how many they've collected.

Let's do that by adding a score counter to the game.

Unity has a robust user interface system that allows us to create screen

overlays like score counters, menus, loading bars, and more.

The user interface elements,

or UI elements, are just like any other object in the hierarchy.

The difference is that they can exist in World Space,

just like other 3-D objects in the scene, or in Screen Space,

where they're an overlay on the screen, no matter how the camera is oriented.

Let's create the score counter now, so you can see what I mean.

In the Hierarchy window,

go to the Create Menu > UI > Text.

This will create a few game objects.

A Canvas with a child Text game object and an EventSystem.

The EventSystem is for more advanced UI input

when working with menus that require input from a mouse or from touch controls.

For this game, we will simply delete it.

Right-click on the EventSystem > Delete.

Let's click the Canvas game object first.

A Canvas is a game object with a Canvas component attached,

which helps to group and position UI elements.

We'll learn more about Unity's UI system in future lessons.

But one thing I want to draw your attention to now

is the Canvas component in the Inspector.

Here, you'll see a Render mode drop down with the choices

Screen Space- Overlay, Screen Space- Camera, and World Space.

For our game, we'll keep the default setting of Screen Space- Overlay,

since we want the score counter to always appear in the same place on the screen.

After all, it would be pretty distracting if the score counter moved

as the camera moved to follow our frog.

But you can also use this menu to tell the canvas to overlay elements

on the game camera to display a user interface that moves with the camera.

Or to make user interface elements exist in 3-D space with other game objects.

An example of World Space UI elements might be floating speech bubbles

that appear above a character's head In a role playing game.

Or in our game, perhaps we could add different colored flies that give you more

points, and the number of points could be displayed above each fly.

Just below the Render Mode drop down, check the box that says Pixel Perfect.

This option makes UI elements that include a lot of text align better with the pixels

of the screen, so that the edges of the letters appear sharp and easier to read.

Now, click the Text game object that's parented to the Canvas.

In the Inspector, rename this game object to Score.

Then turn your attention to the Text component.

Here we can modify elements of the text that you're probably familiar with from

other programs like word processors or graphic design programs.

You can change the font, the size of the text and, of course, the text itself.

Our text is actually being displayed on the screen, but it's very small.

We need to do a few things to make it stand out.

First, change the font size to a value of 80.

Then click the Color Picker and make the color

completely white, just by dragging this circle to the upper left corner.

And then close the Color Picker.

This will help the text contrast with the darker background.

Now turn your attention to the first component, the Rect Transform component.

The Rect Transform component shares some similarities to a transform.

But it's specifically designed for

anchoring UI elements to a particular areas of the Canvas.

You will use this component to make sure text

stays at a particular area of the screen, and will be in the correct

place on different screens with different resolutions and aspect ratios.

Our text needs to have a proper width and height.

And then we need to position it.

At the bottom of the Inspector,

there is a Layout Properties window with a lot of information inside of it.

This window displays the preferred width and

height of the text, based on our font size.

And the text we've typed inside of the text component.

Always set the width and height values of the Rect Transform component to be

slightly larger than the preferred width and preferred height values.

These values will give room for

text that changes as the game is played, like the numbers in a score counter.

So in the Rect Transform component,

set the width to a value of 400 and

set the height value to 300.

Now we can see the text.

And next we need to position the text properly.

Click on the illustration of a box with

red lines over it inside of the Rect Transform component.

This brings up the Anchor Presets window,

which lets us quickly set the anchor point of our Score element on the screen.

We want the Score element to be anchored to the upper right.

But in addition to the anchor point,

we also want it to be positioned in the upper right.

So with the Anchor Presets window open, hold down the Alt key on your

keyboard and then choose the box in the upper right

to move the anchor point and position the element.

This is almost what we want,

but we can tweak this to make it look a little better.

Click in any blank area to exit the Anchor Presets window.

And then in the Text component, change the horizontal alignment so

that the text is right aligned to its container.

Now, let's pick a font that's more suited to the playful nature of the game.

We could go to the Project window and

drag one of the included fonts over to the Font field.

But instead, I'd like to show you another way of searching for

files in your project.

Click on the small circle just to the right of the Font field.

This brings up an Asset Selection window, that only shows files

in our project that fit the type that the field is looking for.

This field is requesting a font.

So the window only shows fonts in our project and nothing else.

Double-click the Verela Round font to select it.

Finally, let's move the text so

that it's not right up against the edge of the screen.

In the Rect Transform component change the position X value to -220 so

that that text has a little bit of space.

We can use the text area in the Text component to get a preview of

what a score might look like.

I'll type 0 Flies as a placeholder.

The score counter looks nice, but it won't actually do anything yet.

In the next video, we'll write a script to

update the score counter as the player collects the pick up items.