Hello guys.
Welcome to the video.
In this one we're going to set up in game UI.
We only need to have couple of UI elements.
We just want to update the timer and fruit amount on the level and also how many fruits were collected.
So let's go to one of the levels so we can see how it's going to work.
And on the canvas we need to make UI and Text Mesh Pro.
Actually, let's make an image.
This one going to be, uh, timer UI.
And then as a child we're going to make UI Text Mesh Pro, this one going to be timer text.
We want to select the timer text.
Go over here and stretch it.
To the borders of the parent.
Now parent can control the size of the timer.
Text.
Very nice.
Now let's go and make it somewhat transparent and maybe bluish.
I think something like.
This.
I just want to see how it looks.
But later on we're going to make it fully transparent.
Now let's go to Font Asset and let's choose Minecraft SDF.
And also we want to make alignment in the center.
Uh, time are going to look something like this.
Let's say 34 seconds passed since the start of the game.
So we can make font size bigger.
Maybe 64 will work.
Yeah, but the overall size can be smaller.
Something like this should be okay.
Now we can see that text is not entirely in the center.
To fix it, we can take the text box over here and just slightly reduce the size on the Y.
Okay, this looks good.
Now let's take the timer UI, duplicate it, and let's rename this to fruits UI.
I'm going to move it above so I can see everything.
And this one will have information about fruits.
I'm assuming it's going to look something like this.
For example one out of six fruits on the level.
And we could add an icon over here.
So what I'm going to do is I'm going to make this a bit longer for the timer text.
I'm going to reduce it on the right.
So it's like this.
And let's add another UI element image.
I'm going to name it as, uh, Fruit Icon.
Now let's go to graphics item I'm sorry item Fruits.
And we're going to drag the apple icon over here.
Nice.
Now I think we should make it bigger.
And I guess 175 by 175 will be just fine.
Uh.
Now let's press W and move it over here.
Actually, I want to align it in the center and then move it to the right and a bit down like that.
Okay, okay.
Looks good.
Maybe it could be smaller.
Let me try 150 by 150.
Yeah, I like it.
Let it be like that.
Now we want to take both elements and make them transparent on the background.
If you want, you can keep the ground.
Why not?
And then I want to take the timer text.
Attach it to the top left corner.
Sorry.
Timer to the top right and fruits UI to the top left.
Now this looks good enough.
I just want to take these two elements.
And I want to move them down a little bit together like that should be fine, I like it.
Now we need a reference to this text and this text so we can update information on them.
We're going to go here.
And first of all, I want to make this fade effect as a get private set.
This will make it private so it cannot be edited outside of this script.
It cannot be changed, but it will make it public.
To get.
This means other scripts can read information of the fade effect.
They just cannot change it.
Basically, it's like doing read only set up for this variable.
From the outside of the script.
We can only read this information inside of the script.
We can edit this information and thanks to that it will not be visible over here in the inspector.
And still it will be available to other scripts.
Nice.
This is actually a good practice to do it like that.
Now we need serialize field, private text mesh, pro GUI, timer, text.
And also we want to have serialized field private text mesh Progue root text.
Now I want to make two public methods that we can call to update values on this text.
One of them will be public void update root UI.
And here we're going to pass int collected routes and int total fruits.
And then inside we're going to do route text dot text.
Equals to collected fruits plus slash in quotation marks.
Plus total fruits.
Nice.
And we need one more method.
Public void update timer UI.
And here we're going to just pass the float timer.
And then we're going to take timer text.
Dot text equals to timer.
And we're going to convert uh number to a text.
So we're going to do two string.
Nice.
Now let's go ahead and use these two methods.
And then I'm going to show you how to improve it a little bit more okay.
On the game manager whenever we pick up fruit we can open curly brackets here.
And we can do UI in game instance update route UI.
Then we're going to give it, uh, fruits collected and total fruits.
Nice.
We also want to call this method once when we collecting fruits info.
So I'm going to go here to the collect fruits info.
And I'm going to paste this line of code here.
All right.
Are we good with the fruits?
Now let's use the timer on the timer.
We just want to make a variable.
I'm going to make serialize field.
Private float.
Level timer.
And maybe let's put it into level management.
Why not?
And now we're going to go and open update.
And in the update we're going to do level timer equals to time dot time.
As you might remember, time to time returns time in seconds since the start of the application.
So let's just uh do UI in game dot instance, update timer UI.
And we're going to pass a level timer here.
And let's just see what is happening when we're doing it like that.
Let's go.
Uh, we have variables here.
We need to assign them timeaa text.
And this one is sorry.
Root text.
And fruit text.
Let's go to play mode.
Now we can see fruits are working fine and we can collect the fruits, so it's all good.
But we can see glitch with the timer over here.
That happens just because we take in the row number and passing it to the text to fix it.
To make it displayed only in seconds, we can go back to the UI in game, and over here in a parenthesis
we're going to type.
Quotation marks zero zero.
So this is the way of formatting the text.
And it's not like I magically know this info.
To be very honest, I never remember any of this.
And whenever I need to do some type of formatting for the text, I just basically look it up online
and then I use it.
Simple as that.
So I know that this one does the seconds right.
Then we can just do plus space S, so it's a bit prettier and more understandable.
And now let's go back and see this again.
And this works perfectly fine.
Now we can see only seconds and I like it a lot.
Now we need to go and set up these for other levels, and I think it would be better to go to Asset
Prefabs UI.
Let's rename this to UI in game and we're going to drag it here.
So wait a second, wait a second.
We need to take fade image and we need to put it all the way below.
Yeah.
Now we can drag it here as a prefab.
And then we can go to another scene.
Level two.
Let's save it.
It's okay.
Wait.
There is a null reference exception.
What's that?
Or it was before.
Okay.
Let's go to level two.
Save it and we can take.
Prefab UI UI in game.
Let's drag it here.
Now I can remove the canvas that I had here before and this will be just fine.
Now let's go to another scene.
Level three.
Um, prefab UI and I'm going to drag UI in game here and I'm going to delete the canvas.
Now it all should be good.
And also it will allow you to change something altogether on.
Now.
It should be good for all of the levels we have.
And also if you change something in one UI, you can just apply overrides and it's going to be fine
for all of the levels.
Let's go to level one and let's run the levels and see if it works just fine.
Now there is actually something that will be wrong with this, but I want to show it to you first.
So as you can see, we jumped to the next level and timer is the same as it was in the first level.
This happens because time to time shows you the time since start of the application, not since start
of the level.
So we need to go to the game manager.
And over here in the update, instead of doing equals time dot time we're going to do plus equals time
dot delta time.
You know that delta time returns interval in seconds from the last frame to the current one.
So basically this can be used as a timer for us.
Now since we use an UI in game a couple of times in this script I want to make a variable for this.
I'm going to do private UI in game UI in game UI like that, and then I'm going to go to the start.
And in the start I want to do in game UI equals to UI in game dot instance.
And we're doing this in the start, not in the awake, because we assign an instance in the awake.
Okay, now let's go here and change it to in game UI.
Over here as well in game UI.
And somewhere here we have it.
Yeah, in game UI.
Okay, this is good.
Let me save it and let's go and see the situation.
Right.
We're going to start the game.
I'm going to run a couple of levels.
We're going to see that we have pretty a nice UI that has most important information.
What what happened there.
Hey, man, what's up with you?
You are in game.
Do we not awake instance equals to this?
In game UI equals to UI in game instance.
Okay, I don't know what happened.
Let me try again.
What's wrong?
Oh, I know what's wrong.
We need to, uh, get in game UI before we collect fruits info, because collect fruit info gets in
game UI here.
So this one is supposed to be somewhere in the beginning like that.
Okay, let's save it and let's go back and try this again.
So as I was saying, we have nice and pretty UI that has most important information timer and fruits
collected.
I'm not going to make any health points because I'm planning to have fruits as my health.
And if you want to use health points, it's actually very easy to do.
You just need to deduct, you know, health points and not fruits.
But the logic will be pretty much the same as I will have with the fruits.
So yeah, if you want you can use health points.
Uh well that's good for this video and I'll see you in the next one.