In this video we're going to add some
user interface elements to our game
including title cards for when we start and change levels
and some text to reflect player's score.
To do this we're going to use Unity's UI system.
We're going to go to Game Object - UI - Canvas.
The canvas is going to hold all of our
user interface elements.
The first element that we're going to create is
going to be an image which we're going to use
as a background for our title cards.
Let's go to Game Object - UI - Image.
Notice that it's created as a child of the canvas
and the first thing that we're going to do
is switch over to our scene view and zoom out.
And we're going to use the anchor presets here
to stretch this to fit by option-clicking.
We're also going to set the colour to black.
We'll call this Level Image.
Next we're going to create a text object
that is going to display what level
the player is currently on
as we start and change levels.
Let's highlight our level image
Game Object - UI - Text.
We'll call this Level Text.
The first thing that we're going to do is anchor it to
the centre of the screen, we'll click on our anchor presets
and option or alt click the centre preset.
Next we'll set the colour of our text
to white by clicking on Colour
and then dragging it to white.
We'll set out font size to 32.
Notice that went we do this the text disappears.
That's because the text has become too
big to fit within the width and
hight dimensions specified in the rect transform.
Because we're going to have text that's going to vary
in size displaying both our level number and our game over message
we're going to use the horizontal and vertical
overflows to allow the text to overflow.
We're going to set horizontal overflow to overflow
and vertical overflow to overflow as well.
Now our text reappears, we're also going to centre
and middle align it.
Let's set the font by clicking on the asset picker.
And selecting Press Start
to play a regular.
This font ships with the project.
Finally we'll set our text default, which is going to be Day 1.
And so that should be good for the level text.
We're going to make a it child of our level image
so that when we deactivate the image
the level text will be deactivated as well.
Next we're going to create our food text display.
Highlight the canvas,
choose Game Object - UI - text.
This text we're going to align to the bottom
of the screen in the centre.
Let's click on our anchor presets
and click the bottom centre preset
while holding down the option or alt keys.
Again we'll set the colour to white.
Click Colour, drag to white.
We're going to set the size to 24.
Centre and middle align
and we'll set our text to Food 100.
We'll set our font
to PressStart2P-Regular
Notice again that the text is being cut off.
We'll set our horizontal
and vertical overflows to Overflow.
Let's label our text FoodText
and what we can see here is that the food text
is being displayed in front of our title card image.
We don't want this to happen so what we're going to do
is move FoodText up in the hierarchy
so it's directly under the canvas.
This means the it will be rendered behind
the LevelImage and it's child LevelText.
The last thing that we want to do is
let's temporarily deactivate the LevelImage
and we're going to move our FoodText up
just a little bit from the bottom.
We're going to do this by setting the anchors.
We're going to set the Y anchor to 0.05.
We can see that it moves in the UI
and we're going to set the Max to 0.05 as well.
Notice that the text hasn't moved when we've done this.
But a -13 pixel offset has been incurred in the rect transform.
Let's now set the position Y to 0
and we'll see our text move up.
Let's reactivate our LevelImage
and then we can get in to some scripting
to control these UI elements.
Let's go to our Scripts folder
and open our Game Manager in Monodevelop.
Next we're going to add the code that we need
to our Game MAnager to manage our UI
and also to handle transitions between levels.
Let's reset our private integer level to 1
so that we start on level 1 now.
The first thing that we're going to add to our Game Manager script
is the namespace declaration using UnityEngine.UI.
Next we're going to add a public float
variable called levelStartDelay.
This is going to be the time to wait before
starting levels, in seconds.
Next we're going to add a private variable
of the type Text called levelText.
This is going to be the text that is going to display
the current level number which we've currently got set
to day 1 in the editor.
We're also going to declare a private variable
of the type GameObject called levelImage.
We're going to use this to store a reference to our level image
so that we can activate it and deactivate it
as we want to show and hide it.
We're also going to add a private boolean
called doingSetup which we're going to use to
check if we're setting up the board and prevent
the player from moving during setup.
After awake we're going to add
a new private function that returns void
called OnLevelWasLoaded which takes an integer
parameter called index.
OnLevelWasLoaded is part of the Unity API
and it's called every time a scene is loaded.
We're going to use this to add to our level number
and to call our InitGame function
after a new level has been loaded.
We're going to use InitGame to manage
our UI elements and setup each level.
We're going to start by setting our doingSetup boolean to true.
This means the player won't be able to move while
the title card is up.
Next we're going to get a reference
to our LevelImage object
using GameObject.Find.
Here we're finding by name so you want
to make sure that your game object name
in the editor matches the string that we're using
with GameObject.Find.
We're going to do the same thing for our LevelText
but we're also going to get a component reference
to the text component.
Next we're going to set the text of
our LevelText to our current level number.
The text that we're setting is going to be a string so
we're going to provide Day with a
space and then we're going to append
our level integer at the end,
so in this case it'll read 'Day 1'.
We're going to activate our LevelImage
game object using SetActive.
Next we're going to declare a private function
that returns void called HideLevelImage.
We're going to use this to turn off our LevelImage
when we're ready to start the level and we're going to
invoke it from within InitGame.
Inside HideLevelImage we're going to turn off
our LevelImage.
And we're also going to set DoingSetup
to false so that the player can now move.
Back in InitGame we're going to
invoke HideLevelImage
parsing in LevelStartDelay as our delay time.
This means that once we've displayed our title card
we're going to wait 2 seconds before turning it off.
In update we're going to add a
check for DoingSetup to our If statement.
This is what's going to prevent the player from moving
if DoingSetup is true.
In GameOver we're going to show a message to the player
saying how many days they've survived for.
The message is going to read
'After level number of days you starved'.
We're also going to enable our black background.
Lets save our script and return to the editor.
The next thing that we need to do is add a few
lines of code to our Player
so that our player can update the FoodText
as the value changes.
Let's open our Player in Monodevelop
In Player we're also going to add the namespace
declaration using UnityEngine.UI.
Next we're going to add a public variable
of the type Text called foodText.
In start we're going to set the value
of foodText to the current Food score.
In AttemptMove we're going to do the same thing
after we've subtracted from the player's food points score.
We're also going to display a message
when the player picks up a food object
or a soda object.
So when the player picks up a food object
we're going to display + pointsPerFood
along with their current food points.
We're going to do the same thing for soda.
In loseFood we're going to display a similar
message showing how many food points
the player lost when they were attacked.
Let's save our script and return to the editor.
In the editor we need to assign a reference
to our FoodText object to our player.
Let's choose Player
and then we're going to drag in FoodText
to our FoodText variable slot.
Let's play our scene and give it a try.
So we see our title card displays, that's working.
When we move our Food text updates.
We get our delay before moving to a new level.
Title card displays with the updated level number.
When we're attacked by our enemy
we see our -10 message.
And so it looks like everything is working.
Now that we've got our UI elements working
In the next video we're going to add
some sound effects and music
along with the scripts that we need to control them.