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
Let’s go down the UI rabbit hole a bit further and learn how we can create a Game Over menu with buttons the player can interact with, making a much nicer losing experience.
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
Alright, welcome back.
0:01
Let's expand
0:02
a bit further with this canvas and create
a nice and simple game over menu
0:03
to replace the automatic scene reloading
we currently have.
0:07
Let's start by right clicking on our
canvas and go up to UI and select Panel.
0:10
This creates an object with
an image property that covers the screen.
0:16
This will be the parent object
for our menu, so let's rename it
0:21
to Game Over Menu.
0:24
I'm going to change the color
to pure black,
0:31
and we can adjust this alpha property
to affect its opacity.
0:34
This will create a nice visual
for the player and still allow them
0:38
to see the game
and their score in the background.
0:41
Let's now right click on our game over
0:45
menu and create a UI button child object
0:47
and rename it Restart Button.
0:52
Here we have some options
for customizing our button,
0:56
like using an image and changing the colors.
0:59
Below, on the button component,
there are also color options
1:01
for the different states
the button can be in.
1:05
Normal, highlighted, pressed, etc.
1:07
They all come by default in varying
shades of gray,
1:10
which will overlay what we have set
as the primary color above.
1:13
So I'm going to adjust the color up here
to a nice green color.
1:17
Now if I play and hover over or click
the button,
1:28
you'll see its shade slightly change
for a nice and subtle visual.
1:31
It's a little small so it's probably
hard to see from my screen.
1:35
Again,
feel free to adjust these to your liking.
1:39
I encourage you
to play around with these things.
1:42
If you get to a point
where it's mangled beyond repair,
1:45
you can simply undo
or delete it and start fresh.
1:47
I'm going to select the Rect tool with T
1:51
and make it a bit
larger and zero out its position
1:53
again.
1:56
The text on the button
2:03
is provided as a child TextMeshPro object,
and we can adjust the settings
2:04
just as we did before with the score text.
2:08
I'll select the Banger's font,
2:12
change its text to Play Again,
2:17
and increase the font size.
2:19
Adding functionality
for buttons is quite simple.
2:24
If we click back to our button
2:27
and scroll the inspector down,
2:30
we see an On Click section here.
This is where we can assign
2:35
a method in our code to be called
when the button is clicked.
2:39
Keep in mind that the method in our code
needs to be public
2:43
in order to be selectable here.
2:46
Luckily, we've already done this
in our GameManager script.
2:48
Let's click
this plus icon to add an On Click event.
2:52
We can leave this option to
2:56
runtime only, meaning it'll trigger
when in play mode only.
2:57
And here's
where we click and drag a game object
3:01
that has the script attached
that we want to use a method from.
3:03
So let's click and drag our GameManager
object into it.
3:07
In this function dropdown,
we'll see our GameManager component,
3:12
and in there are some built-in options
3:15
on top of any public methods
we've written in that script.
3:17
Right here is ReloadScene,
so let's select that.
3:21
If we play test and click the button,
3:24
we'll see it's working.
3:30
Great!
3:31
Let's quickly create a quit button.
3:33
And you know what?
3:35
I think this is a great time
for a mini challenge for you.
3:36
Go ahead and pause this video
and create a quit button.
3:39
We don't have the method to call from
our script yet, so don't worry about that.
3:43
Just get a new button up,
3:46
adjust its size, color, and text
properties, and meet me back here.
3:48
Oh, and don't forget,
you can duplicate game objects.
3:52
Okay, go for it.
3:56
How'd you do?
3:59
Here's my solution.
4:00
I'm going to select this button object
and use Command or Control D
4:01
to duplicate it.
4:04
I'll rename it to Quit Button,
4:06
change its color to a red,
4:13
and adjust its Y position
4:19
to sit below the other.
4:20
I'll change its text to Quit as well.
4:23
Sweet!
4:29
Let's quickly make the method we need
to quit the game in our GameManager script
4:30
that will attach to this button.
4:34
This needs to be public
so that it's visible
4:44
in that On Click dropdown,
4:46
and let's name it QuitGame.
4:50
In the body, all we
need to write is Application.Quit.
4:52
This won't work in the Unity editor
but once the game is built out,
4:58
this will close the entire application
for the player.
5:01
Okay let's go attach this to our Quit button
5:05
We could remove this
one with the minus icon here,
5:13
but since it's from the same script,
5:16
I'm just going to select it
in the dropdown here.
5:18
Game Manager, Quit Game.
5:20
Great.
5:22
Now, of course, we don't want this menu
visible at all times.
5:24
We want to have it disabled initially and
enable it as soon as the player has lost.
5:27
Let's tackle that next.
5:31
So if we click on our game over menu
5:34
and look up near the name field,
we see this little checkbox.
5:37
If we uncheck it,
you'll see it disappears from our scene
5:42
and it and all of its children
objects are grayed out in the hierarchy.
5:45
This means these objects are disabled.
5:49
When a game object is disabled in Unity,
it becomes inactive in the scene,
5:52
meaning it
It will not update, render, or participate
5:56
in any game logic until it is re-enabled.
5:59
Now, we simply need to enable it
at the right time in our code.
6:02
Let's head back to the GameManager script.
6:06
We'll want a
6:13
serialized variable for this,
so serialized field,
6:14
private.
6:19
This will be of type GameObject,
and let's call
6:20
it GameOverMenu.
6:23
Let's create a new public method
6:31
and name it ShowGameOverMenu.
6:33
Inside we'll write out
6:44
our menu's variable and a dot.
6:45
And the method we want here is SetActive.
6:49
If we hover over it, we'll see it
6:56
activates or deactivates the game object
according to the boolean value we provide.
6:57
So it's expecting a value of true
or false.
7:02
We want to activate it,
so we'll pass in true.
7:05
Make sure you don't write this
in quotation marks.
7:09
That would make it a string.
7:11
We want this to be of type boolean.
7:12
Now we want this
method to get called any time
7:15
the player loses, which is the moment
they collide with a pipe.
7:17
So let's head over to the Player script.
7:20
Right here where we're
currently reloading the scene,
7:25
we want to change this
to our new ShowGameOverMenu method.
7:28
Then it'll be up to the player
to reload the scene with the button
7:31
that we created.
7:34
Okay, let's save both files and test this out.
7:38
Let's make sure
to populate this new variable
7:43
by dragging our menu into it
and ensure our game over
7:45
menu is disabled.
7:48
Great, it's working.
8:01
The issue now is the game continues
in the background,
8:03
allowing them to essentially never lose.
8:05
We need to freeze the game
as soon as this menu is enabled,
8:08
so let's add to our
ShowGameOverMenu method.
8:11
The way that we do
this is by accessing the Time
8:15
class and reassigning
a property named timeScale.
8:17
This represents the scale
at which time passes.
8:21
It takes a float value between 0 and 1,
8:25
0 being completely frozen and 1
being normal speed.
8:27
So let's set this equal to 0f.
8:31
Save and test it out.
8:35
Awesome!
8:44
But wait,
8:46
when we restarted the game,
nothing happens.
8:48
This is a sneaky issue of the the
timeScale persisting this value of zero.
8:51
See, time.timeScale is a static property
that affects
8:55
the entire application,
not just a specific scene.
8:59
Don't worry too
much about that static word.
9:03
That's outside the scope of this course.
9:05
All we need to know
is that as soon as the game starts,
9:07
we need to make sure that the timeScale
is set back to one.
9:10
And the Start method
sounds a perfect place to do so.
9:14
Let's add that in.
9:17
Cool, let's save and test again.
9:21
Fantastic!
9:39
We are masters of time!
9:40
This is working great
and this is a much nicer flow
9:42
for the player instead of automatically
forcing a scene reload on them.
9:44
Now they can relax, let someone else
sit down to try,
9:49
or even take note of the score
they got before starting over.
9:52
Nice work on this one.
9:55
Things are really taking shape!
9:57
I think it's finally time
to make this game look better.
9:59
What do you think?
Let's start that up in the next video.
10:02
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