WEBVTT 00:00.040 --> 00:04.480 We need to show up how much health this player GameObject currently have. 00:04.600 --> 00:07.760 We're showing a underneath our player script. 00:07.800 --> 00:12.720 As you can see in the Inspector, we have max health paths, but the player cannot. 00:12.760 --> 00:18.920 Who just gonna play the game will not gonna gonna keep track of how much this player game object are 00:18.920 --> 00:19.640 gonna have. 00:19.680 --> 00:25.320 So we're gonna show up in the UI that so player can just know how much health we have. 00:25.320 --> 00:26.480 So let's do that. 00:26.480 --> 00:32.640 So we need to create the canvas first before we just play create the tags and then button icons. 00:32.680 --> 00:35.360 Basically we need to create the canvas first. 00:35.360 --> 00:36.640 And into that canvas. 00:36.640 --> 00:39.080 We need to place all of the UI elements. 00:39.080 --> 00:43.400 It can be icons buttons, menu something like that. 00:43.400 --> 00:45.280 So we need to create the canvas first. 00:45.280 --> 00:46.800 Then we need to do that. 00:46.800 --> 00:49.680 So let's go to hierarchy in order to create the canvas. 00:49.880 --> 00:50.840 Let's go to hierarchy. 00:50.840 --> 00:52.680 Right click or hit this plus icon. 00:52.680 --> 00:53.720 Then go to UI. 00:53.880 --> 00:55.880 And in the bottom you can see legacy. 00:56.000 --> 00:59.080 Sorry, not in the top too much bottom. 00:59.080 --> 01:02.280 Basically select this canvas in the bottom you can see. 01:02.600 --> 01:07.920 And now I'm gonna select my canvas in the hierarchy and let's drag it in the top of hierarchy so I can 01:07.960 --> 01:09.120 see all the time. 01:09.120 --> 01:10.680 And I'm going to select my canvas. 01:10.680 --> 01:13.880 And let's press down F in order to focus on that. 01:13.880 --> 01:15.600 So you need to change some settings. 01:15.600 --> 01:17.480 In order to do that go to Inspector. 01:17.480 --> 01:21.000 Scroll down move over to this canvas scaler component. 01:21.000 --> 01:24.760 And over there, as you can see it says constant pixel size. 01:24.760 --> 01:31.000 From this constant pixel size, choose this scale with screen size and put in the x, something like 01:31.000 --> 01:32.320 1920. 01:32.360 --> 01:36.800 So we're going to put 1920 and in the Y we're going to put 1080. 01:36.840 --> 01:40.880 But if your game in portrait mode then you can just swipe this value. 01:41.000 --> 01:44.200 And the X, you can simply just pass 1080. 01:44.240 --> 01:47.160 And in the Y you can simply put 1920. 01:47.200 --> 01:51.560 If your game is in portrait mode, then you can just go with that. 01:51.560 --> 01:55.920 And if your game in landscape mode then you can just leave with this. 01:56.200 --> 01:58.880 Now we are ready to create our UI. 01:58.920 --> 02:04.120 So before we create, let's create an empty game object underneath this canvas, and we're going to 02:04.160 --> 02:07.560 make the game object size as the size of our canvas. 02:07.560 --> 02:12.760 So we're going to place all of the things in there into that game object, basically to separate all 02:12.760 --> 02:18.960 of the logic or to just keep our project clean, you can simply say, so let's select the canvas, let's 02:18.960 --> 02:22.120 right click on it, then create an empty game object. 02:22.120 --> 02:25.080 And we can call this game object to something like UI. 02:25.600 --> 02:28.440 Let's call it UI and go to Inspector. 02:28.480 --> 02:29.440 Then Recttransform. 02:29.440 --> 02:34.520 Click over here and hold down alt on your keyboard and select this bottom right one. 02:34.520 --> 02:42.000 As soon as we have chosen we can see now the UI game object is the gates as the size of our canvas game 02:42.040 --> 02:48.560 object, and we are ready to populate our, uh, those UI things or icons hard icon. 02:48.560 --> 02:53.040 So let's select the UI game object underneath our canvas in the hierarchy. 02:53.080 --> 02:55.400 Let's right click on it, then go to UI. 02:55.400 --> 02:57.240 And the top you're going to see image. 02:57.240 --> 03:00.520 And I'm going to call this image through something like Heart icon. 03:00.520 --> 03:02.120 So I'm going to call it heart. 03:02.160 --> 03:10.520 I con, let's call it heart icon and I want to replace the image with our heart icon. 03:10.520 --> 03:16.440 So if we move to Inspector then image component we can see source image and it says none sprite. 03:16.440 --> 03:20.960 So you can drag the sprite with which sprite you just want to replace with. 03:20.960 --> 03:23.360 So I'm going to choose an heart sprite for it. 03:23.360 --> 03:26.680 And I have it in my assets folder as you can see. 03:26.680 --> 03:29.440 So I'm going to select my sprite first which is the heart one. 03:29.440 --> 03:30.480 So let's select that. 03:30.480 --> 03:34.760 Go to Inspector and I'm going to make the pixel per unit something like 16. 03:34.760 --> 03:38.760 And to get rid of blurry I'm going to choose this filter mode to point no filter. 03:38.760 --> 03:41.200 And after doing that click on this apply button. 03:41.200 --> 03:46.200 And now I'm going to choose my heart icon GameObject underneath canvas UI GameObject. 03:46.200 --> 03:51.000 And let's select this Heart Eye sprite and let's drag it over to this source image field. 03:51.040 --> 03:54.760 As soon as we drag it, we can see now the heart icon. 03:54.760 --> 03:57.800 And I just want to move this in the top left corner. 03:57.800 --> 04:04.400 So how you can do you can simply just drag it and then you can simply uh, you can use your mouse key 04:04.560 --> 04:09.800 and mouse in order to move it, mouse cursor in order to move it left. 04:09.800 --> 04:12.600 But instead of doing that, we have a pretty cool thing. 04:12.600 --> 04:16.520 Basically, we're going to anchor this heart icon in the top left side. 04:16.520 --> 04:20.560 So if we move to Inspector then Recttransform click over here. 04:20.560 --> 04:26.400 And you you need to hold down alt on your keyboard and select this top left one. 04:26.440 --> 04:28.560 If you just want to move to the left side. 04:28.560 --> 04:33.200 And let's suppose you just want to move to the right side, then you can just click there, hold down 04:33.200 --> 04:38.760 Alt Key on your keyboard and select this, uh, top right one or the top right anchor. 04:38.760 --> 04:45.360 But I'm gonna go with the top left and I'm gonna move it a little bit down in the X, something like 04:45.400 --> 04:53.720 I'm going to put 100 in the X as well as I'm going to put 100 in the uh sorry -100 or -50. 04:53.840 --> 04:56.040 So let's do -50 in the Y. 04:56.240 --> 04:58.480 And I'm going to do 50 in the X. 04:58.600 --> 05:02.120 And I just want to increase the size of this heart icon. 05:02.120 --> 05:08.360 So you can simply go over to this width and we can simply make it something like 150 and the width, 05:08.400 --> 05:11.360 as well as we can make 150 in the height. 05:11.400 --> 05:17.000 Now we can see it's a little bit bigger and I'm going to move it in the X, something like 100. 05:17.000 --> 05:20.280 And in the Y I'm going to move -100. 05:20.320 --> 05:23.400 Now it seems pretty much fine as you can see. 05:23.440 --> 05:28.280 And let's create the text A in order to see that how much health we have. 05:28.480 --> 05:35.160 So what we're going to do now, but before we do, let me explain why we have chosen that top left anchor 05:35.160 --> 05:35.680 one. 05:35.680 --> 05:42.040 If I just try to scale down my screen size, as you can see, the heart just resizing itself according 05:42.080 --> 05:48.920 to our screen size as well as this heart just always laying on on the top left side even. 05:48.920 --> 05:53.760 We just try to shrink down our screen as well as try to expand our screen. 05:53.760 --> 06:01.520 We can see this heart icon just always staying to the top left corner, top left corner. 06:02.080 --> 06:06.080 It's not depending uh, it's basically depending our screen size. 06:06.080 --> 06:11.160 So that is the reason we have chosen the heart icon to the top left corner. 06:11.160 --> 06:16.000 So in order to choose that basically you need to move over to this back transform in Inspector. 06:16.000 --> 06:19.920 And then click over here and hold down Alt or Alt on your keyboard. 06:19.920 --> 06:25.040 And you can select any anchor, uh, or any side that you want to go with. 06:25.040 --> 06:30.960 But I'm gonna live with this top left, and let's create a text in order to see that how much health 06:30.960 --> 06:34.240 we're gonna have so the player can just keep track of it. 06:34.240 --> 06:37.040 So let's select the, uh, UI game object one more time. 06:37.040 --> 06:40.160 Let's right click on it and let's go to UI legacy. 06:40.160 --> 06:42.720 In the bottom you can see and then choose this text. 06:42.720 --> 06:45.680 And I'm gonna call this text to something like health. 06:45.840 --> 06:49.440 So I'm gonna call it let's call it health Text instead. 06:49.440 --> 06:51.160 So I'm going to call it health text. 06:51.280 --> 06:55.080 And I also want this to put it to the top left corner. 06:55.080 --> 06:57.880 But before we do let's increase the size of it. 06:57.880 --> 07:00.520 So I'm going to choose the arrow tool from Scene View. 07:00.520 --> 07:02.240 And I'm going to scale this up. 07:02.240 --> 07:07.160 So we're going to hold down alt on our keyboard to resize it from center, as you can see. 07:07.400 --> 07:12.560 And I'm gonna increase the font size in order to be able to see or to notice that. 07:12.560 --> 07:16.000 So let's go to text Component in Inspector and Font size. 07:16.000 --> 07:19.440 I'm going to make something around 100 and font style. 07:19.440 --> 07:23.320 I'm going to choose bold and I'm going to change the color with something else. 07:23.320 --> 07:25.600 You can choose any color that you like. 07:25.880 --> 07:30.040 And I'm gonna I'm gonna set the alignment to both of this center. 07:30.040 --> 07:31.960 So it's gonna be center always. 07:32.120 --> 07:34.800 Or we can choose this alignment to the left side. 07:34.800 --> 07:38.560 So it's gonna start always from the left side. 07:38.560 --> 07:41.520 And also I want to change the font as well. 07:41.520 --> 07:46.960 So if you have a font then you can just drag it over to this font slot from that assets folder. 07:46.960 --> 07:51.800 So I have so I can just gonna move over to my fonts folder in project tab. 07:51.800 --> 07:53.160 And I'm going to choose this one. 07:53.160 --> 07:55.800 So let's select that and drag it over here. 07:55.800 --> 07:57.240 As soon as we drag it. 07:57.240 --> 07:58.920 Now the font just get changed. 07:58.920 --> 08:01.720 And I'm going to move this one to the left corner. 08:01.720 --> 08:04.210 I'm going to increase the font size a little bit. 08:04.330 --> 08:05.850 Something like 1 to 5. 08:05.850 --> 08:07.410 And let's go to Rect Transform. 08:07.410 --> 08:09.770 Click over here and we're going to hold down alt. 08:09.770 --> 08:11.850 And let's choose this top left corner. 08:11.850 --> 08:15.010 And I'm going to move this text to something over here. 08:15.290 --> 08:16.890 So it's gonna be fine. 08:16.890 --> 08:19.010 You can just play around with that value. 08:19.050 --> 08:20.370 It's totally up to you. 08:21.530 --> 08:24.970 And we can choose any color other color if we want. 08:25.450 --> 08:29.250 Like, want to go with, uh, I think it's fine. 08:29.250 --> 08:34.570 And let's, uh, instead of showing new text, I'm going to set to zero something like that. 08:34.810 --> 08:39.090 And if you want to choose another font, you can just click over here if you have. 08:39.130 --> 08:43.410 Or you can simply select any of them and drag it to this font slot. 08:43.610 --> 08:45.890 And I'm going to choose a another one something. 08:45.890 --> 08:48.090 This one seems pretty fine to me. 08:48.090 --> 08:49.970 So I'm going to increase the font size. 08:49.970 --> 08:51.890 Something around one five. 08:51.890 --> 08:54.210 Sorry 150. 08:56.610 --> 08:56.970 Sorry. 08:57.010 --> 08:59.450 We need to choose over here 150. 09:00.050 --> 09:03.290 And I'm going to set this to one back to one. 09:03.330 --> 09:08.450 or if you just want to reset all of the settings, then you can just right click on that component and 09:08.450 --> 09:11.010 then click on this reset in order to reset. 09:11.010 --> 09:18.810 If you just mess around with that and I'm going to still, still I'm going to increase my size of this 09:19.170 --> 09:20.530 takes a little bit. 09:20.530 --> 09:22.490 So I'm going to choose 160. 09:22.530 --> 09:25.010 I guess 160 is fine by now. 09:25.250 --> 09:26.930 And I'm going to choose my heart icon. 09:26.930 --> 09:29.650 I'm going to make it a little bit small. 09:29.650 --> 09:32.690 So I'm going to choose in the width 1 to 5. 09:32.730 --> 09:35.730 And in the height I'm going to choose 1 to 5. 09:35.970 --> 09:38.010 So this one seems perfect now. 09:38.170 --> 09:41.770 And I'm going to choose my text and let's move it a little bit up. 09:42.170 --> 09:45.410 And I guess this is pretty fine. 09:45.730 --> 09:54.210 And still I want to increase my font something 200 Sims 2 to 5, 2 to 5 seems pretty much fine. 09:54.730 --> 09:58.770 So we can just play around with that value and it's pretty cool. 09:59.330 --> 10:03.010 So what we're gonna do now we're going to select our UI game object. 10:03.010 --> 10:05.010 So make sure you select the parent one. 10:05.010 --> 10:08.210 So that's why we just created a empty game object first. 10:08.210 --> 10:11.650 And we just recite it as the size of our canvas. 10:11.650 --> 10:16.450 And then we just created this icon and the text to keep our project clean. 10:16.650 --> 10:21.050 And now we're going to select our UI game object and we're going to make this one prefab. 10:21.050 --> 10:29.370 So in order to create this empty GameObject, first is to Purpose bus our uh to make that one prefab. 10:29.370 --> 10:32.210 So that's why and to keep our project clean. 10:32.210 --> 10:34.210 So we're going to select our UI game object. 10:34.210 --> 10:35.730 So basically the parent one. 10:35.730 --> 10:39.610 And let's drag it over to this assets folder and then prefabs folder. 10:39.610 --> 10:43.410 So if you have a prefab folder then you can just directly drag it there. 10:43.410 --> 10:46.930 Or you can simply drag it over to this assets as well. 10:46.930 --> 10:49.090 So I have my prefabs folder. 10:49.090 --> 10:55.570 So I'm going to select my UI GameObject from that UI, this game object underneath my canvas in the 10:55.570 --> 10:56.130 hierarchy. 10:56.130 --> 11:01.130 And let's drag it over to this prefabs folder to make it prefab so we can have the copy. 11:01.130 --> 11:06.010 So now if I select my UI GameObject underneath my canvas and then delete it. 11:06.010 --> 11:07.690 As you can see, it's gone. 11:07.690 --> 11:10.810 But we do know we have the prefab basically means the copy. 11:10.810 --> 11:14.530 So we can simply select that that one from that folder. 11:14.530 --> 11:19.930 And we can simply drag it over to this canvas game object at top of this canvas game object in order 11:19.930 --> 11:21.970 to restore that directly. 11:21.970 --> 11:24.810 As we can see now we have the UI. 11:24.850 --> 11:29.770 So basically that is the thing or the, uh, to create a empty game object. 11:29.770 --> 11:33.410 The purpose was to make our game make this one prefab. 11:33.410 --> 11:34.690 So we're going to have the copy. 11:34.690 --> 11:40.250 So we don't need to work from scratch basically adjusting this heart icon then creating the text. 11:40.250 --> 11:42.210 So we don't need to work from scratch. 11:42.410 --> 11:45.450 So that's why we just created an empty game object first. 11:45.450 --> 11:48.970 And then we just created this heart icon and the text. 11:49.010 --> 11:52.090 I hope you get the idea that how you can do it. 11:52.090 --> 11:54.850 And let's make our project a little bit clean. 11:54.850 --> 11:57.650 So I'm going to separate all of these prefabs. 11:57.650 --> 12:00.210 So I'm going to create an character prefabs folder. 12:00.210 --> 12:03.050 So I'm going to drag all of the character like this. 12:03.050 --> 12:03.770 Enemy one. 12:03.770 --> 12:08.730 Enemy two, and the player into that folder to keep our project more clean. 12:08.730 --> 12:10.850 So let's right click on this prefab folder. 12:10.850 --> 12:12.730 Let's create a sub folder. 12:12.730 --> 12:16.330 And I'm going to call this folder to something like Character Prefabs. 12:16.330 --> 12:20.130 So I'm going to call it character simply let's call it character instead. 12:20.130 --> 12:23.650 And I'm going to select my enemy one, enemy two and this player. 12:23.650 --> 12:28.250 And let's drag it over to this folder to keep that in separate folder. 12:28.250 --> 12:31.610 And let's create another folder for this ground prefab. 12:31.610 --> 12:33.890 So let's right click on this prefab folder. 12:33.890 --> 12:35.850 Let's create another sub folder. 12:35.850 --> 12:40.850 And I'm going to call this folder to something like ground tiles or ground tiles prefab. 12:41.010 --> 12:45.410 So I'm going to select all of the ground from here to here. 12:45.810 --> 12:47.770 And I'm going to select all of them. 12:48.610 --> 12:50.770 And let's drag it over to that folder. 12:51.130 --> 12:54.250 And let's create another folder for our object. 12:54.250 --> 12:56.650 And also we're going to create a UI folder. 12:56.650 --> 12:59.330 But before we do let's create a object folder. 12:59.330 --> 13:01.930 So let's right click there create folder. 13:01.930 --> 13:04.850 And I'm going to call this folder to something like objects. 13:04.850 --> 13:10.130 And I'm going to select all of this game object like this camera check and this floating, then this, 13:10.330 --> 13:13.050 uh, I guess camera pattern and this UI. 13:13.090 --> 13:16.850 And I'm going to drag it over to this, uh, over to that sub folder. 13:16.850 --> 13:24.290 Now we can see our project is much more clean, and we can simply press down Ctrl S to save our project. 13:24.290 --> 13:25.890 And it seemed to much clean. 13:25.890 --> 13:32.290 And we can make the hierarchy as well, a little more clean by clicking, uh, by basically creating 13:32.290 --> 13:33.810 an empty parent game object. 13:33.810 --> 13:38.450 And we can just select all of this game object and we can just make it parent, and then we can just 13:38.450 --> 13:41.090 click over here to just collapse at once. 13:41.090 --> 13:44.370 So we can make our hierarchy a lot more clean. 13:44.570 --> 13:45.890 But you can just do that. 13:45.890 --> 13:47.210 I'm not gonna do that. 13:47.530 --> 13:53.210 Uh, you can just go and, uh, if you just want to do that so you can go ahead and do it. 13:53.770 --> 13:55.090 But I'm not gonna do. 13:55.130 --> 13:57.050 I just want in this way. 13:57.290 --> 14:03.290 So we're going to take a look in the next lecture, how we can just link up this UI with our player 14:03.330 --> 14:03.850 health. 14:04.010 --> 14:05.850 So basically that is the thing.