WEBVTT

00:00.020 --> 00:00.470
Hello guys.

00:00.470 --> 00:01.520
Welcome to the video.

00:01.520 --> 00:05.900
In this one I'm going to show you how to switch between different sets of menu.

00:05.900 --> 00:06.470
As example.

00:06.470 --> 00:10.490
We're going to make a skin selection UI that we're going to use to.

00:11.330 --> 00:13.790
Uh, select different skins on the character.

00:13.790 --> 00:17.480
And in this video we're just going to make example of a UI.

00:17.480 --> 00:20.990
And we're going to make functionality so we can switch between these UIs.

00:21.020 --> 00:21.380
Okay.

00:21.380 --> 00:23.120
So what do we need here?

00:23.120 --> 00:27.050
I think we need some sort of a parent first.

00:27.050 --> 00:35.480
So let's make a parent for this new game button is going to be um main menu UI.

00:37.170 --> 00:41.070
Then I want to duplicate this and I'm going to name this as a.

00:42.170 --> 00:45.680
Skin selection UI.

00:45.860 --> 00:48.500
All right, now let me switch off the main menu.

00:48.500 --> 00:51.200
And on the skin selection we're going to need.

00:52.070 --> 00:53.240
Four buttons.

00:53.570 --> 00:55.970
So one of them going to be let me focus on this.

00:55.970 --> 01:00.410
One of them going to be select or by I'm going to call it select.

01:00.410 --> 01:04.040
For now this will have text of a select button.

01:05.100 --> 01:10.650
Now, we also supposed to be able to go back to the main menu if we decide not to select a skin or for

01:10.650 --> 01:11.370
any other reason.

01:11.370 --> 01:15.780
Maybe you clicked new game and you want to continue the game, so you have to go back.

01:16.340 --> 01:20.690
But that we're going to duplicate the select button and call it back.

01:21.850 --> 01:24.310
And here we're just going to type back.

01:24.310 --> 01:25.060
Very nice.

01:25.060 --> 01:26.800
Now let's take this button back.

01:26.800 --> 01:28.120
Move it below.

01:28.720 --> 01:31.690
And I guess somehow we can.

01:32.720 --> 01:34.640
Managed to place them together?

01:34.640 --> 01:35.510
I'm not sure.

01:35.510 --> 01:36.320
Let me see.

01:36.320 --> 01:37.550
What if we.

01:38.420 --> 01:41.540
Reduce the size of a button to something like this.

01:43.440 --> 01:52.080
And let's place it lower somewhere here, and I'm going to duplicate it and bring it down and type here

01:52.080 --> 01:52.710
back.

01:53.490 --> 01:55.410
There may be improvements later on.

01:55.410 --> 02:00.840
As of now, I think this is good enough because we just need to set up the functionality and final look

02:00.840 --> 02:03.120
can always be polished later.

02:03.390 --> 02:09.750
Uh, just let me take the text box and stretch it like so for this one as well.

02:09.750 --> 02:11.370
Something like this will do.

02:11.370 --> 02:12.150
Okay.

02:12.150 --> 02:13.050
Very nice.

02:13.050 --> 02:15.810
Now let's duplicate again this button.

02:15.810 --> 02:19.710
But this one going to be next screen.

02:20.440 --> 02:26.110
And in the text of this button, we're going to have only the arrow like that.

02:28.050 --> 02:32.550
I'm going to make this button smaller to something like this.

02:32.730 --> 02:34.140
Yeah, I think I like it.

02:34.170 --> 02:38.910
Then I'm going to duplicate this button and name it as previous scheme.

02:39.360 --> 02:42.300
And on this button the arrow will show to the left.

02:42.930 --> 02:43.500
Nice.

02:43.500 --> 02:47.070
Now let's take these two buttons next skin and previous skin.

02:47.160 --> 02:51.330
And set position and pivot point in the center.

02:51.570 --> 02:52.260
Very good.

02:52.260 --> 02:55.800
Now we just want to take this and move it a bit to the right.

02:55.920 --> 02:58.980
And take previous skin and move it a bit to the left.

03:00.780 --> 03:04.350
Something like this will work, I guess.

03:05.820 --> 03:07.020
Yeah, I think I like it.

03:07.020 --> 03:07.560
All right.

03:07.560 --> 03:08.400
Very well.

03:08.400 --> 03:11.670
Also, I forgot to do something important and.

03:11.700 --> 03:13.950
Yeah, man, you will kill me.

03:13.950 --> 03:18.150
We need to select the parent and stretch it to the entire screen.

03:18.150 --> 03:19.080
Let's do it.

03:19.500 --> 03:19.920
Okay.

03:19.920 --> 03:24.660
Oh, it's not that bad, actually, because sometimes you do it and then all elements go into wrong

03:24.660 --> 03:26.460
places and you need to arrange them again.

03:26.460 --> 03:27.870
But this is actually not that bad.

03:27.870 --> 03:30.780
We can just take these two and move them down a bit.

03:30.780 --> 03:32.040
All right I like it.

03:32.040 --> 03:36.060
So now we have skin selection UI and we have main menu UI.

03:36.990 --> 03:38.940
That I need to stretch as well.

03:38.940 --> 03:46.560
And somehow we need to disable all of the UI elements and enable UI elements that we want to see.

03:46.980 --> 03:48.570
Okay, how can we do this?

03:48.660 --> 03:50.670
We're going to go to UI main menu.

03:51.980 --> 04:00.530
And, uh, I'm going to make a serialize field, private Gameobjects array, and I'm going to call it

04:00.530 --> 04:01.910
UI elements.

04:02.270 --> 04:06.620
All right then we're going to need serialize field private GameObject.

04:08.440 --> 04:10.630
Actually, we don't need anything else on the variables.

04:10.630 --> 04:11.950
We only need the method.

04:12.520 --> 04:13.900
We're going to go here.

04:15.700 --> 04:19.810
And we're going to make a public void switch UI.

04:20.020 --> 04:25.660
And here we're going to pass GameObject UI to uh enable.

04:26.110 --> 04:26.950
All right.

04:27.740 --> 04:34.760
Then inside of this switch UI, we're going to run for loop that will disable all of the elements in

04:34.760 --> 04:36.470
this array over here.

04:36.470 --> 04:40.880
So we're going to do not for loop actually let's use for each.

04:40.880 --> 04:42.410
This will be better for us.

04:42.800 --> 04:43.970
So we're going to do.

04:47.010 --> 04:51.240
UI here and then UI set active false.

04:51.240 --> 04:54.450
And after we switched off all of the elements, we're going to take element.

04:54.450 --> 04:58.650
We want to switch on and set UI element.

04:58.680 --> 05:00.060
Set active.

05:01.800 --> 05:02.520
What's up man?

05:02.550 --> 05:03.270
Set.

05:03.270 --> 05:04.020
Active.

05:09.920 --> 05:12.230
Oh, I'm calling the wrong variable.

05:12.440 --> 05:14.810
UI to enable set active.

05:14.840 --> 05:15.560
True.

05:15.920 --> 05:18.230
That's all what we need in the script.

05:18.710 --> 05:20.330
Now we can go back.

05:22.280 --> 05:23.090
And.

05:26.250 --> 05:31.260
I'm going to take these two elements and drag them to UI elements array like so.

05:31.260 --> 05:34.500
So we have array of the UI elements in the main menu.

05:34.500 --> 05:37.110
I'm going to disable this one for now.

05:37.110 --> 05:43.890
Then on the main menu on a new game button, instead of starting new game, I'm going to call UI main

05:43.890 --> 05:46.350
menu switch UI.

05:46.530 --> 05:49.740
And here we need to pass game object that we want to enable.

05:49.740 --> 05:52.470
And I'm going to pass Skin Selection UI.

05:52.680 --> 05:53.310
All right.

05:53.340 --> 05:56.940
Now let's go to the back button over here.

05:57.360 --> 06:01.740
And I'm going to change it from new game to switch UI.

06:01.740 --> 06:05.970
And I'm going to drag a main menu UI over here.

06:05.970 --> 06:06.900
All right.

06:06.900 --> 06:08.520
Now let's go to game mode.

06:10.410 --> 06:11.880
And we have new game.

06:11.880 --> 06:13.530
I'm going to click new game.

06:13.530 --> 06:15.180
We switched to a different UI.

06:15.180 --> 06:20.460
And here we can select a skin and then we can go back if we want.

06:20.550 --> 06:22.320
Or we can go to New game.

06:22.320 --> 06:27.000
Click select and game will begin with the skin we selected.

06:27.300 --> 06:28.110
And very nice.

06:28.110 --> 06:33.240
And this functionality can be used basically to switch between any menu we have in the game.

06:33.240 --> 06:34.050
Any menu.

06:34.050 --> 06:34.500
Yeah.

06:35.190 --> 06:35.670
Um.

06:37.110 --> 06:40.290
Let's make one more UI element.

06:40.890 --> 06:45.060
I think I'm going to copy the skin selection because it has the back button.

06:45.210 --> 06:47.190
So I'm going to copy skin selection.

06:47.190 --> 06:50.520
This will be disabled and this will be enabled.

06:50.520 --> 06:54.690
And I'm going to call it settings UI.

06:55.770 --> 07:00.300
So on the settings we have back button, um select button.

07:00.300 --> 07:01.170
We don't need that.

07:01.170 --> 07:02.520
And these two we don't need that.

07:02.520 --> 07:05.460
So now we have settings UI that we need to set up.

07:05.460 --> 07:06.510
We're going to do it later.

07:06.510 --> 07:07.470
Not now.

07:07.470 --> 07:09.300
And something else here.

07:09.300 --> 07:15.150
Yeah we need um level selection UI.

07:16.700 --> 07:20.540
And this will be responsible for level selection later on as well.

07:20.570 --> 07:25.310
Now let's drag them to UI elements level selection.

07:25.310 --> 07:28.910
We're going to disable these enable main menu.

07:28.910 --> 07:30.920
And this is good enough.

07:31.010 --> 07:33.020
Let's save the project.

07:33.020 --> 07:34.430
And let's go to next video.

07:34.430 --> 07:37.370
We're going to make skin Selection UI okay.