Hello guys.
Welcome to the video.
In this one I'm going to show you how to set up rest of the UI.
We have a skin selection.
We have level selection.
And also we have settings.
And we need to set up all of that.
There are some special features that we're going to implement.
So I hope you like it really because I did spend some time to make it work.
Let me switch off main menu.
Let me switch on skin selection and let me tell you what I want to do.
So over here we have select button and back button.
What I want to do is to make navigation between these two buttons only when you're using up and down,
but when you press on left or right, I just want to switch skin left or right.
I don't want to force player to select the button with a gamepad, and then click submit button again
just to switch to next skin.
Yeah, it's going to be not that difficult to do.
So let's begin.
First of all, we want to find the first selected for this object over here.
We could do it just like we did with the UI difficulty.
Or we could do it by just dragging script over here.
Update update first selected.
And let's go inside of the script and let's do it there.
Okay, let's go all the way above.
Let's make serialize field private.
Uh.
First selected.
Sorry, this should be GameObject.
GameObject.
First selected.
Nice.
Now we need an enable method.
I'm going to make it here on enable and on enable over here we're just going to do the very same thing
that we did on difficulty manager.
So I'm going to go to difficulty manager.
And I'm going to take.
Sorry.
Not difficulty.
Manager UI difficulty.
Okay.
I'm going to take these two.
I'm going to copy it, and I'm going to go back to UI skin selection and paste it in here.
And over here we have main menu UI.
So we can just use main menu UI variable, but on enable is called before start.
It's usually awake on enable start.
So we're going to change this to awake.
And in this way we'll have access to component when we use it.
Nice.
Now the next step would be to use navigation for switching those skins.
Uh, on default input.
And we have a vector tool.
Let me go to default input actions.
And over here we have navigation.
And this one returns vector two so we can use it.
Let's go back.
Now let's make.
Let's do a space here and then let's do private default input actions.
Default input.
And then I'm going to go ahead to on enable over here I'm going to do default input enable.
Enable.
Very nice.
And now I can use this default input.
And on the next line we can just do default input.
Uh, UI.
Navigation performed and we're going to do classical ctex lambda expression.
And over here, instead of a method, we can open curly brackets and write functionality inside of curly
brackets.
And every time navigation is performed, it's basically going to do anything that is in curly brackets,
very similar to using a method, but just without the method itself.
So what we're going to do here, we're going to check if context uh read value vector two.
Is.
Less or equals to minus one, then we use an left key and we can.
Call previous skin method if context read value of vector two.
On the x is bigger or equals to one, then next scheme.
Just like that.
And it's going to work.
And let's save this.
I'm going to close all by this, and we're going to go ahead and test it.
And I should let you know that they're going to be a couple of bugs, but we're going to easily fix
them.
Now let me assign first selected to select button.
And I want to try to navigate to Skin Selection from main menu with gamepad, just to check if everything
is working.
So a new game.
Normal mode skin selection.
I see some error in the console.
Let me check.
Default input cannot be enabled.
Um, not set to an instance of an object.
Okay.
It means we have a variable, but we did not assign it and it's empty.
Let's go to awake and let's make a new instance of this.
And I'm doing this for a reason.
Uh, we do a new instance of default input action because we want it to work only inside of skin selection
UI.
We could theoretically take the default input from the main menu over here, but it's better to have
a new instance for this, because in that way it can be used only inside of this script.
And also we can disable it here without affecting input of the main menu, which is really convenient
for us.
Okay.
So let's go again and let's try this.
All right, new game, normal mode and skin selection is selected.
And I can go left right and choose the skin.
Very nice.
The issue there is that you can use it with a keyboard.
You can use it with buttons on a gamepad.
But if you use an analog stick, the left stick, it goes wild like that.
So that's the problem.
It's very easy to fix.
Let's just do it now.
Oh, sorry.
There is one more bug that I need to show you.
And also the reason why we did, uh, new instance of default input.
You can select the skin, but when you go to next UI, you can still switch them.
So we need to disable input from skin selection to avoid that.
Let's go to the script.
Let's make.
On disable.
And we're going to do default input disable.
So that's gonna fix it.
Very nice.
Now let's go and make cool down for the input so we cannot switch them so fast.
Hmm.
Possibly.
Here I'm going to do space and then I'm going to do serialized field, private float input.
Cool down.
I'm going to make it 0.1 F by default.
And also I'm going to do private float last time input.
Very cool.
Let's go inside of previous skin method.
Inside of this method we're going to do last time input equals to time dot time.
And we need to duplicate this.
Cut it out.
Go to Next skin and paste it in here as well.
All right, now we can go back.
To on enable.
And over here we're going to check if time dot time minus last input time is less than input cooldown
then return and this one will not allow us to update the skin.
If we are still on cooldown.
Because of that, it's going to switch it much slower.
Yeah.
Now let's go there.
A new game.
Normal.
I can go left and right to switch the skin.
And it's working okay, and I can accept the speed.
I think it's pretty much okay, I like it.
You can do it slowly as well just by using stick only once.
Good.
Now next issue.
Here you can see I'm using stick.
And you can see I'm selecting those buttons.
If I use stick twice or three times then I'm not even selecting anything and we don't know what is selected.
Uh, we need to disable main menu and enable skin selection.
And over here we have skin price and food bank.
And for some reason these two have an A button component which we really don't need here.
So I'm going to remove it.
Now, these two does not participate in the navigation system.
And also we need to take this next skin and previous skin.
Choose navigation.
None.
So now this cannot be part of navigation and these two cannot be selected, which is just what we need.
The select button and back button.
Should be explicit because I want to do the cycle selection as well.
So for the select button.
The back button going to be up and back button going to be down or back button.
Select button going to be up.
And select.
But I'm going to be down.
Okay, so this should work, I think I like it now let's switch it off.
Let's go to main menu and let's double check everything.
And I think we're going to wrap this up and level selection we're going to do in the next video.
So I can go to new game normal mode I'm using gamepad right now.
I can switch skins.
I don't have a price above this one because I bought it before.
And I can select or I can go back and I'm going to do select and I'm in the level selection and I cannot
switch anything here.
Okay.
Perfect.
Should we do other UIs now.
Okay.
Let's do it now.
Let's go and enable level selection.
And over here we really have only back button and level buttons.
First of all, let's delete this level button from the content.
It's disabled, so we don't really need it and we have it as a prefab.
We need to overwrite, do we need to overwrite it?
I'm not sure.
Let me double check.
UI level button.
What is the difference?
Maybe color.
Maybe I did change the color.
So I'm going to do apply it.
It's okay.
And let me delete it okay good.
Now what we're going to do is go to UI level selection.
Uh, we're going to make on enable method.
On enable.
And inside of this method we're going to enable first selected.
So I'm going to do serialized field private GameObject.
First selected.
And I feel a bit lazy, so I'm going to go to skin selection.
And I'm going to copy these two from here and go to Level selection.
Also, now I start to think that it's better to have just one method update last selected and call it
every time.
And this would be just inside of this method.
Yeah.
Could be cleaner.
Maybe I'll do it on the clean up video.
Let's not worry about that right now so we can see we need main menu.
But it happens that we need this main menu only once.
In uh, on enable method.
So we have two options.
One of them is just to get component here on enable.
Another option is to turn start into awake.
And I think I'm going to do that because we need to do something else in the awake later on.
So now we have awake on enable.
And I'm going to make a variable private main menu main menu UI.
This is working.
And actually I don't want to have first selected button as back button.
I want to have it selected just in case.
But if no, I'm going to select the first level button that we have in that content window.
So let's do GameObject first.
First level button and it's going to be equal to buttons parent.
Get child with a zero index, which basically gets the first child dot.
Game object.
Just like that.
And then if first level button not equals to null, then event system current set selected GameObject
to first level button.
Else select the first selected.
And here we can see a reason why we did not move this line of code inside of this method.
Okay.
This supposed to work?
I like it, and let's save this.
Let's go to UI settings.
Oh before we go to UI settings, let's, uh.
Let's duplicate this two.
Let's go to UI settings.
And let's go to honorable method over here.
Let's place it here.
And we need first selected GameObject.
I'm going to do a sterilized field.
Private first.
About GameObject first selected.
Then we need to go.
Over here.
We need to get component of the main menu.
But here we can do just.
Yet component in parent of UI Maine.
Menu.
Just like that.
All righty.
That's what we need.
Now let's close it.
Let's go ahead and assign first selected as a back button.
And we're going to go ahead and try to go to level selection.
Now none of the menus are enabled.
That is my mistake.
Let's enable main menu and let's go.
A new game.
Normal.
Select.
There is no buttons.
Why?
There is no buttons.
There is a.
Okay, I forgot to get component.
Main menu UI equals two getcomponent in parent.
Okey dokey.
Let's save this.
And let's go.
New game normal.
Select.
Why buttons are disabled.
Man.
What is.
Oh my God, I'm so sorry.
Because I did disable it on the prefab.
UI level button enable.
Okay, let's save this and let's try again for the fifth time.
New game Normal Select, and there is a level buttons that you can select with a gamepad.
Uh, you can select level two and you can play the game and you can go to pose.
And this is what we need to fix right now.
This should be pretty easy.
We need to go to event system and replace it.
So we need to update the input system.
Now we need to go to um UI in game.
We need to make a variable for first selected private GameObject.
First selected.
And then let's go to the place where we pose in the game.
Pause the game.
We're going to do, uh, event system.
Current set selected GameObject to first select it.
All right, I'm gonna save this.
Now let's go back.
We have event system should be working.
Also, we could just assign it here by default.
I guess it would work.
Uh, let's go to play mode.
Going to click pause.
And I think it is selected, but, um, we cannot see it.
Let's fix it.
Let's take these two buttons.
Let's find selected and let's make it red.
Also, let's make it not transparent by default, but transparent when it is normal.
Okay, let's go now.
An.
Is it selected?
I don't know, let me try to confirm.
I feel like it's not selected.
Why not?
Oh, because I did not assign resume.
Okay.
Let's go.
Can I click escape or select it?
Okay.
Works now.
Finally, uh, let's go ahead to these two buttons.
I'm going to enable pose UI.
Can I choose explicit navigation?
And let's drag resume button up.
Sorry menu button up and menu button down.
And for this one, resume button up and resume button down.
So now we can switch them in cycle.
I love it man.
Now we need to disable pose UI and we need to apply overrides.
Very good.
Now we need to go to other scenes and update the event system.
And UI in game will be updated through the prefab.
Event system replace and level for.
Event system replace okay.
Now let's go to main menu.
By the way this should be working on the on here as well because we have one giant button if you remember.
Let's replace it.
And let's just make button as a first selected.
We don't need any scripts here.
Now let's go to main menu and let's check how settings are working.
And we're done with the navigation okay.
Settings.
Nothing is selected for some reason.
Canvas settings.
Let's drag back button as the first selected.
And let's go.
Settings, and you can switch settings over here if you want.
And you can go back.
The only problem we cannot see when they are selected.
So let's go and fix it.
Or the sliders.
Let's do selected again something reddish, so it's really noticeable.
Settings.
Yay!
Okay.
I like it.
And this is so good.
It's like a real game.
Man.
Dude.
Okay.
I'm sorry it took so long, but you see, just lots of tedious work.
But now we know how it's working, and we have lots of good examples on how to set up different UIs.
Thank you so much for paying attention, and I'll see you in the next video.