WEBVTT 00:00.080 --> 00:01.920 Let's create the game over UI. 00:01.960 --> 00:05.960 So I'm gonna move over to my project tab, then assets and then UI folder. 00:06.120 --> 00:07.320 I have the GUI. 00:07.360 --> 00:10.680 As you can see, I will have a link in the resources. 00:10.680 --> 00:13.200 So you can check this out as well. 00:13.200 --> 00:15.200 So let's select the sprite sheet first. 00:15.240 --> 00:16.600 Then go over to Inspector. 00:16.640 --> 00:22.040 Click on Open Sprite Editor and we can see we we have more than one. 00:22.040 --> 00:28.720 So we're gonna uh we're gonna choose multiple in sprite mode multiple in inspector and make this pixel 00:28.760 --> 00:33.040 per unit something around 16in order to make it bigger in size. 00:33.240 --> 00:38.080 And then scroll down and choose this filter mode to point to filter to just get rid of blurry. 00:38.080 --> 00:42.920 And after doing all of these things, just click on this, apply in the bottom and then click on this 00:42.920 --> 00:45.240 slice in the top left sprite editor. 00:45.280 --> 00:52.000 Leave it to automatic and click on that slice, and then click on this apply button in order to slice 00:52.000 --> 00:52.880 individually. 00:52.880 --> 00:55.880 And I'm gonna select my game view once again over here. 00:55.880 --> 00:57.560 And let's go to that sprite sheet. 00:57.560 --> 00:59.200 And then click on this arrow. 00:59.200 --> 01:04.200 And we can see the individual sprites by now, so I'm going to select this one this way. 01:04.240 --> 01:09.160 But before we do, let's head over to this project tab and let's move over to this canvas. 01:09.520 --> 01:14.680 I'm going to select this canvas, and I'm gonna drag it on top of my hierarchy so I can see all the 01:14.680 --> 01:15.080 time. 01:15.080 --> 01:17.120 So I'm going to make a game over UI. 01:17.240 --> 01:22.680 And we're gonna make a empty parent game object first to just keep it clean way. 01:22.680 --> 01:23.960 So that is the thing. 01:23.960 --> 01:25.440 So we're going to select our canvas. 01:25.440 --> 01:27.120 First let's right click on it. 01:27.120 --> 01:29.000 Then create an empty game object. 01:29.000 --> 01:31.240 And we're going to name this call a name. 01:31.280 --> 01:36.400 We're gonna name the we're gonna name this game object something like Game Over UI. 01:36.440 --> 01:38.720 So let's call it Game Over UI. 01:39.160 --> 01:42.000 And make sure you just go to Inspector Recttransform. 01:42.000 --> 01:46.920 Click over here and hold down alt on your keyboard and select this bottom right one. 01:46.920 --> 01:50.040 As soon as we have chosen we can see this game over. 01:50.080 --> 01:54.760 UI now gets as the size of our canvas game object. 01:54.760 --> 01:58.920 Basically, it gets resized as the size of our canvas game object. 01:58.920 --> 02:03.240 So make sure you just do that and we're gonna select our game over UI. 02:03.280 --> 02:04.960 Now let's right click on it. 02:04.960 --> 02:10.360 Then go to UI and then choose this panel over here in the top you can see. 02:10.600 --> 02:12.000 So we're going to choose this panel. 02:12.000 --> 02:16.560 So let's click there and let's select the move tool from this in view. 02:16.560 --> 02:20.240 And we're going to hold down alt to resize it from center. 02:20.440 --> 02:21.680 As you can see. 02:21.720 --> 02:25.240 And I want to replace of this panel with something else. 02:25.240 --> 02:29.880 So what we can do we can go over to Inspector Image component and over there. 02:29.920 --> 02:32.160 So source image we can see background. 02:32.160 --> 02:34.560 So we're going to replace this with something else. 02:34.560 --> 02:38.480 So I'm going to choose this one I have it over here as you can see. 02:38.480 --> 02:43.400 So I'm going to select that sprite and let's drag it over to this slot says Source Image. 02:43.400 --> 02:46.840 And what we're going to do now we're going to click on this color in the A. 02:46.880 --> 02:49.560 You can see it's set to 100. 02:49.560 --> 02:51.880 So we're going to drag all the way to the right. 02:51.880 --> 02:53.720 Or we're going to make it to 55. 02:53.760 --> 02:56.240 And we don't want to be transparent. 02:56.240 --> 03:00.800 So that's why a which is the bottom we need to drag all the way to the right. 03:01.040 --> 03:03.480 Or you can simply put Two, five, five. 03:03.520 --> 03:07.240 And just to get rid of the transparency. 03:07.440 --> 03:10.880 And now what we're gonna do, we're gonna create some buttons. 03:10.880 --> 03:15.160 We're gonna have a retry button and one, we're gonna have a menu button. 03:15.160 --> 03:18.480 So if we just click there, we will go over to menu. 03:18.480 --> 03:23.560 And once we click on that retry button then we just want to load up the game scene. 03:23.920 --> 03:24.640 Uh game scene. 03:24.640 --> 03:27.600 Or we just want to play our game one more time. 03:27.600 --> 03:30.160 So we're gonna select our panel. 03:30.200 --> 03:31.560 Let's right click on it. 03:31.560 --> 03:34.680 Let's go to UI and then legacy in the bottom. 03:34.680 --> 03:37.400 And then click on this button or choose the button. 03:37.400 --> 03:42.960 And we can see the button now and I'm gonna name this button to something like retry. 03:43.000 --> 03:47.760 So what I will do I will move over to Inspector and I'm going to name it over here. 03:47.760 --> 03:49.920 So I'm going to call it retry button. 03:50.280 --> 03:52.600 And also we need to scale up our button. 03:52.600 --> 03:54.240 So let's select the button first. 03:54.240 --> 03:58.720 And we're gonna hold down alt on our keyboard to resize it from center. 03:58.760 --> 03:59.840 As you can see. 04:00.240 --> 04:04.280 And I also want to change the a change. 04:04.280 --> 04:10.120 You can simply say this button sprite with something else or we can just leave it like this. 04:10.160 --> 04:14.920 It also seems too much fine, but I'm going to change with something. 04:14.920 --> 04:18.280 So I have the sprite over here, as you can see. 04:18.280 --> 04:20.880 So I'm going to select my retry button in the hierarchy. 04:21.000 --> 04:26.680 Let's go to Inspector Image Component and we can see Source Image and it's set to UI sprite. 04:26.680 --> 04:29.080 So I'm going to replace this with something else. 04:29.080 --> 04:32.000 So I'm going to select this one I have it my UI folder. 04:32.000 --> 04:33.560 So I'm going to select that one. 04:33.560 --> 04:35.640 And let's drag it over to this slot. 04:35.680 --> 04:39.200 As soon as we drag it now we can see our button. 04:39.200 --> 04:43.560 And you can just hold down alt on your keyboard to resize it from center. 04:43.680 --> 04:47.080 And the problem is that we're not able to see our text. 04:47.120 --> 04:52.520 Basically the text or the font size is too small, so we need to make it a little bit bigger. 04:52.520 --> 04:56.160 So let's click over here in order to see the child. 04:56.200 --> 04:59.920 And we're going to select our text component underneath our retry button. 04:59.920 --> 05:02.240 Let's go to text Component in the inspector. 05:02.240 --> 05:05.510 And we're going to make the font size something around 100. 05:05.510 --> 05:06.870 So let's make it 100. 05:06.910 --> 05:09.390 And I also want to change color with something. 05:09.390 --> 05:10.750 Something like this color. 05:10.750 --> 05:13.310 You can go with any color that you like. 05:13.350 --> 05:15.710 And I'm going to choose font style to bold. 05:15.710 --> 05:20.390 And also I want to change the font of this button or this font. 05:20.390 --> 05:25.550 I just want to change it so we can drag the font over here in this font slot. 05:25.830 --> 05:31.310 Uh, or you can just click over here as well to the right to this right size. 05:31.310 --> 05:34.230 And if you have a font then you can just choose that. 05:34.230 --> 05:35.790 So I'm going to choose this one. 05:35.990 --> 05:38.390 Or this one seems pretty much cool. 05:38.590 --> 05:41.750 You can choose any font that you like. 05:41.790 --> 05:43.190 I'm going to choose this one. 05:44.310 --> 05:48.310 And what we're going to do now, uh, we're going to change uh, the button. 05:48.310 --> 05:52.190 Instead of saying button, I'm going to say something like a retry. 05:52.350 --> 05:53.830 So let's say retry. 05:53.870 --> 05:57.950 Sorry, we need to select or we need to just go over to this text file. 05:57.950 --> 06:00.550 And I'm going to change it to something like retry. 06:01.230 --> 06:03.710 And this uh seems pretty much cool. 06:03.750 --> 06:06.870 And we're going to increase our font size a little bit. 06:06.870 --> 06:09.110 Something around 1 to 5. 06:09.710 --> 06:12.390 And we're going to select our retry button. 06:12.390 --> 06:13.750 Let's hold down alt. 06:13.950 --> 06:16.950 And we're going to resize it from center like this. 06:17.310 --> 06:24.950 And this seems fine but we're going to make our font size a little bit uh down uh something around uh 06:24.950 --> 06:25.470 100. 06:25.510 --> 06:27.950 Or we can put it 90 as well. 06:27.950 --> 06:34.230 So let's go to text comp text, select the text, um, check underneath your button and then make this 06:34.230 --> 06:36.350 font size something around 90. 06:36.390 --> 06:38.950 But it's totally up to you how much you want. 06:38.990 --> 06:44.830 I'm going to choose 95, and I want all of these letters to be capitalized. 06:44.830 --> 06:47.550 So I'm going to say retry something like this. 06:47.550 --> 06:49.230 And this seems pretty fine now. 06:49.230 --> 06:52.110 And you can adjust as well the text. 06:52.310 --> 06:58.750 And you can just select your button and you can hold down alt on your keyboard to resize it from center. 06:58.750 --> 07:05.590 And let's suppose you just do you just want to resize it same proportional to the width as well as height. 07:05.630 --> 07:13.390 Then you can just hold down or shift on your keyboard, so it will resize and resize in the in the height 07:13.390 --> 07:19.190 and in the width with same uh, same or just it's gonna match up the ratio. 07:19.350 --> 07:22.470 So you can just hold down shift key in order to do that. 07:22.470 --> 07:27.750 Or you can simply press down hold down, or you can simply hold down on your keyboard or alt key to 07:27.790 --> 07:29.390 resize it from center. 07:29.750 --> 07:32.150 And I want this button from the top. 07:32.150 --> 07:34.270 Something over here we want. 07:34.310 --> 07:39.710 So if we go to Inspector Rect Transform, click over here and we're gonna hold down alt and we're gonna 07:39.710 --> 07:41.670 choose this top anchor one. 07:41.670 --> 07:45.550 And now we're going to drag it a little bit down something like this. 07:45.590 --> 07:52.190 And if we try to scale down or scale up our screen size, we can see this panel just getting resized 07:52.190 --> 07:59.070 as the size of our screen as well as the button inside this panel just resize resizing according to 07:59.110 --> 08:00.470 our panel size. 08:00.470 --> 08:02.070 So basically that is the thing. 08:02.110 --> 08:06.510 And now we're going to duplicate this button in order to create the menu button. 08:06.510 --> 08:08.430 Basically we're gonna have two buttons. 08:08.430 --> 08:09.630 One will be retry. 08:09.670 --> 08:14.230 So once we click on this retry button then we're gonna retry our level. 08:14.230 --> 08:18.510 And once we click on that menu button then we're gonna load up our menu. 08:18.910 --> 08:20.590 So let's select the retry button. 08:20.590 --> 08:23.550 And let's press down Ctrl D in order to duplicate. 08:23.550 --> 08:26.390 And I'm gonna move it down something like this much. 08:26.390 --> 08:31.630 And I'm gonna call this button instead of retry button one I'm gonna call it menu button. 08:31.630 --> 08:35.670 So let's call it my menu button. 08:35.670 --> 08:37.390 I'm gonna call it menu button. 08:37.390 --> 08:38.550 And this seems fine. 08:38.550 --> 08:43.230 And also we need to change the text inside of this button as well. 08:43.230 --> 08:46.390 Instead of saying retry we're going to say something like menu. 08:46.390 --> 08:49.150 So let's select the text underneath our menu button. 08:49.150 --> 08:53.830 And let's change the text in our text component as something like menu. 08:53.870 --> 08:55.550 Now this seems pretty much cool. 08:55.550 --> 08:59.790 And I'm going to drag my menu button a little bit down, something this much. 08:59.790 --> 09:01.590 And let's select the retry button. 09:01.590 --> 09:03.830 And I'm going to drag it a little bit down. 09:04.070 --> 09:06.670 And I want it text right over here. 09:06.750 --> 09:10.910 I said something like, game is over or defeat or we lose. 09:10.910 --> 09:12.230 You lose something like that. 09:12.230 --> 09:14.950 We're gonna say, so let's select the panel game object. 09:14.950 --> 09:15.790 Don't select. 09:15.830 --> 09:19.070 Uh, we're not gonna select our game over UI game object. 09:19.070 --> 09:24.270 Instead, we're gonna select our panel because I want that text to be inside of this panel. 09:24.270 --> 09:25.110 So that's why. 09:25.150 --> 09:27.230 So we're gonna select our panel game object. 09:27.230 --> 09:28.550 Let's right click on it. 09:28.550 --> 09:31.030 Then go to UI legacy in the bottom. 09:31.030 --> 09:32.430 And then choose this text. 09:32.590 --> 09:36.030 And I'm gonna move this text somewhere over here. 09:36.030 --> 09:40.110 So firstly we're going to move over to let's scale this first. 09:40.110 --> 09:43.910 So we're going to hold down alt on our keyboard to resize it from center. 09:43.910 --> 09:46.230 And I'm going to move it somewhere over here. 09:46.750 --> 09:52.150 And let's increase the text font size of this text in order to see. 09:52.310 --> 09:55.270 So I'm gonna set the font size something 100. 09:55.270 --> 10:00.270 And I'm going to change the color with something else in order to make it visible visible. 10:00.430 --> 10:05.470 And I want both of these alignment to center to be centered, as you can see. 10:05.910 --> 10:12.750 And I want this text takes to fit in the top, uh, top corner or top side or top anchor, you can say 10:12.750 --> 10:14.030 inside this panel. 10:14.030 --> 10:20.430 So in order to do that, in order to just set it on that anchor, what we basically need to do, we 10:20.430 --> 10:24.190 need to select the text and then go over to Inspector Rect Transform. 10:24.390 --> 10:26.910 Click over here and we're going to hold down alt. 10:27.030 --> 10:30.230 And we can see in the top right we have this anchor. 10:30.230 --> 10:31.870 So we're going to choose that one. 10:31.870 --> 10:35.070 So it will be always in the top side. 10:35.070 --> 10:40.550 And it's just going to resize as the size of our uh this uh panel. 10:40.550 --> 10:44.510 And I'm going to drag it a, I'm going to drag it a little bit down. 10:44.950 --> 10:50.790 And uh, instead of saying new text, I'm going to say something like, you lose, uh, something like 10:50.830 --> 10:56.750 you lose and you can choose a text as well, or sorry font that you want. 10:56.750 --> 10:58.110 I'm going to choose this one. 10:58.430 --> 11:03.190 This one seems pretty much fine to me, and I'm gonna choose font style to bold. 11:03.190 --> 11:05.430 And this a much pretty much cool. 11:05.590 --> 11:09.070 And now if we try to scale down or scale up. 11:09.110 --> 11:11.990 We can see the text inside of this panel. 11:12.030 --> 11:20.510 It's just staying in the top anchor and it just resizing itself or just increasing the size according 11:20.550 --> 11:22.310 to our panel size. 11:22.550 --> 11:28.030 So basically that is the thing of choosing that top anchor one as well as for this button. 11:28.270 --> 11:29.990 So make sure you just do that. 11:29.990 --> 11:34.310 And I'm gonna say this text to something like game over text or you lose. 11:34.310 --> 11:40.190 So I'm gonna rename it to you lose something like that. 11:40.190 --> 11:42.390 And this seems pretty much cool by now. 11:42.790 --> 11:45.790 And also we're going to create a text right over here. 11:45.790 --> 11:49.910 And it's just going to reference the high score something like that. 11:49.950 --> 11:51.750 It's gonna reference the high score. 11:51.950 --> 11:55.910 Uh, but uh, let's uh select the you lose you lose text. 11:55.910 --> 11:59.190 And we're going to press down Ctrl D in order to make it duplicate. 11:59.190 --> 12:00.710 And I'm gonna move it down. 12:00.870 --> 12:04.590 And instead of saying you lose, I'm going to say something like high score. 12:04.790 --> 12:06.750 So let's put high score. 12:08.230 --> 12:08.830 High score. 12:08.870 --> 12:09.910 Something like that. 12:10.190 --> 12:11.870 And I'm going to make a colon. 12:11.870 --> 12:13.590 And this seems pretty much fine. 12:13.590 --> 12:16.870 And for this text I'm going to choose the to the left side. 12:16.870 --> 12:18.990 It's just going to be from the left side. 12:18.990 --> 12:21.710 So I'm going to go over to my Inspector Rec Transform. 12:21.710 --> 12:24.350 Click over here and we're going to hold down alt. 12:24.510 --> 12:27.430 And for this we can just leave it like this. 12:27.430 --> 12:34.590 And we can just make it, or we can just drag it inside in order to just to be there. 12:34.910 --> 12:40.310 And I guess you can just play around with this rec tool and you're going to get that, and I'm going 12:40.310 --> 12:46.350 to decrease the size or the font size a little bit down as something around 80. 12:46.390 --> 12:48.350 I guess 80 seems pretty much cool. 12:48.350 --> 12:54.470 And I want this text to be start from the left side or left side somewhere in this left side. 12:54.470 --> 12:56.950 So that's why we're going to move over to this alignment. 12:56.950 --> 12:58.910 And we're going to choose the left one. 12:58.910 --> 13:01.950 And now it's always going to start from the left. 13:02.070 --> 13:05.390 And I'm going to move it a or drag it inside. 13:06.030 --> 13:07.950 And we're going to duplicate this. 13:08.030 --> 13:13.710 But before we duplicate I'm going to name this text to something like High Score text or let's go to 13:13.750 --> 13:19.510 Inspector and I'm going to name it High Score text, high score text. 13:19.510 --> 13:23.670 And let's duplicate this high score text, this high score text. 13:23.670 --> 13:25.550 And we're going to move to the right side. 13:25.550 --> 13:29.510 And that's going to reference how much score that we made so far. 13:29.510 --> 13:31.830 So we're going to select our high score text. 13:31.830 --> 13:34.190 And we're going to duplicate by Ctrl D. 13:34.350 --> 13:36.630 And I'm going to move this over here. 13:36.630 --> 13:39.990 And also I want this to be start from the left side. 13:39.990 --> 13:43.990 So make sure you just go to alignment and then choose the left one. 13:43.990 --> 13:47.270 And instead of saying high score I'm going to set to zero. 13:47.270 --> 13:51.230 So it's just going to reference how much score that we made so far. 13:51.230 --> 13:56.830 And I'm going to move it like to the like to the like to right side. 13:56.830 --> 14:00.910 And now I guess this is much this is fine. 14:00.910 --> 14:03.830 You can just play around and you're going to get that. 14:03.830 --> 14:08.830 And I'm instead of saying high score text one, I'm going to say something like this one to be high 14:08.870 --> 14:09.350 score. 14:09.540 --> 14:14.780 Basically, it's just gonna be our high score or that we made so far. 14:14.860 --> 14:17.140 So I'm gonna call it high score. 14:17.860 --> 14:18.940 High score. 14:19.420 --> 14:24.740 And I want to change the font of this high score with something else. 14:24.740 --> 14:27.260 So let's select the text first, which is high score. 14:27.420 --> 14:29.580 Let's go to Inspector Text component. 14:29.580 --> 14:31.460 And we're going to choose the font. 14:31.500 --> 14:36.460 Something else like this I guess this seems pretty much cool to me. 14:36.460 --> 14:37.980 So I'm going to choose this one. 14:38.140 --> 14:42.620 And I'm gonna increase the size or the font size a little bit up. 14:42.980 --> 14:44.500 So let's go to font size. 14:44.500 --> 14:49.980 And I'm gonna make it something around 125 and 125 seems pretty much fine. 14:49.980 --> 14:52.180 And you can just adjust as well. 14:52.380 --> 14:58.020 And you can just put over here in this text component, the number that you would like to go with by 14:58.020 --> 14:59.700 default, something like 1000. 14:59.740 --> 15:02.540 But I'm going to set by default to be zero. 15:02.780 --> 15:04.860 And this app fine to me. 15:05.220 --> 15:09.900 And now what we're going to do, we're going to make this game over UI game object a prefab. 15:09.900 --> 15:15.580 So that's why we just created an empty game object inside this canvas game object first, and we just 15:15.580 --> 15:22.700 made the size of that game over by game object as the size of our canvas, and we just place all of 15:22.740 --> 15:28.980 the necessary things inside that game over UI game object, because we're gonna make that one prefab 15:28.980 --> 15:34.620 so we don't need to work from scratch, make this text, and then create this button from scratch. 15:34.620 --> 15:35.860 So we're gonna have the copy. 15:35.860 --> 15:39.820 So that's why we just created an empty parent game object first. 15:39.820 --> 15:43.420 And inside that game object we just have done all of these things. 15:43.460 --> 15:48.740 Now we're going to select the parent game object or this game over key game object underneath canvas. 15:48.740 --> 15:52.380 And let's drag it over to this prefabs folder that we made. 15:52.380 --> 15:55.020 So I'm going to select my prefabs folder. 15:55.140 --> 15:59.780 Let's select the Game Over UI GameObject from the hierarchy underneath our canvas. 15:59.780 --> 16:05.540 And let's drag it over to this prefab folder in order to make it prefab or to in order to make that 16:05.540 --> 16:06.300 one copy. 16:06.780 --> 16:12.980 And if we just click on this play button in the top and try to click on this retry or this menu button, 16:12.980 --> 16:16.060 you will see this button will do nothing currently. 16:16.060 --> 16:16.500 Why? 16:16.540 --> 16:19.740 Because we need to hook this button with some certain function. 16:19.740 --> 16:23.860 Like once we click on this retry button, then we want to reload the game. 16:23.860 --> 16:29.060 And once we click on this menu button, we just want to load up the menu scene or the menu. 16:29.300 --> 16:30.980 So I'm gonna get out of play mode. 16:30.980 --> 16:35.940 And also I don't want this game over UI to be active by default. 16:35.940 --> 16:37.860 I just want to deactivate. 16:37.860 --> 16:45.140 But once our, uh, deactivate by default and once our player game object loses all of his health, 16:45.180 --> 16:47.180 basically player game object dies. 16:47.220 --> 16:50.900 At that moment, we just gonna activate this game over UI. 16:50.940 --> 16:55.980 So that's why we're going to select our game over UI game object first underneath our canvas. 16:55.980 --> 16:57.340 And let's go to Inspector. 16:57.340 --> 17:02.860 And you can just uncheck in order to deactivate and or you just setting it to false. 17:02.860 --> 17:08.260 And if you just want to activate or you just want to set active to be true, then you can just go over 17:08.260 --> 17:12.380 to Inspector and then check this and it's gonna be active. 17:12.420 --> 17:13.820 I'm going to uncheck this. 17:13.820 --> 17:20.460 Basically I want that game over UI game object to be deactivated by default. 17:20.460 --> 17:25.740 But as soon as our player game object loses all of his health, then we're going to set this game over 17:25.780 --> 17:28.820 UI to be activated through our C sharp script. 17:29.260 --> 17:30.980 So basically that is the thing. 17:30.980 --> 17:37.780 So I hope you get the idea that how you can make this game over UI, make sure you just create a empty 17:37.780 --> 17:44.100 parent game object first, and then make that game object as the size of your canvas by going over to 17:44.340 --> 17:49.900 Inspector Rect Transform and then clicking over here, and you have to hold down alt on your keyboard 17:49.900 --> 17:52.020 and select this bottom right one. 17:52.020 --> 17:56.220 So it's going to be resize as the size of your canvas game object. 17:56.460 --> 18:02.780 And after that you can just do or just place all of the things that you need to do. 18:03.180 --> 18:07.340 And after that, make that make sure you just make that one prefab. 18:07.340 --> 18:08.860 So you're going to have the copy. 18:08.860 --> 18:13.420 And now I'm going to press down Ctrl s on my keyboard to save my project.