WEBVTT 00:00.040 --> 00:01.880 Our game over UI. 00:02.280 --> 00:06.360 To do that, we will head over to our hierarchy than canvas. 00:07.000 --> 00:09.560 Let's create an empty parent game object. 00:09.560 --> 00:11.880 First, let's right click on this canvas. 00:11.880 --> 00:17.600 Let's create an empty game object, and let's call this game object to something like Game over UI. 00:17.720 --> 00:24.160 So let's call it Game Over UI and make sure you go to Inspector Rect Transform. 00:24.160 --> 00:29.000 Click here and hold down alt on your keyboard and select this bottom right one. 00:29.160 --> 00:37.160 And as soon as we have chosen that, we can see the this game over here, just get the size of our canvas. 00:37.160 --> 00:41.720 And now we are ready to create our panel or the BG background. 00:41.720 --> 00:44.040 Basically the panel we're going to create first. 00:44.040 --> 00:46.080 So let's select our game Over UI. 00:46.120 --> 00:47.440 Let's right click on it. 00:47.440 --> 00:50.000 Then go to and select this panel. 00:50.240 --> 00:52.880 And we're going to hold down alt. 00:52.880 --> 00:55.480 So basically select the rect tool in the scene view. 00:55.800 --> 01:01.670 And we're going to hold down alt key on our keyboard to resize from center as you can notice. 01:01.670 --> 01:09.990 So we can see it's just uh, we can resize it uh, uh, by holding down alt key from the center. 01:09.990 --> 01:14.150 And now we're gonna replace this, uh, panel image with something else. 01:14.510 --> 01:18.230 Uh, before we call it panel, let's call it BG or background. 01:18.270 --> 01:20.910 Simply let's go over to image Component. 01:20.910 --> 01:23.630 And we need to drag the sprite right over here. 01:23.950 --> 01:28.350 Uh, with, with uh which one we just want to change with. 01:28.550 --> 01:30.990 Uh, so we're going to select all of this sprite. 01:30.990 --> 01:35.390 So I'm going to head over to my project tab assets and then sprite folder. 01:35.550 --> 01:38.110 Then I will head over to my UI folder. 01:38.110 --> 01:41.630 And I'm gonna select all of this sprite by holding down shift. 01:41.670 --> 01:44.550 Then go over to Inspector and Pixel per unit. 01:44.550 --> 01:49.030 We're going to make something like 16 to make it bigger and filter mode. 01:49.030 --> 01:51.950 We're going to choose point no filter to get rid of blurry. 01:51.950 --> 01:54.910 And let's click on this apply button in the bottom right. 01:55.110 --> 02:00.630 And now what I'm going to do I'm going to select my page underneath my game over here by game object, 02:00.830 --> 02:03.830 uh, underneath our canvas in the hierarchy. 02:04.110 --> 02:05.990 And let's go over to image component. 02:05.990 --> 02:09.150 And now we need to drag the sprite right over here. 02:09.150 --> 02:10.590 So I'm going to select the first one. 02:10.590 --> 02:11.590 Basically this one. 02:11.590 --> 02:13.510 Let's drag it over to this slot. 02:13.510 --> 02:17.590 And as soon as we drag it now we can see it. 02:17.590 --> 02:21.230 But it seems transparent to get rid of that. 02:21.270 --> 02:23.950 What we have to do, we need to move over to this color. 02:23.950 --> 02:25.350 So just click on it. 02:25.390 --> 02:28.790 In the bottom you can see a and it's set it to 100. 02:28.790 --> 02:33.950 So we're gonna drag all the way to the right all the way to the right side. 02:33.950 --> 02:37.190 Or we can simply make it 255 like this. 02:37.190 --> 02:39.030 As you can see, now it's gone. 02:39.270 --> 02:43.710 And I'm gonna hold down alt key on my keyboard to resize it from center. 02:44.070 --> 02:52.030 And I want a a header, something over here, something like says, uh, game over. 02:52.030 --> 02:53.390 So I'm going to do that. 02:53.630 --> 03:00.020 Uh, to do that, uh, what we're going to do, we're going to select uh select and we're going to select 03:00.020 --> 03:01.900 an sprite for it. 03:02.300 --> 03:04.820 So I'm gonna choose any of them. 03:04.820 --> 03:06.860 So basically let's select this one. 03:06.860 --> 03:08.260 Let's go over to Inspector. 03:08.300 --> 03:10.940 Let's click on this open Sprite editor. 03:10.940 --> 03:15.660 So we can see we have multiples of it multiples of it. 03:15.660 --> 03:22.060 But I guess uh for now let's leave that when I select this sprite right over here. 03:22.060 --> 03:23.340 So let's select the BG. 03:23.380 --> 03:25.580 Let's right click on right click on it. 03:25.620 --> 03:30.220 Don't select this game over UI because the header we want inside this BG. 03:30.260 --> 03:31.620 Basically this panel. 03:31.860 --> 03:34.300 Uh so that's why we're gonna select our BG. 03:34.460 --> 03:35.700 Let's right click on it. 03:35.700 --> 03:37.500 Let's go to view UI. 03:37.660 --> 03:39.700 And we're gonna select this image component. 03:39.700 --> 03:40.780 So let's go to UI. 03:40.820 --> 03:42.380 In the top we can see image. 03:42.380 --> 03:43.660 So let's click on it. 03:43.900 --> 03:46.460 And we're gonna replace this image with this one. 03:46.460 --> 03:49.860 But before we do let's call it something like header. 03:50.140 --> 03:52.340 So let's call this one header. 03:52.620 --> 03:54.810 And make sure you go to Rect read transform. 03:54.810 --> 03:58.370 Click over here and we're going to hold down alt on your keyboard. 03:58.370 --> 04:00.970 And we're going to select this top right one. 04:00.970 --> 04:07.810 As you can see, as soon as we have chosen now as we can notice and we're going to replace this image 04:07.810 --> 04:09.370 with something else. 04:09.370 --> 04:14.610 So as you can see inside our image component source image and it says none. 04:14.610 --> 04:15.970 So we're going to select this one. 04:15.970 --> 04:17.810 Let's drag it over to that fill. 04:17.810 --> 04:24.130 And as soon as we drag it now we can see and we can hold down alt on our keyboard to resize it from 04:24.130 --> 04:25.970 center, as you can notice. 04:26.170 --> 04:28.570 And we're going to say something over here. 04:28.970 --> 04:33.370 Let's move it in the middle like this I guess. 04:34.530 --> 04:35.210 Okay. 04:35.250 --> 04:37.450 So this seems pretty much fine. 04:37.450 --> 04:43.130 And you can hold down shift to resize it perfectly in the Y as well as in the width. 04:43.450 --> 04:50.330 You can simply say so now this seems pretty much cool and we want it takes inside of this. 04:50.330 --> 04:55.970 Something like this game is over or you lost lo lost something like that. 04:55.970 --> 04:57.650 So we're going to select our header. 04:57.650 --> 05:01.530 Let's right click on it because I want the text inside this header. 05:01.530 --> 05:03.290 So we're going to select our header. 05:03.330 --> 05:04.690 Let's right click on it. 05:04.690 --> 05:08.530 Let's go to UI and we're going to move over to Bottom Legacy. 05:08.530 --> 05:10.450 And then we're going to choose this text. 05:10.450 --> 05:14.010 And we're going to call this text to something like game over text. 05:14.010 --> 05:17.370 Or we can simply call it txt for text. 05:17.730 --> 05:24.730 And we want to fit inside this header or basically this sprite or this icon. 05:24.850 --> 05:26.290 So we're going to select our text. 05:26.330 --> 05:29.050 Let's go over to Inspector Rect Transform. 05:29.050 --> 05:31.650 Let's click over here and we're going to hold down alt. 05:31.650 --> 05:34.050 And we're going to select this bottom right one. 05:34.330 --> 05:37.610 And I want this text to start from the middle. 05:37.650 --> 05:40.410 Basically I want alignment to middle. 05:40.450 --> 05:43.090 To do that we're going to move over to text component. 05:43.290 --> 05:44.850 Then go over to alignment. 05:44.850 --> 05:48.050 And we're going to choose both of these center both of this center. 05:48.210 --> 05:54.400 And we need to increase our text basically the font size so we can able to notice it. 05:54.400 --> 05:57.200 So let's move over to text component and font size. 05:57.200 --> 05:59.240 We're going to make it something around 80. 05:59.520 --> 06:01.840 Or let's make it something like 80. 06:01.880 --> 06:04.840 Let's go with 80 and font style. 06:04.840 --> 06:06.000 I'm gonna choose bold. 06:06.000 --> 06:11.520 And instead of saying a new text we're going to say something like, you lost something like that, 06:11.560 --> 06:20.280 you lost, you lost, and I'm gonna change the color of this text, or we can just leave it like this 06:20.280 --> 06:21.040 as well. 06:21.440 --> 06:23.160 So I'm going to leave it like that. 06:23.280 --> 06:25.520 And font, I'm gonna choose another. 06:25.520 --> 06:27.160 So let's click over here. 06:27.160 --> 06:31.920 Or you can just simply move over to your project app assets and then fonts folder. 06:31.920 --> 06:35.760 And you can select any font and you can drag it over to this slot. 06:35.760 --> 06:39.920 Or you can simply click right over here if you have any font. 06:39.960 --> 06:43.280 Of course I will have in the resources all of this font. 06:43.320 --> 06:47.440 So you can just download that and I'm going to select the first one. 06:47.440 --> 06:53.920 So now this seems pretty much cool as you can notice, and we can just recite it from center. 06:53.920 --> 06:54.400 Sorry. 06:54.440 --> 06:57.840 We can hold down alt to resize it from center like this. 06:58.440 --> 07:00.800 So I guess you get the idea. 07:01.280 --> 07:05.360 And I'm gonna increase a bit up something like that. 07:05.360 --> 07:06.920 And I see I. 07:07.520 --> 07:08.760 Let's do it 80. 07:08.800 --> 07:10.200 Let's leave it with 80. 07:10.600 --> 07:12.720 And it seems it seems fine. 07:12.720 --> 07:14.720 And I'm going to get rid of this. 07:15.120 --> 07:16.400 And this is cool. 07:16.400 --> 07:17.280 Pretty much cool. 07:17.480 --> 07:20.520 And what we want now we want two buttons. 07:20.520 --> 07:24.560 One will be retry button and one will be the menu button. 07:24.560 --> 07:31.520 And we're gonna do inside this BG I want the buttons inside this panel or inside this background. 07:31.520 --> 07:37.200 So that's why we're gonna select that background instead of the header underneath our game over UI game 07:37.240 --> 07:37.800 object. 07:37.840 --> 07:39.080 Let's right click on it. 07:39.080 --> 07:41.360 Let's go to UI legacy in the bottom. 07:41.360 --> 07:43.160 And then we're gonna choose a button. 07:43.440 --> 07:50.270 And we can call this button to something like let's call it menu button or let's call it retry button. 07:50.710 --> 07:54.790 Let's call this retry button and. 07:54.830 --> 07:55.310 Button. 07:55.510 --> 07:57.990 And we're going to increase the size of this button. 07:57.990 --> 08:02.350 So we're going to hold down alt on our keyboard to resize it from center. 08:02.550 --> 08:07.310 As you can notice I want to change the change the sprite of this button. 08:07.310 --> 08:11.350 Basically we need to change the source image in our image component. 08:11.390 --> 08:13.990 As you can notice in the inspector. 08:13.990 --> 08:18.910 So for that I'm going to head over to my project tab assets and then sprites folder. 08:18.950 --> 08:21.550 Then I will move over to my UI folder. 08:21.550 --> 08:25.550 And as you can notice I have uh many buttons. 08:25.750 --> 08:28.430 So I'm going to select any of this. 08:29.950 --> 08:32.390 Sorry I'm going to select this one. 08:32.390 --> 08:35.670 So as you can see we have multiple buttons. 08:35.670 --> 08:38.950 So we're going to select that sprite and go over to Inspector. 08:38.950 --> 08:40.590 So we have multiple buttons. 08:40.590 --> 08:43.470 So that's why sprite mode we're going to choose multiple. 08:43.750 --> 08:45.590 And we already done it. 08:45.590 --> 08:49.220 Filter mode to point filter and pixel per unit to 16. 08:49.380 --> 08:52.700 So we're going to click on this apply button in the bottom right. 08:52.740 --> 08:58.100 And now if we click on this arrow into that spreadsheet we can see the individual buttons. 08:58.340 --> 09:00.140 So I'm going to select any of them. 09:00.420 --> 09:04.060 But before we do let's select the retry button in the hierarchy. 09:04.340 --> 09:06.620 And let's select any of these. 09:06.940 --> 09:08.740 So I'm going to select this one. 09:08.780 --> 09:15.380 Let's select that and drag it over to this image component or inside this source image basically. 09:15.380 --> 09:18.980 So we're going to select that and let's drag it over to the source image. 09:19.260 --> 09:24.620 And as soon as we drag it as you can notice we can able to notice our button. 09:24.620 --> 09:29.420 And we can just hold down alt key on our keyboard to resize it from center. 09:29.420 --> 09:34.180 But the problem is that we build it's like a vanishing. 09:34.180 --> 09:38.420 It's basically seeing transparent kind of bit weird. 09:38.420 --> 09:40.980 Or you can say it's not fitting the theme. 09:40.980 --> 09:43.700 So we're going to choose another button for that. 09:43.980 --> 09:45.380 So we're gonna. 09:45.420 --> 09:47.340 We have to find the sprite first. 09:47.540 --> 09:51.300 So I guess this sprite right over here seems pretty much cool. 09:51.660 --> 09:54.220 So we're going to select any of them. 09:56.540 --> 09:58.420 Uh, let's select this one yellow one. 09:58.420 --> 09:59.380 We're going to choose. 09:59.380 --> 10:00.820 So let's select this sprite. 10:00.820 --> 10:05.500 Let's go over to Inspector and single sprite mode single to multiple. 10:05.500 --> 10:09.660 We're going to choose why because we can notice we have multiple sprites. 10:09.660 --> 10:10.580 So that's why. 10:10.780 --> 10:14.180 And pixel per unit 16 filter mode 2.0 filter. 10:14.180 --> 10:16.380 And let's click on this apply button. 10:16.380 --> 10:20.620 And we're going to click on this arrow in order to see the individuals button. 10:20.620 --> 10:30.060 So now we can notice that and we have this button but still this not just filling up okay. 10:30.140 --> 10:34.180 So what we have to do we need to select a perfect button for this. 10:34.980 --> 10:36.980 We can select this button as well. 10:36.980 --> 10:39.060 So let's select this one instead. 10:39.060 --> 10:40.740 So we're going to select this one. 10:40.740 --> 10:46.250 And let's select the retry button underneath our GameObject in the hierarchy tab, and we're going to 10:46.250 --> 10:48.490 drag the sprite right over here. 10:48.530 --> 10:54.610 Now as you can notice, this seems pretty much cooler than other sprites, and we can hold down Alt 10:54.650 --> 11:01.450 and Alt on our keyboard to resize it from center, and you can hold down shift on your keyboard to resize 11:01.450 --> 11:07.050 it from in the X and in the Y with same aspect ratio. 11:07.450 --> 11:14.450 And we have the text inside of the of this button, but we're not able to notice it because the text, 11:14.650 --> 11:19.610 the font size of that, uh, of that text is too much low. 11:19.610 --> 11:20.930 So we're going to click over here. 11:20.930 --> 11:22.050 Let's select the text. 11:22.050 --> 11:23.570 Let's go over to Inspector. 11:23.810 --> 11:28.730 Uh Inspector, we're going to uh go over to this text component and color. 11:28.730 --> 11:32.330 I'm going to change with something white to make it visible. 11:32.450 --> 11:35.570 And let's make the font size something around 80. 11:36.010 --> 11:42.760 And instead of saying button we're gonna say something like retry, retry, write, let's say retry. 11:43.040 --> 11:45.760 And I want to change the font of it. 11:45.760 --> 11:47.880 So I'm going to choose this monogram. 11:48.320 --> 11:54.080 And I'm going to increase it a little bit up something like 100 and font style I'm going to choose bold. 11:54.240 --> 11:57.960 And I want this to be try takes a little bit up. 11:57.960 --> 11:59.760 So I'm going to choose this. 12:00.280 --> 12:03.440 Make sure you select the text inside this retry button. 12:03.440 --> 12:06.120 And make sure you just move it up like this. 12:06.480 --> 12:08.440 So we have it retry. 12:08.720 --> 12:13.520 And now we need to create one more button that will be our home button. 12:13.520 --> 12:17.760 Or you can simply call it a menu sorry a menu button. 12:17.960 --> 12:23.320 And I want to I want this button to start from the bottom side. 12:23.320 --> 12:26.000 So that's why we're going to select our retry button. 12:26.000 --> 12:29.840 Let's go over to Inspector Rick Transform and then click over here. 12:29.840 --> 12:30.960 And we're going to hold down. 12:30.960 --> 12:34.640 And we're going to select this bottom one right over here. 12:34.640 --> 12:36.560 And now we're going to select our button. 12:36.560 --> 12:38.360 Let's drag it over here. 12:38.600 --> 12:40.120 And if we try to. 12:41.200 --> 12:44.800 try to scale down our screen, we can see the button. 12:44.800 --> 12:51.000 It just resizing itself according to our PG as well as according to our canvas. 12:51.360 --> 12:55.600 So now let's duplicate this button in order to create our menu button. 12:56.760 --> 12:57.320 Sorry. 12:58.440 --> 13:00.360 So we're going to select our button. 13:00.360 --> 13:03.440 Let's Ctrl D for duplicating it. 13:03.440 --> 13:04.840 And let's move it down. 13:04.840 --> 13:09.920 And instead of calling retry button one we're going to call it something like menu button. 13:09.920 --> 13:17.600 So let's go over to Inspector and let's call this one menu button sorry menu button. 13:17.600 --> 13:20.920 And we also need to change the text inside of this button. 13:20.920 --> 13:24.520 Instead of saying retry we're going to say something like menu. 13:24.720 --> 13:26.240 So let's click over here. 13:26.240 --> 13:29.080 And we're going to choose the text inside of this button. 13:29.080 --> 13:31.680 And let's go over to Inspector then text Component. 13:31.680 --> 13:33.960 And let's say something like menu. 13:34.360 --> 13:40.990 And I guess this seems pretty much cool by now I'm going to drag it a little bit down and I'm going 13:41.030 --> 13:46.150 to choose my retry button and let's move it a little bit up or something like in center. 13:46.470 --> 13:51.790 And we can say something right over here, uh, like whatever you just want to say. 13:51.790 --> 13:53.150 You can just do that. 13:53.150 --> 13:56.430 And now we're going to make this game over by a prefab. 13:56.430 --> 14:03.270 So now we're going to have the copy of it and we can just, uh, basically, uh, we don't need to work 14:03.270 --> 14:08.750 from scratch like we have done adding this button, adding this text, and making this panel. 14:08.870 --> 14:14.390 So, so that's why we just created an empty game object, which is game over UI. 14:14.670 --> 14:20.950 And to just keep all of the things in an organized way and to make a prefab so we don't need to work 14:20.950 --> 14:21.990 from scratch. 14:21.990 --> 14:26.750 So we're going to select our game over here by underneath our canvas in the hierarchy. 14:26.870 --> 14:31.670 And let's drag it over to this prefabs folder in order to turn it into a prefab. 14:31.830 --> 14:33.870 So we're going to turn it into a prefab. 14:34.190 --> 14:40.230 And if we select our game over here by occupy underneath our canvas in the hierarchy tab and then delete 14:40.230 --> 14:40.430 it. 14:40.430 --> 14:42.350 As you can see, it's gone. 14:42.350 --> 14:46.350 But we do know that we have the copy of it, basically the prefab. 14:46.350 --> 14:48.950 So we can select the prefab from that folder. 14:48.950 --> 14:52.030 And we can just drag it on top of this canvas GameObject. 14:52.030 --> 14:55.870 And as soon as we drag it, we can see by now we have it. 14:55.870 --> 14:58.430 So that's why we just turn it into a prefab. 14:58.430 --> 15:04.150 And we just created this empty parent game object to just keep all of the things inside of it, and 15:04.150 --> 15:05.990 we don't need to work from scratch. 15:05.990 --> 15:07.950 Basically, that is the purpose. 15:07.950 --> 15:09.630 So that's why we have done it. 15:10.150 --> 15:17.470 And now we're going to press Ctrl s on our keyboard to save our project or any you also make sure you 15:17.510 --> 15:19.270 select your game over UI. 15:19.390 --> 15:22.830 Then go over to Inspector Overrides and then apply all. 15:22.830 --> 15:29.790 If you change anything inside this game over UI game object and this button will do nothing currently. 15:29.790 --> 15:33.150 So we need to hook this button with some certain function. 15:33.150 --> 15:36.190 So I hope you get the idea that how you can do this.