Unity UI

Hello guys, this is Vivek Sharma and welcome to yet another episode of this game development

series on C Sharp Content.com. So in this video, we will be learning about Unity's UI components, we will be using text

component, a button component, we will learn how to create a pause screen in a game and

we will learn about time scale. So without wasting any further time, let's get started

So, in Unity, all of the UI components resides inside a canvas

To create a canvas, first of all, right click in the Hierarchy panel, go to UI and select canvas

Now to begin with, we will be creating a new text component inside the canvas

To do that, right click on the canvas, go to UI and select text

You can change the properties of the text by going to the Inspector panel

From here, I will be changing its color to white, I will change the text to score, I

will change its alignment, I will move it to the top right corner, I will increase its

size and then I will increase its font size. Okay so now to change the score value at runtime, we will go to the dino script and over here

we are going to use a namespace called UnityEngine.UI. This is the namespace using which we will be able to access all of the UI components

through this script. First of all, I will be creating a new public variable of data type text and I will be calling

it score text. Also I will be creating a new public variable of data type integer and I will call it score

Now I want to keep on incrementing the score every time. So I will be writing the code for that inside the update method

So what I'm gonna do over here is I'm going to increment the value of score on each and

every frame update and then assign the value of that update score to the text we just created

To do that we will write score text dot text equal to score and score is integer value So we will have to convert it to a string because text only takes a string value So to do that we will write to string Now we will get back to unity and over here inside the dino script you can see we have got an exposed field for the score text

We will drag the text from the hierarchy panel to this exposed field and hit play

And as we can see the score is getting incremented. But there is a problem

Even when our dinosaur have died the score is getting incremented. To fix that, let's get back to DinoScript

Over here we will make a check that if our dinosaur is not dead, only then we have to

increment the score. To do that we will be creating a new variable of boolean data type and call it isDead

Now whenever our dinosaur gets scaled, we are going to change the value of isDead equal

to true. And inside update, I am gonna check if the dinosaur is not dead, only then increase the

score and show the updated value of the score. Let's get back to Unity

Hit play. And as we can see, our score stopped changing as the dinosaur died

Now let's create a pause system for our game. To do that, right click on the canvas and create an empty game object

Rename it as pause menu. Now inside pause menu, create an image

This will work as our pause menu's background image. Let's quickly change its size so that it covers the full screen

From the inspector panel, let's change its color. create a button in our pause menu let's increase the size of our button a little bit let's change

the buttons text to resume increase the font size and let's rename our button object to resume button

let's quickly rename the background image fold the pause menu and disable it by clicking on this

checkbox now again go back to canvas and create a new button now again let's change the size of

of this button and move it to the top left corner of the canvas. Also we will be changing the text we will be increasing the font size and we will be renaming our button as pause button Now what we want to achieve is to show the pause menu whenever we click the pause button and to hide the pause menu whenever we click on the resume button

To do that let's go to the scripts folder, create a new script and call it pause script

and double click on it to open it up. Inside the pause script we are going to remove the start and update method and we are going

to create two custom functions one is pause game another one is resume game

now we will have to get reference to the pause menu to do that we will be

creating a public variable of data type game object and we will be calling it

pause menu now inside the pause game function we will be writing pause menu

dot set active equal to true to show it and inside the resume game we will be

writing pause menu dot set active false to hide it again now what we want to do

is we want to call these two functions by clicking on those two buttons we just created

To do that let's get back to Unity, click on Canvas, click on the add component and add

the pause script. Over here we have an exposed field for pause menu

So we will drag the pause menu game object from Hierarchy to this exposed field and now

we will be adding the functions we just created to our these two buttons

To do that, let's click on the pause button, go to the inspector panel, scroll down and

over here, as you can see there is an area to add functions on the on click event

Now to add a function, click on the plus button, drag the game object which contains the script

having those functions. To this exposed field, click on this no function button, select your script name, in our case

it's pause script and then select the function you want to call, in our case it's pause

game function. And that's it. We have successfully attached that function to this button. Now

similarly let attach the resume game function to our resume button Now let hit play and see what happens Now when we click on the pause button the pause screen shows up and when we click on the resume button the pause screen hides But the game doesn get paused at all So to do that let get back to our script And now we will be using

a concept of time scale. Time scale is a scale by virtue of which the time increments. Over

here, if we set time.timescale equal to 0, that will completely stop the time. And if

we write time.Timescale equal to 1 that means the time is running at its original speed

Now this should work and we should be able to pause our game properly

Let's get back to Unity and hit play again. So now as we can see the game is getting paused properly but the score is still getting incremented

So to fix that let's go to the dino script and over here create a variable of data type

boolean and call it isPauseed. So over here we are going to make a check that if the game is paused then the score

should not get incremented. Now let's go to our pause script. From here we will be changing the value of isPause to true and false

To do that first of all we will have to get reference to the dino script

To do that we will write public dino script and give it a name

Let's call it the dino script for now. And now we can easily assess the isPause value

To do that, we just have to write the dynoscript.isPauseed equal to true and the dynoscript.isPauseed

equal to false. Now let's get back to Unity, click on canvas and inside the pause script, we have got an

exposed field for the dynoscript. Let's drag the dynoscript from the dynoplayer to this exposed field and then hit play

And now as we can see, our pause system is working exactly how we expected it to work

So this is it for this video, in the next video we will learn about scene management

and we will be creating a restart menu for our game. Till then goodbye, have fun and don't forget to follow and subscribe because the best is

yet to come