WEBVTT 00:00.040 --> 00:02.200 We're going to create the about menu. 00:02.360 --> 00:05.840 So what we can simply do we can move over to hierarchy. 00:06.120 --> 00:08.280 Then we can move over to canvas. 00:08.280 --> 00:10.560 And then we can select this main menu. 00:10.560 --> 00:15.680 And we can press down Ctrl D to duplicate to create the about menu. 00:15.840 --> 00:22.400 But there will be some problem because if we just move over to the first one, basically the parent 00:22.400 --> 00:28.800 one, go select that and then go over to Inspector Overrides and then click on Apply All. 00:28.800 --> 00:33.200 So the changes just gonna happen to the duplicate as well. 00:33.200 --> 00:35.920 So and we don't want that to happen. 00:35.920 --> 00:42.280 So that's why instead of duplicating in the hierarchy we're gonna duplicate from that prefabs folder. 00:42.280 --> 00:48.000 So I'm gonna select my main menu main menu you main menu one. 00:48.280 --> 00:50.960 And I'm going to delete it from the hierarchy. 00:51.200 --> 00:55.760 And let's move over to our project tab assets and then prefabs folder. 00:55.760 --> 00:58.480 And I'm going to head over to my UI folder. 00:58.480 --> 00:59.960 From there I have. 01:00.240 --> 01:03.070 So as you can see we have the main menu. 01:03.070 --> 01:07.670 So we're going to duplicate from here instead of duplicating from the hierarchy. 01:07.830 --> 01:09.590 So basically that is the thing. 01:09.750 --> 01:11.750 So we're going to select our main menu. 01:12.350 --> 01:13.750 And we don't want the change. 01:13.750 --> 01:17.110 So that's why we basically doing these things. 01:17.190 --> 01:21.870 So now what we're gonna do we're going to select our main panel from that folder. 01:21.870 --> 01:25.670 But before you do make sure you make your main menu a prefab. 01:25.670 --> 01:30.070 So you're gonna have the copy of it and you can duplicate from that folder. 01:30.070 --> 01:35.590 So I'm going to select my main menu from the from this UI prefabs folder. 01:35.590 --> 01:39.550 So let's select that and we're going to press Ctrl D to duplicate. 01:39.710 --> 01:41.670 And the duplicate one. 01:41.670 --> 01:45.190 We can simply rename this to something like about menu. 01:45.190 --> 01:47.230 So let's select the duplicate one. 01:47.230 --> 01:48.430 Let's right click on it. 01:48.430 --> 01:50.110 In the top we can see rename. 01:50.110 --> 01:51.270 So let's click there. 01:51.470 --> 01:59.510 And we're going to call it something like about about menu something like that. 01:59.510 --> 02:03.050 And we're going to double click on that in order to open that up. 02:03.050 --> 02:06.210 So as you can notice, this is our about menu. 02:06.490 --> 02:11.450 And to go over back to scene view in a hierarchy we can see the back arrow. 02:11.450 --> 02:13.810 So let's click there in order to go back. 02:13.930 --> 02:19.530 And now what we're gonna do we're going to select our pin banner underneath our canvas in the hierarchy. 02:19.570 --> 02:22.290 Then go over to Inspector and we're gonna uncheck. 02:22.330 --> 02:26.930 Basically you can simply uh assume that we disabling that. 02:26.930 --> 02:30.890 And now we're going to select the apart panel from that prefabs folder. 02:30.890 --> 02:34.610 And we're going to drag it on top of this canvas GameObject in the hierarchy. 02:34.930 --> 02:36.770 Uh to just get that. 02:36.770 --> 02:43.450 So what we need to do now we basically want to remove this play and this about button, because this 02:43.450 --> 02:44.970 is our about menu. 02:44.970 --> 02:47.050 And also we need to change the text. 02:47.090 --> 02:51.250 Instead of calling banner we're going to say something like about. 02:51.250 --> 02:55.970 So firstly I'm going to remove this play button and this about button about button. 02:55.970 --> 03:00.130 And then I'm going to I'm gonna rename this text to something like about. 03:00.410 --> 03:01.930 So let's click over here. 03:01.930 --> 03:05.440 We're going to select our PG and let's select the play button. 03:05.680 --> 03:09.800 Let's delete that as well as we're going to choose the about button. 03:09.800 --> 03:11.520 And we're going to remove that. 03:11.520 --> 03:14.280 And now we're going to change the text inside of it. 03:14.280 --> 03:15.680 So we will go to header. 03:15.680 --> 03:17.280 And we're going to select the text. 03:17.320 --> 03:20.080 Let's go over to Inspector then text component. 03:20.080 --> 03:24.200 And instead of saying a menu we're going to say something like about. 03:24.480 --> 03:31.520 And now if we go over to Parent Game Object basically this about menu then go over to Inspector Overrides 03:31.520 --> 03:33.360 and then click on this apply all. 03:33.640 --> 03:40.360 So the changes we made inside this about menu, it's not going to be a change in our main panel. 03:40.480 --> 03:47.000 So if I move over to my project app assets and then prefabs folder and try to open up this main menu 03:47.000 --> 03:48.520 by double clicking on it. 03:48.520 --> 03:53.520 As you can see, there is no changes inside this main menu UI. 03:53.760 --> 03:59.560 So that's why we duplicated from that folder to just keep all of the things organized way. 03:59.960 --> 04:02.400 And we don't want to change our main panel. 04:02.400 --> 04:05.220 So that's why we're just duplicating from there. 04:05.220 --> 04:07.860 And we just, uh, we're just doing there. 04:08.020 --> 04:12.300 So basically that is the thing instead of doing in hierarchy. 04:12.580 --> 04:14.380 So I hope you get the idea. 04:14.660 --> 04:20.340 And now let's go over to basically let's go back and is this exit button. 04:20.340 --> 04:22.460 We're going to say something like back button. 04:22.580 --> 04:26.300 So we're going to replace this exit button with our back button. 04:26.300 --> 04:27.860 Simply what we can do. 04:27.900 --> 04:32.140 We can just instead of saying exit we're going to say something like back. 04:32.340 --> 04:35.780 So let's select our about menu underneath our canvas. 04:35.780 --> 04:37.060 Let's select this page. 04:37.420 --> 04:39.740 Let's go over to this exit button. 04:39.740 --> 04:43.460 And firstly we're going to rename this to something like back button. 04:43.460 --> 04:45.740 So this is going to be our back button. 04:45.740 --> 04:50.420 So we're going to call it back button a back button. 04:50.620 --> 04:53.540 And we're going to choose the text inside of this button. 04:53.540 --> 04:56.380 And let's go over to Inspector Text Component. 04:56.380 --> 05:00.100 And we're going to rename this to something like uh back. 05:00.100 --> 05:01.500 So let's call it back. 05:01.500 --> 05:03.100 And now that seems cool. 05:03.100 --> 05:10.090 School and we can we can put a text right over here and we can give a instruction like how we can play 05:10.090 --> 05:11.770 the game, who made the game. 05:11.770 --> 05:14.570 It's basically up to you what you just want to say. 05:14.850 --> 05:16.690 And I'm gonna choose my back button. 05:16.690 --> 05:20.290 Let's go over to Inspector then button component in the bottom. 05:20.490 --> 05:21.970 We can see it's empty. 05:21.970 --> 05:24.170 So let's put the text first. 05:24.170 --> 05:29.730 And I want that text inside of this PG basically this panel right over here. 05:29.730 --> 05:31.930 So that's why we're going to select our PG. 05:32.010 --> 05:33.530 Let's right click on it. 05:33.530 --> 05:36.810 Let's go over to GP and legacy in the bottom. 05:36.810 --> 05:38.610 And then we're gonna choose this text. 05:38.610 --> 05:42.730 And we can this call this text something like instruction. 05:42.730 --> 05:49.530 So let's call it instruct instructions like that. 05:49.970 --> 05:53.290 And we're going to move over to Inspector then Rec Transform. 05:53.290 --> 05:54.770 Then click over here. 05:54.770 --> 05:58.370 And we're going to hold down alt and select this bottom right one. 05:58.370 --> 06:05.590 And as soon as we have chosen we can see this GameObject gets resized as the size of our about basically 06:05.590 --> 06:11.510 this big and make sure you it just don't overlap with this about and this back button. 06:11.510 --> 06:14.030 So we're gonna choose our instruction. 06:14.030 --> 06:15.830 Let's drag it a little bit up. 06:15.830 --> 06:20.550 It shouldn't overlap with this back button as well as this about. 06:20.750 --> 06:26.750 And from the left side we want to move something like ten unit. 06:26.790 --> 06:28.550 Let's move it 100 unit. 06:28.790 --> 06:35.630 And from the right side we want to move it 100 as we have done from the left side. 06:35.630 --> 06:37.070 So we're going to do the same thing. 06:37.350 --> 06:40.510 To do that move over to Inspector Rig Transform. 06:40.510 --> 06:43.110 And we can you can change it over here. 06:43.110 --> 06:44.390 So we're going to do 100. 06:44.950 --> 06:51.550 And we barely able to notice our text because the font size of it is too small. 06:52.030 --> 06:54.710 So we're going to choose our instruction text. 06:54.710 --> 07:00.710 So let's call it instead of text instruction text something like that. 07:00.710 --> 07:03.510 It's gonna be fine to notice. 07:03.750 --> 07:06.180 And we need to increase the font size of it. 07:06.220 --> 07:08.460 To do so, let's go over to text component. 07:08.860 --> 07:12.620 Then we're going to move over to font size and let's make it 100. 07:13.300 --> 07:14.580 Uh something like that. 07:14.580 --> 07:16.860 And font style we're gonna choose bold. 07:16.980 --> 07:21.660 And I'm gonna change the color of this font in order to make it visible. 07:21.900 --> 07:23.940 So I'm gonna move over to my color. 07:23.940 --> 07:27.380 Let's click on it, and you can choose any color that you like. 07:27.420 --> 07:31.220 I'm gonna choose this color and font style to bold. 07:31.500 --> 07:33.900 And also I want to change the font. 07:33.940 --> 07:35.940 Uh, so I'm going to click over here. 07:36.060 --> 07:37.780 Let's select this monogram. 07:38.020 --> 07:43.100 Of course I will have a I have all of this in the, in the resources. 07:43.100 --> 07:45.260 So you can just find them. 07:45.540 --> 07:50.540 And you can choose both of these alignment to center it if you want. 07:50.540 --> 07:55.500 But I want to start with to the left side and from the top. 07:55.620 --> 07:57.460 So I'm going to leave it like this. 07:57.500 --> 08:09.680 Let's make it over here and we're gonna say something like A and Add d to move. 08:10.240 --> 08:10.640 Uh. 08:10.720 --> 08:13.000 Move left. 08:13.600 --> 08:14.600 Uh, sorry. 08:14.880 --> 08:17.360 Left and right. 08:18.160 --> 08:18.960 Right. 08:19.200 --> 08:20.160 Space. 08:20.840 --> 08:21.880 A space. 08:22.800 --> 08:23.720 A space. 08:23.840 --> 08:32.600 Uh, key to jump and right mouse and left mouse button. 08:33.240 --> 08:35.120 Left mouse. 08:35.480 --> 08:37.840 Mouse button. 08:38.640 --> 08:42.080 I apologize if the spelling is wrong. 08:42.440 --> 08:44.360 Sorry of this mouse. 08:44.800 --> 08:50.200 Uh, a left and left and left mouse button to shoot. 08:50.360 --> 08:51.600 Something like that. 08:51.880 --> 08:54.040 To shoot like that. 08:54.040 --> 08:55.240 And this is fine. 08:55.640 --> 09:00.880 And once you are satisfied, then make sure you just move over to your parent game object. 09:01.080 --> 09:04.600 Then go over to Inspector Overrides and then apply all. 09:04.880 --> 09:11.350 And now we just created our about menu right away by duplicating our main panel. 09:11.710 --> 09:15.310 And we don't want this about menu to be default one. 09:15.310 --> 09:20.790 When we start our game, we want our main menu to be the default one instead. 09:21.110 --> 09:22.990 Instead of this about menu. 09:23.150 --> 09:25.190 So we're going to select our about menu. 09:25.230 --> 09:27.790 Let's go over to Inspector and then uncheck. 09:27.790 --> 09:29.950 Basically you just disabling that. 09:30.270 --> 09:33.830 And now we're going to choose our main menu underneath our canvas. 09:33.830 --> 09:35.150 Then go over to Inspector. 09:35.150 --> 09:36.350 And we're going to check this. 09:36.350 --> 09:38.230 Basically we enabling it. 09:38.510 --> 09:45.310 So whenever we're going to click on this about button we just want our about menu to be activate. 09:45.310 --> 09:48.390 And we want this main menu to be deactivate. 09:48.670 --> 09:57.390 And once we gonna click on that back button of that uh about menu, then we want this main menu to be 09:57.430 --> 09:58.030 activate. 09:58.030 --> 10:02.030 And then that about menu should be deactivate. 10:02.030 --> 10:05.310 So let's uh do first with this about button. 10:05.470 --> 10:10.530 So what we're going to do, we're going to select our paint panel underneath our canvas in the hierarchy. 10:10.530 --> 10:11.570 Let's click here. 10:11.770 --> 10:13.610 And we're going to select our PPG. 10:13.850 --> 10:16.490 And then we're going to choose our apart button. 10:16.490 --> 10:17.850 Then go over to Inspector. 10:17.850 --> 10:20.570 And we're going to scroll down to the button component. 10:21.010 --> 10:25.330 And over here you basically need to click on this plus icon. 10:25.330 --> 10:29.930 And you need to drag the game object which game object you just want to enable. 10:29.930 --> 10:33.530 So in our case we want to enable this about menu. 10:33.530 --> 10:36.370 As soon as we're going to click on this about button. 10:36.370 --> 10:38.850 So we're going to choose our about menu. 10:38.890 --> 10:40.850 Let's drag it over to that field. 10:40.850 --> 10:43.490 And as you can notice it says no function. 10:43.490 --> 10:47.050 So just click there and we're going to go over to Game Object. 10:47.090 --> 10:51.930 Basically you can simply say you just going over to about menu. 10:52.090 --> 10:54.730 And in the bottom we can see set active. 10:54.970 --> 10:58.090 So we're going to use that to enable or disable. 10:58.090 --> 10:59.730 So choose this set active. 11:00.050 --> 11:01.410 So one one. 11:01.450 --> 11:06.010 Once we're going to click on this about button we want to enable this about menu. 11:06.010 --> 11:08.880 So that's why we're going to check this basically enable. 11:09.160 --> 11:14.120 And as soon as we can enable our panel we disable. 11:14.120 --> 11:16.720 We just want to disable this main menu. 11:17.160 --> 11:21.720 So what we need to do for that we need to click on this plus icon one more time. 11:21.840 --> 11:23.880 And we need to drag the game object. 11:24.120 --> 11:26.880 Which game object you we want to disable. 11:27.040 --> 11:30.800 So in our case we're going to disable this main panel itself. 11:30.840 --> 11:33.320 Once we click on this about button. 11:33.320 --> 11:36.440 So when I select our main menu and we're going to drag it here. 11:36.600 --> 11:39.000 And as you can see it says no function. 11:39.000 --> 11:43.000 So just click there then go over to Game Object basically main panel. 11:43.080 --> 11:45.440 And we're going to use this set active. 11:45.680 --> 11:50.640 And we are gonna uncheck basically we just disabling this main panel. 11:50.640 --> 11:57.120 So I hope you get the idea that how you can do it or you can just drag it up or down, it's it doesn't 11:57.120 --> 11:57.760 matter. 11:57.760 --> 11:59.680 So you can just do that as well. 11:59.680 --> 12:01.680 It doesn't need to be in order. 12:02.000 --> 12:03.600 So now what we can do. 12:03.800 --> 12:08.140 Let's click on this play button in the top in order to play our game. 12:08.380 --> 12:13.780 And if we click on this abort button, you will notice as soon as we're going to click on that about 12:13.780 --> 12:17.340 button, then our about menu is just gonna be activate. 12:17.340 --> 12:19.580 Basically it's gonna be enabled. 12:19.700 --> 12:23.700 And this main menu itself is gonna be disabled right away. 12:23.860 --> 12:24.980 So let's have a look. 12:24.980 --> 12:26.300 So just wait a moment. 12:26.580 --> 12:32.260 Uh, so now if we click, if we go at and then click on this. 12:32.260 --> 12:35.420 Sorry I'm going to get out of play mode. 12:35.460 --> 12:38.020 Let's click on this play button in the top. 12:38.020 --> 12:42.460 In order to play our game I just click on that about button right away. 12:42.460 --> 12:50.260 So that's why uh, so just wait a moment to play to load up our game, basically to play our game. 12:50.940 --> 12:55.060 And now if we go ahead and then click on this about button. 12:55.060 --> 13:01.860 As you can see, as soon as we click this about menu just gets activate and that main menu just gets 13:01.860 --> 13:04.220 deactivated as you can notice. 13:04.220 --> 13:06.140 So I hope you get the idea. 13:06.140 --> 13:12.410 But the problem is that if we click on this back button, we're not going over to our main panel. 13:12.410 --> 13:17.770 So once we're going to click on this back button, we just want to move over to our main panel. 13:17.810 --> 13:19.970 To do that let's get out of play mode. 13:20.090 --> 13:24.930 And what we're gonna do that for, we're gonna go over to our about menu. 13:24.930 --> 13:27.050 So let's go over to Hierarchy Canvas. 13:27.050 --> 13:28.690 Then select this about menu. 13:28.930 --> 13:30.450 Let's go to About Menu. 13:31.050 --> 13:33.690 And then we're gonna select our back button. 13:34.570 --> 13:36.410 So this is our back button. 13:36.410 --> 13:37.850 Then go over to Inspector. 13:37.850 --> 13:43.290 Scroll to the scroll to the bottom or bottom says Button component. 13:43.610 --> 13:45.490 And then click on this plus icon. 13:45.690 --> 13:52.010 And we do know that we need to drag the game object which game object we want to enable or disable. 13:52.170 --> 13:54.730 So basically we need to do the same thing. 13:54.930 --> 13:59.570 So whenever we're going to click on this back button I want to enable this main menu. 13:59.570 --> 14:01.290 So I'm gonna select my main menu. 14:01.330 --> 14:02.410 Drag it there. 14:02.570 --> 14:04.370 Let's click on this no function. 14:04.370 --> 14:07.090 Let's go to Game Object and set a table. 14:07.170 --> 14:08.670 And we're going to check this. 14:08.670 --> 14:11.550 Basically we just enabling that main menu. 14:11.750 --> 14:16.350 And now what we need to do we need to disable our about menu itself. 14:16.430 --> 14:19.030 So we're going to click on this plus icon one more time. 14:19.150 --> 14:23.030 And we need to drag the game object which game object we want to disable. 14:23.110 --> 14:25.470 So I'm going to disable my about menu. 14:25.470 --> 14:26.510 So I'm going to select that. 14:26.510 --> 14:27.830 Let's drag it there. 14:27.830 --> 14:29.430 And let's click on no function. 14:29.430 --> 14:31.990 Let's go to Game Object means about menu. 14:32.190 --> 14:34.190 And we're going to use this set active. 14:34.430 --> 14:39.830 And we're gonna uncheck basically means we disabling that about menu itself. 14:40.030 --> 14:41.670 Or you can just do it. 14:41.870 --> 14:44.790 It it doesn't need to be or in order. 14:44.790 --> 14:47.070 You can just drag it up or down. 14:47.110 --> 14:48.670 It is basically up to you. 14:49.190 --> 14:50.670 So I just drag it down. 14:50.710 --> 14:53.910 It's just going to do the same thing as we have done. 14:54.430 --> 14:59.870 So now if we go ahead and then click on this play button, you will notice as soon as we're going to 14:59.870 --> 15:03.830 click on that about button, then we're gonna move over to about menu. 15:04.030 --> 15:10.260 And once we're gonna click on that back button then we're just gonna move over to main menu. 15:10.260 --> 15:11.700 So let's have a look. 15:11.980 --> 15:18.460 So if I click on this abort button, as you can notice we just activated this about menu. 15:18.460 --> 15:22.060 And that main menu just gets deactivate or disable. 15:22.300 --> 15:29.140 And if we go ahead and then click on this back button we can notice our abort panel gets deactivate. 15:29.140 --> 15:32.780 And this main menu just gets activate or enable. 15:33.100 --> 15:36.340 And you can notice underneath your canvas as well. 15:36.340 --> 15:39.100 So basically move over to hierarchy than canvas. 15:39.100 --> 15:41.300 And you can notice right over here. 15:41.300 --> 15:47.700 So if we click on this abort button we can notice this main menu just gets deactivate or basically uncheck 15:47.700 --> 15:48.540 or disable. 15:48.860 --> 15:56.500 And once we click on this back button we can notice this about menu just gets uh uncheck or disable 15:56.780 --> 15:58.020 or deactivate. 15:58.020 --> 16:01.540 And this main menu just gets activate or enable. 16:01.660 --> 16:04.700 So I hope you get the idea that how you can do it. 16:04.700 --> 16:06.460 And this seems pretty much cool. 16:06.620 --> 16:09.320 So you can just do these things. 16:09.320 --> 16:13.640 And once we click on this exit button, then we need to quit our game. 16:13.640 --> 16:16.360 Or we basically need to exit our game. 16:16.480 --> 16:18.280 So I hope you get the idea. 16:18.280 --> 16:24.120 And I'm gonna get out of play mode and make sure you just select the parent game object, then go over 16:24.120 --> 16:26.960 to Inspector Overrides and then apply all. 16:27.160 --> 16:30.280 And we're gonna do the same thing with our about menu. 16:30.280 --> 16:31.520 So I'm gonna select that. 16:31.520 --> 16:35.200 Let's go over to Inspector Overrides and then apply all. 16:35.200 --> 16:41.600 So the changes we made right over here it's going to be saved into this GameObject prefab or copy of 16:41.600 --> 16:43.000 this game object as well. 16:43.040 --> 16:50.400 Basically inside this prefabs folder, the changes and I'm gonna press Ctrl s on my keyboard in order 16:50.400 --> 16:51.880 to save my project. 16:51.880 --> 16:59.640 So I hope you get the idea that how you can do it and you can create a volume button as well if you 16:59.640 --> 17:04.440 do want, and you can just create a volume menu in order to do that. 17:04.480 --> 17:07.440 Basically you can just follow the same process. 17:07.880 --> 17:10.520 So I hope you get the idea of this.