2D Roguelike 12 of 14 : UI & Levels

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.