With our core gameplay now pretty much finished, it's time to start thinking about the other menus
that we're going to add to our game.
And if you remember, way back when we were designing this game, we said we were going to want two
other scenes.
We wanted a main menu at the start of the game and a game over screen at the end.
So this is what we're going to start building in this lecture, and we're going to mainly be focusing
on the UI for now.
But in the next lecture we're going to start hooking all of these up.
So let's have a quick look through the flow now so we know what we're working towards.
When the game starts, the player is going to be presented with the main menu screen, so it's got the
game title and a couple of buttons.
If they hit the quit button, then the game should just exit nicely and if they hit the start button,
then it's going to transition into our core game.
Our core game will then proceed as we rack up some score and deplete our health.
And when the health reaches zero, we then want to transition into the game over screen.
This game over screen looks very similar to our main menu and that's partly by design.
But the big difference with this screen is it's also going to show the player their final score.
So we are going to need a way to bring our score from our game over into this screen.
And then for our buttons we've got a play again button which will launch us back into the game.
So we get a nice loop here between our game and our game over screen.
And finally we have a main menu button which will take the player back to the main menu screen where
they can either start the game again and go the long way round our loop or quit out of the game entirely.
So that's roughly what we're looking to build.
So let's jump into unity and start work on our new UI.
And for these two menus, we're actually going to be placing them in new scenes in our game.
So let's jump over into our scenes folder.
And we've currently got our sample scene because we never bothered to rename it when we started our
project.
So before we do anything, let's rename that to something a bit more descriptive.
We might go with, say level one or I'm just going to go with game.
And before we create a new scene and move over to that, let's also think about what's useful in this
scene that we might want to reuse for the others.
So let's jump into our prefabs folder and all of our prefabs at the moment are mostly useless for our
menu systems, but if we look through our hierarchy then the background is probably going to be useful.
So let's drag that down.
We also have an audio player in here and we're probably going to want music in our other menus, so
let's drag that in as well.
And finally, we did say that we wanted to bring our score from our game into our end screen.
And whilst our scorekeeper doesn't do that yet, it will do later on.
So let's prefab our scorekeeper as well with our prefabs.
All set.
Let's go down back into our scenes folder and to create a new scene for our project, let's right click,
go up to create and then down to sing.
Let's give our scene a name.
So let's start with the main menu and now we can go ahead and open that up.
We're getting a warning message because we didn't save our game before changing.
So let's save our current game and then move over into our main menu.
And this presents us with the ever so dreadful blank unity canvas.
So to make it pretty right off the bat, let's jump into our prefabs.
Let's drag over our background and our audio player.
We don't want the audio player interfering with what we're doing though, so let's switch our music
off for now and then let's go ahead and create our new canvas.
So let's right click in the hierarchy, go down to UI and then add a canvas.
This brings in our event system for free.
But remember, we do have to change our standalone input module so that it works with the new unity
input system.
So let's replace that.
And because we've seen UI quite a bit now this again is going to be a challenge for you to design and
create our UI.
But before we go ahead and do that, there is a couple of things I'm going to be doing with my UI that
I want to show you so that you have the option to do it as well.
And the big changes come with our buttons.
So let's right click on our canvas, go down to UI and add a button.
And if we scroll down to our button component, this time, we are going to leave our transition as
a colored tint.
So let me explain what all of these color options are going to do for us.
Let's start by going to our image component and changing the base color for our button.
So let's create a kind of dusty red color.
And now if we go ahead and hit play so we can see all of these in runtime, first of all, we have the
normal color, and if the normal color is set to white, then the image color will take precedence.
But we can also blend these colors by opening up our color picker so we can see if we pick a minty green
color for our normal color, then we get this muddy ready green kind of color for our button.
Next up, we have the highlight color and this effect, what happens when the button is hovered over.
So let's create a nice, bright orange color.
And now if we hover over our button, it will make a blend between this yellow and red we've got.
But now we've got an idea of how this colour blending thing works.
Let's actually set our image colour back to pure white so we can see our colours in our button component
unhindered, as it were.
We can see that this has changed our button to our normal colour of this minty green colour.
If we hover over our button, it goes to our yellow and our pressed colour does exactly what you think.
When we press the button it will change to this colour.
So let's pick a nice, vibrant blue for this.
And now we can hover over our button to get our yellow.
We can press our button and it will turn blue.
This is where our selected colour comes in.
So let's change our selected colour to a purple.
And now if we click back into our same view, we have our normal colour highlight in orange, click
in blue.
And now if we move away from our button to get rid of that highlight colour, we can see the button
is currently selected in a very bright purple.
Finally in our list we have the disabled colour.
This is currently set to a mid transparent grey and this is the colour that gets selected when we turn
our interactive flag off.
So setting up these colour tint options can be very important because it will allow the player to know
what they've hovered over, what they've currently clicked on, and if things in the game are working
as expected.
So let's come out of play mode and I'm going to delete the button that I've completely ruined.
And now I think it's time for your challenge.
I want you to go ahead and create a new menu scene if you haven't already, and then design the UI for
our main menu.
And then once you've got everything looking exactly how you want, I then want you to go ahead and create
a new game over scene and again design the UI for the game over menu.
Now as a couple of hints, you may want to create some new font assets so that you can have different
styles of text in your game.
So if you want to differentiate between a title and subtitle, for instance, these will require two
font assets, but they can of course use the same font underneath.
And because our main menu and game over are so similar, don't be afraid to duplicate one scene to start
working on the next.
So pause the video now and give that a go.
Okay.
Welcome back.
So hopefully you now have two beautiful looking menus.
Here's mine.
All finished up.
So let me walk you through what I've done to create this.
First of all, you'll notice that the stars are moving a lot slower in the background.
So all I did to change this was go into the background in the hierarchy, and then under each of our
layers, I've just gone down to our sprite scroller and slowed these down.
And I did this because at the default speed, they were just a little bit too quick and quite disorientating
for a menu system.
Then over on the canvas, I've set up my canvas scaler to scale with the screen size and given that
a nice reference resolution.
And then inside of this we've got the title text where I've created a brand new font asset using the
same Kenny space font.
But for this one, I've gone ahead and changed the vertex color and I've changed this to horizontal
gradient to give me a nice two toned purple effect.
And if we look down in the extra settings, then the face and outline are the same as default.
But I've added some underlay with a negative y offset to give me this three dimensional look.
I've also added a little bit of glow to make it pop, and if we enable and disable these two options,
you'll see the effects that they have.
So our underlay is giving us that three dimensional feel and the glow is just brightening up those colours
a bit.
Under my title I've added a subtitle.
This one is reusing the same Kenny font from our game view for our score.
All I've done is renamed it to Main Kenny to differentiate it from our title Kenny Font and I've stored
both of these for reference in my asset pack under the Kenny Space font.
So here you can see both of my font assets.
Then for my buttons, I've placed these in a button group, so I've just created an empty game object
and then added a vertical layout group for spacing.
I've picked a spacing of around 25 and then rather than resizing the buttons manually, I've used this
control child size option for the width and height.
This will force the buttons to fill the space of this game object.
So if we change the size of this box, then the buttons will always try and completely fill it.
If we open up this group so we can see the buttons themselves, I've got a start button and a quick
button and underneath these they have the text message pro elements for the text.
This again is copying exactly the same main Kenny font that we've been using.
But on the buttons themselves, if we look at the button component, then I've added some highlighting
colours and some pressed colours.
So when we highlight a button it will turn purple and when we press on a button it will go blue.
So that's my main menu scene.
And then for my end screen, once I'd finished this and saved everything in my scene, I went over to
my scenes folder.
I duplicated my main menu with Control D renamed that scene to game over and if we open it up, really
all I've done is change the title text to game over and the subtitle text to Better Luck Next Time.
And then I've moved this up slightly to make way for my score.
So if we look under the canvas again, I've now got this score text as well.
And again, this is just reusing our main Kenny space font assets.
So if we play this scene, we can see the stars are still scrolling nice and slow and the buttons are
highlighting nicely.
So congratulations for making your main menu and your game over screen.
And in the next lecture we're going to start looking at how to connect these buttons up and link scenes
together.
So I'll see you there.