WEBVTT 00:00.080 --> 00:03.720 To create that, we're going to move over to our project tab assets. 00:03.720 --> 00:06.520 And then since folder let's right click there. 00:06.520 --> 00:09.640 Or you can simply right click on these assets as well. 00:09.640 --> 00:11.640 Then go to create in the top. 00:11.640 --> 00:17.320 And then since right over here and then click on this scene I'm going to do inside my scenes folder. 00:17.320 --> 00:18.920 So let's head over to that folder. 00:18.920 --> 00:23.160 Let's right click create and we will go to scene. 00:23.160 --> 00:24.600 And let's click on this scene. 00:24.920 --> 00:27.680 And we have to name the scene what we want to name it. 00:27.680 --> 00:29.240 So this will be our menu. 00:29.240 --> 00:31.160 So we're going to call this one menu. 00:31.480 --> 00:34.360 Let's call this menu and let's hit enter. 00:34.360 --> 00:38.720 And we're going to double click on it in order to move over to that piano scene. 00:38.720 --> 00:40.360 So we're going to double click on it. 00:40.880 --> 00:46.200 And as you can notice if we move to hierarchy we only have the main camera. 00:46.200 --> 00:49.120 And we don't have anything like that. 00:49.440 --> 00:52.600 Uh so firstly we're going to drag our backgrounds. 00:52.600 --> 00:57.640 So to do that I'm going to move over to my project tab assets and then prefabs folder. 00:57.840 --> 01:03.300 And from here I'm going to select my background and let's drag it over to this hierarchy or into this 01:03.300 --> 01:03.900 scene view. 01:03.940 --> 01:06.780 I'm going to drag it over to my hierarchy. 01:06.820 --> 01:08.060 As you can notice. 01:08.060 --> 01:09.700 So this is our background. 01:09.900 --> 01:14.500 And if you haven't made your background a prefab so make sure you just do that. 01:14.540 --> 01:19.620 Basically move over to your scenes folder and then move over to sample scene or the level. 01:19.780 --> 01:21.380 And we're going to click on this save. 01:21.380 --> 01:25.500 So the changes we made inside this scene it's just going to be saved. 01:25.500 --> 01:27.300 So I'm going to click on that save. 01:27.340 --> 01:34.220 And as soon as we clicked on that save button we just move it over to level scene or the sample scene. 01:34.700 --> 01:39.060 And from here basically select your background and turn it into a prefab. 01:39.380 --> 01:42.540 So you're gonna have the copy and then move over to scene. 01:42.540 --> 01:47.100 And then drag your background in the hierarchy or into the scene view. 01:47.620 --> 01:54.340 And we need to create our canvas before we create our about menu play button and all of those things. 01:54.700 --> 01:57.180 So we need to create our canvas first. 01:57.260 --> 01:58.660 So let's go over to hierarchy. 01:58.660 --> 02:00.580 Right click or hit this plus icon. 02:00.800 --> 02:03.840 Let's go to UBI and canvass in the bottom. 02:03.840 --> 02:05.800 And we're going to select our canvas. 02:05.800 --> 02:10.160 And let's press down F on our keyboard in order to focus on it. 02:10.560 --> 02:13.280 And we need to do some settings with this canvas. 02:13.280 --> 02:16.800 So for that we will go to Inspector in the right. 02:16.840 --> 02:20.040 In the top right and then canvas scaler. 02:20.040 --> 02:27.800 And from here we're gonna choose UI scale mode to a constant pixel size to uh, you can simply say scale 02:27.800 --> 02:29.040 with screen size. 02:29.040 --> 02:32.600 So UI scale mode, we're gonna choose scale with screen size. 02:32.800 --> 02:40.680 And in the X we're going to put 1920 and in the Y we're going to put 1080 like we have done inside that 02:40.720 --> 02:43.760 sample scene or in the level that using. 02:44.320 --> 02:48.920 So right now what we're going to do, we're going to create an empty parent game object first. 02:48.960 --> 02:54.440 Then we're going to place all of the things inside of it like we have done inside our sample scene. 02:54.440 --> 02:56.480 So we're going to approach the same way. 02:56.680 --> 03:04.420 And for that, by creating that it's going to be a little more fine to keep our project clean, you 03:04.420 --> 03:06.740 can simply say so select your canvas. 03:06.740 --> 03:07.900 Let's right click on it. 03:07.900 --> 03:10.060 Let's create an empty game object. 03:10.060 --> 03:14.300 And I'm going to name this game object to something like main menu. 03:14.580 --> 03:19.580 And make sure you go over to Inspect Inspector Break Transform and then click here. 03:19.580 --> 03:23.820 And then hold down alt on your keyboard and select this bottom right one. 03:23.820 --> 03:28.980 And as soon as we have chosen, we can see by now this game object gets. 03:30.100 --> 03:34.500 Basically this main menu just gets as the size of our canvas. 03:34.660 --> 03:37.580 And now we are ready to create our button. 03:37.580 --> 03:40.380 So we're going to select our band panel not the canvas. 03:40.380 --> 03:42.500 So make sure you select your main menu. 03:42.540 --> 03:43.820 Let's right click on it. 03:44.180 --> 03:49.180 And let's go to UI UI and then legacy. 03:49.180 --> 03:50.820 And we're going to choose this button. 03:51.140 --> 03:53.940 So basically select your main menu game object. 03:53.940 --> 03:54.860 Right click on it. 03:54.860 --> 03:57.300 Then go to UI legacy in the bottom. 03:57.300 --> 03:58.820 And then choose this button. 03:58.820 --> 04:00.500 And we're going to select this button. 04:00.500 --> 04:03.440 And let's call this button to something like play button. 04:03.440 --> 04:06.720 So this will be our play button. 04:07.160 --> 04:09.640 And we need to increase the size of it. 04:09.640 --> 04:13.680 So we're gonna hold down alt on our keyboard to resize it from center. 04:13.880 --> 04:16.640 And I want to replace the sprite of this button. 04:16.640 --> 04:20.760 To do so we basically need to move over to Inspector Image component. 04:20.760 --> 04:25.120 And over here we need to drag the sprite that we want to change with. 04:25.280 --> 04:26.880 But we have done a mistake. 04:26.880 --> 04:29.480 Basically I want to create a panel first. 04:29.720 --> 04:35.120 And inside that panel I just want to have this play button and all of those button. 04:35.120 --> 04:38.280 So firstly what we're going to do we're going to select our play button. 04:38.280 --> 04:39.520 Let's delete that. 04:39.760 --> 04:41.720 And we're gonna select our main menu. 04:41.760 --> 04:43.520 Let's create a panel first. 04:43.520 --> 04:45.320 So we're gonna select our main menu. 04:45.360 --> 04:46.560 Let's right click on it. 04:46.560 --> 04:50.520 Let's go to UI and select this panel in the top you can notice. 04:50.800 --> 04:53.960 And now we're going to select our rake tool from this end view. 04:53.960 --> 04:55.120 And we're going to hold down. 04:55.120 --> 04:57.200 So it's going to resize from center. 04:57.600 --> 05:01.300 And we want to replace this image with something else. 05:01.300 --> 05:04.980 But before we do, let's call it something like BG or background. 05:05.060 --> 05:06.780 So let's go over to Inspector. 05:06.820 --> 05:13.260 Instead of saying panel, we're going to say something like BG and we want to change with something 05:13.260 --> 05:14.980 else basically the sprite. 05:15.100 --> 05:19.860 To do so we're going to move over to our project tab assets and then sprites folder. 05:20.220 --> 05:23.780 And over here we're going to move over to our UI folder. 05:24.380 --> 05:25.980 And we can choose this one. 05:25.980 --> 05:27.580 Or you can select any of them. 05:27.580 --> 05:29.260 Basically it's up to you. 05:29.260 --> 05:34.060 So I'm going to select my BG in the hierarchy underneath my main menu underneath my canvas. 05:34.060 --> 05:36.300 And then main menu in the hierarchy. 05:36.540 --> 05:41.700 And let's select this sprite and let's drag it over to this image component in the Inspector. 05:41.820 --> 05:44.340 As you can notice, it seems transparent. 05:44.340 --> 05:50.060 To get rid of that, go to go over to Image Component and then click on this color. 05:50.060 --> 05:51.900 And in the bottom you can see a. 05:51.940 --> 05:59.140 Just drag it all the way to the right side, or set it to 255 in order to get rid of transparency. 06:00.220 --> 06:04.360 And inside this page we basically want to place our buttons. 06:04.360 --> 06:10.120 But before we do, we're going to put a header or BG right over here in the top bar. 06:10.320 --> 06:13.400 And we're going to say something like main banner to do so. 06:13.680 --> 06:21.240 Uh for that we can choose this I guess uh let's, let's choose this. 06:21.240 --> 06:23.080 So I'm going to select this sprite sheet. 06:23.080 --> 06:24.440 Let's go over to Inspector. 06:24.440 --> 06:26.920 Let's click on this open Sprite editor. 06:26.920 --> 06:30.160 So we can notice we have multiple sprites. 06:30.160 --> 06:32.280 So we need to slice individually. 06:33.040 --> 06:38.480 Or we can select any other I guess we're gonna select any other. 06:39.560 --> 06:42.200 Or we can select simply this one as well. 06:42.200 --> 06:43.360 So let's do that. 06:43.360 --> 06:49.120 So now we're gonna select our BG not the main menu because we want that inside this BG. 06:49.160 --> 06:50.000 So that's why. 06:50.240 --> 06:51.480 So let's select this BG. 06:51.520 --> 06:52.720 Let's right click on it. 06:52.720 --> 06:53.960 Let's go to UI. 06:53.960 --> 06:57.120 And we're going to choose this image in the top we can notice. 06:57.120 --> 06:58.360 So let's click on it. 06:58.720 --> 07:02.500 And we want to be in the top bar all the time. 07:02.500 --> 07:06.260 So we're going to move over to Inspector and then go over to Rig Transform. 07:06.260 --> 07:11.780 Click over here and hold down alt on your keyboard and select this top right one. 07:11.780 --> 07:15.700 And as soon as we have chosen, we can see by now and we're going to hold down. 07:15.700 --> 07:18.060 So it's going to resize from center. 07:18.260 --> 07:23.860 And we want to replace this image with uh, basically uh with this sprite. 07:23.860 --> 07:27.140 So I'm gonna firstly rename this to something like header. 07:27.700 --> 07:32.420 A header or let's call it uh let's call it title as well. 07:32.420 --> 07:34.940 It's basically up to you what you want to call it. 07:34.940 --> 07:38.460 So I'm going to call it header something like that header. 07:38.940 --> 07:40.700 And this seems pretty much fine. 07:40.700 --> 07:43.140 And I want to replace the image of it. 07:43.260 --> 07:49.060 To do so we're going to select that sprite sprite and drag it over to this image component source image 07:49.060 --> 07:49.420 field. 07:49.780 --> 07:56.580 So as soon as we drag it by now we can notice and I'm going to select the game view in uh right over 07:56.580 --> 07:57.060 here. 07:57.660 --> 08:02.720 And we want to put a text right over here something like says main menu. 08:02.960 --> 08:05.800 So we're going to hold down alt on our keyboard. 08:06.120 --> 08:12.440 Something like this let's call it uh, basically we want to put a text inside this header and we're 08:12.440 --> 08:15.280 going to say something like menu or main menu. 08:15.520 --> 08:16.480 So let's do that. 08:16.480 --> 08:20.520 So we're going to select our header because we want the text inside this header. 08:20.520 --> 08:22.960 So that's why we're going to select our header. 08:23.000 --> 08:24.200 Let's right click on it. 08:24.200 --> 08:27.000 Let's go to UI and legacy in the bottom. 08:27.000 --> 08:28.560 And we're going to choose this text. 08:28.840 --> 08:31.720 And make sure you go over to Inspector Recttransform. 08:31.720 --> 08:34.160 Click over here and we're going to hold down alt. 08:34.160 --> 08:35.960 Let's select this bottom right one. 08:35.960 --> 08:39.320 So it's going to resize as the size of our header. 08:39.720 --> 08:45.760 And we're gonna we barely able to notice our text to increase the size of it. 08:45.800 --> 08:49.280 Let's go over to Inspector Text component and then font size. 08:49.280 --> 08:51.280 We're going to make something around 80. 08:51.760 --> 08:54.800 And font style I'm going to choose Bold and alignment. 08:54.800 --> 08:56.720 I'm going to choose both of these center. 08:56.960 --> 09:02.970 And we want to change the text inside of it instead of saying new text, we're going to say something 09:02.970 --> 09:04.050 like Manu. 09:04.170 --> 09:05.930 So let's say Manu. 09:06.410 --> 09:10.210 And also I want to change the font font of it to do. 09:10.250 --> 09:13.250 So I'm going to drag a font right over here. 09:13.250 --> 09:16.210 Or we can simply click over here in this font slot. 09:16.210 --> 09:18.570 And we can choose the font right away. 09:19.210 --> 09:21.850 And I'm going to increase the size of it. 09:21.890 --> 09:24.850 Now as you can notice it seems pretty much cool. 09:25.410 --> 09:27.090 So I hope you get the idea. 09:27.090 --> 09:30.050 And let's call it text short for text. 09:30.250 --> 09:31.850 So let's call it text. 09:32.290 --> 09:34.130 And now we want the buttons. 09:34.170 --> 09:35.730 We're gonna have play button. 09:35.730 --> 09:37.410 We're gonna have about button. 09:37.410 --> 09:41.290 We're gonna have volume button and we're gonna have exit button. 09:41.410 --> 09:45.410 So we have many buttons and we want those button inside this BG. 09:45.490 --> 09:47.770 So that's why we're going to select our BG. 09:47.850 --> 09:49.130 Let's right click on it. 09:49.130 --> 09:53.290 Let's go to UI legacy in the bottom and then choose this button. 09:53.290 --> 09:56.530 And now we're going to call this button to something like play button. 09:56.530 --> 09:59.130 So let's call it play button. 10:00.130 --> 10:00.890 Play button. 10:01.910 --> 10:04.190 And we need to increase the size of it. 10:04.190 --> 10:06.390 So let's hold down alt on our keyboard. 10:06.390 --> 10:08.390 So it's gonna resize from center. 10:08.710 --> 10:13.630 And we want to replace the sprite of this play button with something else to do. 10:13.630 --> 10:17.150 So we need to move over to Inspector then image component. 10:17.150 --> 10:20.110 And we need to drag the sprite right over here. 10:20.110 --> 10:21.550 So I'm going to select this one. 10:21.550 --> 10:28.790 Let's drag it over here uh by basically selecting that sprite and drag it over to the source image field 10:28.790 --> 10:30.470 in this image component. 10:30.470 --> 10:36.430 And we also want to uh, uh, we're not able to notice the text inside of this button. 10:36.430 --> 10:39.550 So we're gonna choose our text inside of this play button. 10:39.550 --> 10:41.950 Let's go over to Inspector Text component. 10:42.270 --> 10:47.270 And I'm just gonna change the color of this text in order to make it visible. 10:47.270 --> 10:51.390 So I'm gonna move over to my color field and let's make it something like this. 10:51.390 --> 10:53.910 Or you can choose any color that you like. 10:54.190 --> 10:58.230 Basically, you should match and match up the thing, uh, theme. 10:58.430 --> 10:59.070 That's it. 10:59.550 --> 11:00.510 And font style. 11:00.550 --> 11:02.530 I'm gonna choose bold, bold. 11:02.530 --> 11:05.490 And we need to increase the font size of this button. 11:05.490 --> 11:07.010 So let's do it 80. 11:07.370 --> 11:13.530 And instead of calling a button, we're going to call it something like play uh play something like 11:13.530 --> 11:13.930 that. 11:14.090 --> 11:19.010 And also I want to change the fonts font of this, uh, text. 11:19.010 --> 11:24.330 So I'm going to click over here and I'm going to choose this monogram something like that. 11:24.610 --> 11:25.770 And let's choose that. 11:25.930 --> 11:27.250 I'm going to drag it up. 11:27.410 --> 11:34.570 And we can simply hold down alt on our keyboard to resize it from center like this, as you can notice. 11:34.850 --> 11:36.530 So I hope you get the idea. 11:36.890 --> 11:39.370 And we're going to increase the size of this font. 11:39.410 --> 11:41.330 To do so, let's select our text. 11:41.570 --> 11:44.770 Let's go over to Inspector Text Component and Font size. 11:44.770 --> 11:46.810 We're going to make it something around 100. 11:47.090 --> 11:48.810 Now this seems pretty much cool. 11:48.810 --> 11:52.970 And we can duplicate this button in order to create our button. 11:52.970 --> 11:53.850 So let's do that. 11:53.850 --> 11:56.730 But before we do let's select our play button. 11:56.770 --> 12:02.310 Let's go over to Inspector, then Recttransform click over here and we're going to hold down alt on 12:02.310 --> 12:03.110 our keyboard. 12:03.110 --> 12:05.110 And we're going to select this bottom one. 12:05.710 --> 12:10.870 And because I want this button to start from the bottom side. 12:10.870 --> 12:11.750 So that's why. 12:11.790 --> 12:13.670 And now we're going to select our play button. 12:13.670 --> 12:16.070 Let's drag it up over here. 12:16.590 --> 12:24.230 And if we try to scale down our game view or scale up as you can notice this button and this PG, all 12:24.230 --> 12:29.750 of the all of the things just getting resized itself according to our screen size. 12:29.750 --> 12:31.630 So basically that is the thing. 12:31.750 --> 12:35.150 So before you do make sure you select your canvas. 12:35.190 --> 12:41.270 Then go over to Inspector Canvas Scaler component and a UI scale mode to choose scale with Screen Size. 12:41.310 --> 12:42.590 Else it's not gonna work. 12:42.590 --> 12:43.390 So that's why. 12:43.790 --> 12:45.830 And now we're going to select our play button. 12:45.830 --> 12:48.430 And let's press down Ctrl D to duplicate it. 12:48.430 --> 12:51.630 So we're going to press down Ctrl D and let's move it down. 12:51.790 --> 12:53.950 And this will be our abort button. 12:53.950 --> 12:57.990 So instead of calling play button one we're going to call it about button. 12:58.110 --> 13:03.930 So let's call this one about A button and we also need to change that. 13:04.370 --> 13:06.770 Change the text inside of this button. 13:06.810 --> 13:11.210 Instead of saying play, we're going to say something like a pout. 13:11.250 --> 13:13.810 So let's click over here and let's choose the text. 13:13.850 --> 13:16.410 Let's go over to Inspector Text Component. 13:16.410 --> 13:18.610 And we're going to say something like about. 13:19.650 --> 13:22.850 And now we're gonna select our about button. 13:22.850 --> 13:26.490 And let's duplicate one more time in order to create our. 13:27.090 --> 13:30.850 You can simply say the exit button or the quit button. 13:30.850 --> 13:32.610 So let's select our about button. 13:32.610 --> 13:34.770 Let's press down Ctrl D to duplicate. 13:34.970 --> 13:37.850 And let's move it down somewhere around here. 13:38.170 --> 13:41.330 And this will be our exit button or the quit button. 13:41.330 --> 13:46.170 So let's call it exit exit button. 13:46.570 --> 13:49.890 And also we need to change the text inside of this button. 13:49.890 --> 13:54.810 So let's click over here underneath our PG inside this exit button. 13:54.810 --> 13:57.530 And let's choose the text inside of this. 13:57.890 --> 14:03.510 Basically let's choose the text inside of the basically the exit button text. 14:03.550 --> 14:09.430 Let's go over to Inspector Text component and this will be our exit or the quit button. 14:09.430 --> 14:13.150 So instead of calling a part we're going to say something like exit. 14:13.550 --> 14:15.390 And now this seems pretty much cool. 14:15.790 --> 14:20.790 And we can select we can select the buttons and let's precisely measure. 14:20.790 --> 14:24.070 Basically let's place them perfectly. 14:24.590 --> 14:28.670 And that's going to be perfect I guess right over here. 14:29.030 --> 14:33.510 So make sure you just maintain the gap between these buttons. 14:33.510 --> 14:35.150 And that's going to be fine. 14:35.150 --> 14:36.790 I'm going to select my exit button. 14:36.790 --> 14:38.630 Let's drag it a little bit up. 14:38.910 --> 14:40.630 And I'm going to select my about button. 14:40.630 --> 14:42.030 Let's drag it up. 14:42.630 --> 14:44.470 Uh something over here. 14:44.910 --> 14:46.950 And we're going to choose our play button. 14:46.950 --> 14:49.670 Let's drag it up something over here. 14:49.990 --> 14:51.710 And now this seems pretty much cool. 14:51.870 --> 14:55.870 And if we just go ahead and then click on this play button in the top. 14:55.990 --> 15:00.270 And then try to click on this play button about button or this exit button. 15:00.270 --> 15:05.770 This button will do nothing currently, so we need to hook this button with some certain function in 15:05.770 --> 15:08.490 order to do some something else. 15:08.490 --> 15:11.850 Like if we click the play button, we just want to play our game. 15:12.170 --> 15:17.050 And if we click on this button, we just want to load our about panel. 15:17.050 --> 15:23.330 And if we click on this button that we want to quit our game or we want to exit our game. 15:23.530 --> 15:24.890 So let's get out of play mode. 15:24.890 --> 15:31.330 But before you do that, make sure you select your main menu and then make that one prefab. 15:31.330 --> 15:35.130 So you're gonna have the copy and you don't need to work from scratch. 15:35.130 --> 15:38.690 So that's why we just created an empty parent game object first. 15:38.690 --> 15:40.450 And then we just place it. 15:40.450 --> 15:43.810 All of these things like this button header and this BG. 15:44.210 --> 15:47.890 So that is the reason or the logic for it. 15:47.890 --> 15:52.530 And now we're gonna select our main menu and let's turn it into a prefab. 15:52.530 --> 15:54.530 So we will have the copy of it. 15:54.530 --> 15:59.050 So I'm going to select my main menu underneath my canvas in the hierarchy. 15:59.410 --> 16:06.190 And let's drag it over to this prefabs folder, and let's drag it over to this prefabs folder in order 16:06.190 --> 16:07.750 to turn it into a prefab. 16:08.030 --> 16:13.230 And now what we're gonna do, we're gonna move over to our prefabs folder, and let's create a separate 16:13.230 --> 16:15.710 folder for our UI elements. 16:15.710 --> 16:18.230 To do so let's right click on this prefab folder. 16:18.270 --> 16:19.310 Let's click. 16:19.390 --> 16:22.070 Let's go to create in the top and then folder. 16:22.070 --> 16:25.190 And let's call this folder to something like UI prefabs. 16:25.230 --> 16:28.030 Or we can simply call it UI as well. 16:28.030 --> 16:29.230 And let's hit enter. 16:29.350 --> 16:31.430 And we're going to select the UI elements. 16:31.430 --> 16:39.590 Basically this UI factory UI and this main menu because these elements are UI elements or UI game objects. 16:39.590 --> 16:41.310 So that's why we're going to select them. 16:41.310 --> 16:48.390 And we're going to drag it inside this UI prefabs folder or this UI folder to keep our project clean. 16:48.390 --> 16:55.510 So I hope you get the idea that how you can do it and you can do the same thing with about uh, about 16:55.510 --> 16:57.870 menu as we have done inside. 16:57.990 --> 17:05.050 Basically with this main menu, basically go over to your prefabs folder and select your main menu and 17:05.050 --> 17:10.930 then duplicate that, like as we have done with vector UI and that game over UI. 17:11.330 --> 17:14.730 Uh, so basically do the same thing and it's gonna be okay. 17:14.970 --> 17:17.890 So we have the game over UI right over here. 17:17.890 --> 17:20.890 So this one also a UI game object. 17:20.890 --> 17:26.970 So we're gonna select that and let's drag it inside this UI folder to just keep our project clean. 17:27.170 --> 17:28.770 And you can do the same thing. 17:28.770 --> 17:32.530 So it's gonna be a little bit assignment for you to do that. 17:32.530 --> 17:35.730 But I'm gonna cover this, uh, in the next lecture. 17:35.730 --> 17:42.530 So I hope you get the idea that how you can do it and make sure you press Ctrl s to save your project 17:42.570 --> 17:43.890 in unity editor. 17:44.090 --> 17:48.530 And this is gonna be a little bit task for you to create the about menu. 17:48.770 --> 17:49.650 About menu. 17:49.850 --> 17:54.370 As like we have done with Game over UI and the UI. 17:54.410 --> 17:58.410 So you can just follow the same process in order to achieve this. 17:58.810 --> 18:02.250 And I'm gonna explain this in the next lecture.