WEBVTT 00:00.040 --> 00:02.280 Now we need to show up in the UI. 00:02.520 --> 00:07.720 How many hearts we have, as well as how many apples we collected so far. 00:07.880 --> 00:14.200 So if I select my player GameObject in the hierarchy, then go over to Inspector the Inspector tab, 00:14.440 --> 00:15.960 then player Skip. 00:16.000 --> 00:21.800 As you can notice, we have the player maxhealth underneath our player script, so we need to show up 00:21.800 --> 00:23.800 in the UI as well. 00:23.960 --> 00:30.480 And we do know that in the in order to show show in the UI, we need to create our canvas first. 00:30.520 --> 00:32.280 To do that let's go to hierarchy. 00:32.280 --> 00:34.360 Right click or hit this plus icon. 00:34.360 --> 00:35.520 Then go to UI. 00:35.520 --> 00:38.320 And in the bottom you can notice canvas. 00:38.320 --> 00:41.120 So just click on it in order to select that. 00:41.120 --> 00:42.800 And I'm going to select my canvas. 00:42.840 --> 00:45.920 Let's drag it in the top so we can see all the time. 00:45.920 --> 00:48.240 And let's select this canvas in the hierarchy. 00:48.240 --> 00:51.440 And we're going to press down F in order to focus on it. 00:51.800 --> 00:53.680 Uh so we need to do some settings. 00:53.680 --> 01:00.680 So let's suppose you just want to fit your UI in any mobile screen or any screen size like that. 01:00.880 --> 01:02.810 Then you need to do one settings. 01:02.810 --> 01:06.610 That is, select your canvas first, then move over to Inspector. 01:06.650 --> 01:11.050 Then scroll down to the bottom says Canvas Scaler component. 01:11.090 --> 01:15.050 Basically move over to this canvas scaler component over there. 01:15.090 --> 01:19.410 As you can notice UI scale mode and it says constant pixel size. 01:19.410 --> 01:26.610 So from this constant pixel size to choose this scale with screen size and in the x or in the width, 01:26.650 --> 01:34.570 we're going to put 1920 and in the height or in the Y, we're going to put 2080 since our game is landscape 01:34.570 --> 01:34.810 mode. 01:34.810 --> 01:36.370 So that's that's why. 01:36.570 --> 01:41.610 And if your game in portrait mode then you can just swipe the value and it's okay. 01:41.890 --> 01:45.970 So once we are done let's create an empty parent game object first. 01:45.970 --> 01:50.850 And inside that parent game object we're gonna place all of the UI elements. 01:50.850 --> 01:57.490 We just want to do that basically to keep our project clean or the simply the hierarchy. 01:57.690 --> 02:00.130 So let's select our canvas first. 02:00.130 --> 02:04.010 Let's right click on it and let's create an empty game object. 02:04.010 --> 02:07.090 And I'm going to call this game object to something like UI. 02:07.210 --> 02:13.490 And after doing that go over to Rect Transform in Inspector and then click over here. 02:13.490 --> 02:15.090 And we're going to hold down alt. 02:15.090 --> 02:17.570 And we will select this bottom right one. 02:17.570 --> 02:24.970 And as soon as we selected that we can see this UI game object gets size at the size of our canvas. 02:24.970 --> 02:27.010 And now we are ready to do our. 02:27.210 --> 02:31.530 Just put the apple icon as the heart icon as well. 02:31.530 --> 02:33.930 So to do that I'm going to select my UI. 02:34.450 --> 02:39.970 Make sure you select the UI, not the canvas that we created this empty game object first. 02:39.970 --> 02:47.410 So that's why to just keep our project clean or to because we're going to make this UI game object later 02:47.410 --> 02:48.170 on prefab. 02:48.170 --> 02:50.130 So we we will have the copy. 02:50.370 --> 02:52.330 So we don't need to work from scratch. 02:52.330 --> 02:55.690 So that's why now we're going to select our game object. 02:55.690 --> 02:57.050 Let's right click on it. 02:57.050 --> 03:00.610 And we're going to go to 2D object then sprites. 03:00.610 --> 03:06.820 And then we're gonna choose this square, and we can call this square to something like Apple icon. 03:07.100 --> 03:07.620 Sorry. 03:07.660 --> 03:08.300 Apple. 03:08.540 --> 03:10.860 Sorry Apple icon. 03:10.860 --> 03:14.780 Let's call it apple icon and then select that. 03:16.700 --> 03:19.620 Sorry we have done mistake. 03:19.660 --> 03:19.940 Okay. 03:19.980 --> 03:22.260 So the mistake is that we're gonna delete this. 03:22.580 --> 03:26.220 Uh, let's select this, uh, UI game object underneath our canvas. 03:26.220 --> 03:28.860 Let's right click on it, then UI. 03:28.900 --> 03:31.860 And we're gonna select this image component in the top. 03:31.860 --> 03:37.780 As you can notice select that and we're going to call it something like instead of calling image we're 03:37.780 --> 03:42.380 gonna call it Apple icon Apple icon something like that. 03:42.380 --> 03:46.460 And now we're gonna change this source image with our Apple icon. 03:46.460 --> 03:53.020 So if we select our Apple icon underneath our UI game object, then move over to Inspector tab. 03:53.020 --> 03:57.500 In Image Component we can see Source Image and it says none sprite. 03:57.500 --> 04:01.820 So we need to drag our Apple sprite right over here. 04:01.900 --> 04:03.500 or the Apple icon. 04:03.500 --> 04:10.140 To do that, we're gonna move over to our project app assets, and then we will head over to our sprites 04:10.140 --> 04:13.220 folder, then Coins and hearts hearts folder. 04:13.460 --> 04:18.100 And from here, uh, sorry, not here. 04:18.380 --> 04:21.820 We have the Fruitful Fruits folder first. 04:21.820 --> 04:26.060 So I'm gonna move over to my fruits folder, which I have it. 04:26.900 --> 04:28.820 Uh, let's find it first. 04:28.820 --> 04:30.740 Uh, over here, as you can see. 04:30.980 --> 04:32.820 And we have the apple in the first. 04:32.820 --> 04:35.020 So we're gonna select that sprite sheet. 04:35.060 --> 04:38.980 Let's click on this arrow in order to see the individual ones. 04:38.980 --> 04:43.900 And we can select our Apple icon underneath our UI GameObject in the hierarchy. 04:44.180 --> 04:50.660 Then select the first Apple sprite or any of them, and then drag it over to this image component and 04:50.940 --> 04:53.740 replace this source image with this apple. 04:53.860 --> 04:58.860 So basically drag your Apple sprite inside this, uh, source image slot. 04:59.020 --> 05:05.430 And after doing that make sure you click on this set native size in the bottom, and as soon as we have 05:05.430 --> 05:08.430 done, we can see now our Apple icon. 05:08.430 --> 05:13.430 And I want this apple icon always to the left side, top left side. 05:13.430 --> 05:17.350 So for that what we're going to do we're going to select our Apple icon. 05:17.350 --> 05:19.630 Then go over to Inspector Rig Transform. 05:19.630 --> 05:20.470 Click here. 05:20.470 --> 05:22.030 And we're going to hold down alt. 05:22.030 --> 05:26.630 And we're going to select this top left corner top left corner. 05:26.630 --> 05:30.710 So I want this Apple icon to be somewhere around here. 05:31.390 --> 05:35.070 And we can duplicate this in order to create our heart. 05:35.310 --> 05:37.990 So I'm gonna duplicate this. 05:37.990 --> 05:42.390 Firstly I'm going to move it over here and we're gonna duplicate this. 05:42.390 --> 05:45.270 To do that we're going to select our Apple icon. 05:45.270 --> 05:47.510 Let's press down Ctrl D to duplicate. 05:47.510 --> 05:50.350 And let's move it up somewhere around here. 05:50.670 --> 05:55.350 And we're going to call this one something like this will be our heart icon. 05:55.350 --> 05:59.150 So let's call it heart icon like that. 05:59.510 --> 06:03.120 And we also need to change the sprite with our heart. 06:03.160 --> 06:07.520 To do that, I'm going to head over to my project tab one more time. 06:07.680 --> 06:13.240 Then assets and then sprites folder, and we're going to move over to Coins and Hearts folder. 06:13.240 --> 06:15.360 And I have it over here. 06:15.360 --> 06:17.080 So let's click on this arrow. 06:17.080 --> 06:21.280 So I'm going to select the first icon or first sorry not icon. 06:21.280 --> 06:23.640 Or you can simply call it icon. 06:23.640 --> 06:26.600 Or you can simply call it sprite as well. 06:26.600 --> 06:28.080 So I'm going to select the first one. 06:28.080 --> 06:31.640 Let's drag it over to this slot in our image component. 06:31.880 --> 06:36.840 And it's kind of it seems weird to just go to just get it back. 06:36.840 --> 06:42.080 Just scroll down to the image component and then click on this set native site. 06:42.080 --> 06:46.400 And as soon as we click on it, we can see by now this is pretty much fine. 06:46.560 --> 06:49.240 And we're going to move it somewhere over here. 06:49.560 --> 06:51.640 And let's move this up here. 06:51.840 --> 06:55.720 And I want this icons to be a little bit small. 06:55.720 --> 06:57.480 So I'm going to select both of them. 06:57.680 --> 06:59.280 Then go over to Inspector. 06:59.280 --> 07:02.160 And you can play around with this scale. 07:02.160 --> 07:07.000 So I'm gonna put a point eight in the X and point eight in the Y. 07:07.200 --> 07:08.200 Something like that. 07:08.200 --> 07:10.040 And now this seems pretty much cool. 07:10.240 --> 07:12.320 And I'm going to select my heart icon. 07:12.320 --> 07:16.160 And I'm going to drag it somewhere over here. 07:16.600 --> 07:19.640 And we're going to select our Apple icon. 07:19.640 --> 07:23.440 Let's drag it somewhere here something like that. 07:23.440 --> 07:30.240 And if we try to scale down or scale up our screen size in the game view, we can notice this apple 07:30.240 --> 07:37.400 icon and this fruit are sorry heart icon just getting resized as the size of our screen. 07:37.400 --> 07:43.840 And it just always, uh, always just getting resized in the top left side. 07:43.840 --> 07:45.720 So that's why we need to choose this. 07:45.960 --> 07:48.400 Basically we need to go over to Rect Transform. 07:48.400 --> 07:52.560 And you can choose any corner by holding down alt on your keyboard. 07:52.760 --> 07:58.320 And now we're going to put the text means how many health and how many fruits we have. 07:58.560 --> 08:01.800 So to do that we're going to select our game object. 08:01.840 --> 08:03.330 Let's right click on it. 08:03.330 --> 08:09.850 Let's create uh, basically let's go over to UI and then legacy in the bottom and then choose this text. 08:09.850 --> 08:16.330 And we can call this text to something like Apple uh Apple current Apple text. 08:16.490 --> 08:23.330 So let's call it current uh current Apple Apple text something like that. 08:23.330 --> 08:24.770 And we're gonna select that. 08:24.770 --> 08:28.730 Let's press down F in order to focus on it as you can see. 08:28.770 --> 08:31.890 And we can hold down alt to resize it from center. 08:32.210 --> 08:36.810 Uh, but the problem is that we're not able to notice since it's too much small. 08:36.810 --> 08:40.530 So to make it bigger, let's go over to Inspector Text component. 08:40.530 --> 08:47.530 And we're going to make the font size something around uh 80 and alignment both of them I'm gonna choose 08:47.530 --> 08:48.170 center. 08:48.410 --> 08:52.530 And I'm going to change the color with something else like this. 08:52.970 --> 08:56.930 And if you do have any font then you can drag it over here. 08:56.930 --> 08:58.490 So I'm going to choose this one. 08:58.930 --> 09:02.530 And I want this to be in the top left side. 09:02.850 --> 09:08.250 So what we need to do for that, we're going to move over to Inspector, then Rake Transform and then 09:08.250 --> 09:09.410 click over here. 09:09.410 --> 09:12.250 And we're going to hold down Alt Keyboard on our. 09:12.570 --> 09:15.530 We're gonna hold down alt key in our keyboard. 09:15.530 --> 09:17.770 And let's select this top left one. 09:17.770 --> 09:25.450 And now I'm gonna move it somewhere around here and font style I'm gonna choose bold in Inspector. 09:25.730 --> 09:30.170 And I want to start this text always from the left side. 09:30.170 --> 09:31.370 So alignment. 09:31.410 --> 09:32.810 Uh, this the first one. 09:32.810 --> 09:37.370 We're going to choose this left one, not the middle or the right one. 09:37.370 --> 09:41.130 So the text always just going to start from the left side. 09:41.130 --> 09:44.130 So we're going to put zero something like that. 09:44.410 --> 09:48.690 And we're gonna increase our font size a little bit up. 09:48.690 --> 09:51.570 To do that let's move over to text Component. 09:51.610 --> 09:54.010 Basically select your current Apple text. 09:54.010 --> 09:57.490 Then go over to Inspector Text Component and then font size. 09:57.490 --> 10:01.370 We're going to make it something like 1 to 5 something like that. 10:01.370 --> 10:07.260 And if you're not able to notice then you need to scale this up a little bit so you can hold down alt 10:07.300 --> 10:10.460 on your keyboard to scale it from center like this. 10:10.980 --> 10:18.020 And we're going to duplicate this one to create for our, this, uh, fruit, uh, apple. 10:18.540 --> 10:22.300 Uh, so what we're gonna do now, we're going to duplicate this. 10:22.620 --> 10:24.700 Sorry, something like this. 10:24.700 --> 10:27.900 I guess this would be pretty much fine. 10:28.100 --> 10:34.220 So let's press down Ctrl D to duplicate, and we're gonna move it down something over here. 10:34.580 --> 10:38.540 And instead of calling current Apple Text, we're going to call it. 10:38.580 --> 10:39.100 Sorry. 10:39.340 --> 10:40.900 Uh, this will be hard. 10:40.940 --> 10:42.620 Uh, I really apologize. 10:42.660 --> 10:45.820 This one will be the heart, uh, text. 10:45.820 --> 10:49.140 And this one, bottom one will be current Apple text. 10:49.180 --> 10:50.860 I really apologize for that. 10:50.860 --> 10:55.500 So I'm gonna select my, uh, current Apple text text game object. 10:55.540 --> 11:00.020 Let's go over to Inspector, and we're going to call it heart current heart text. 11:00.020 --> 11:05.750 So let's call it current heart or let's simply call it heart. 11:05.950 --> 11:06.510 Text. 11:06.550 --> 11:07.470 Let's call it heart. 11:07.510 --> 11:08.070 Text. 11:08.070 --> 11:09.230 And the bottom one. 11:09.230 --> 11:13.470 I'm gonna leave it just current Apple text and I'm going to remove this. 11:13.510 --> 11:18.430 And inside this one basically that those brackets and then one. 11:18.590 --> 11:21.870 And now as you can notice this seems pretty much cool. 11:21.990 --> 11:23.630 And I really apologize. 11:23.670 --> 11:30.510 I just started misspelling or just, uh, messing around like that. 11:30.670 --> 11:37.390 So what we're going to do now, we're going to put a X like that over here, uh, to denote how many, 11:37.510 --> 11:40.110 uh, fruits we have or the apple. 11:40.110 --> 11:41.950 So we're going to select any of this text. 11:41.990 --> 11:45.390 Let's uh, select the heart text or this current Apple text. 11:45.390 --> 11:47.830 We're going to press down Ctrl D to duplicate. 11:48.030 --> 11:50.470 And we're going to move it something over here. 11:50.670 --> 11:54.590 And we want this uh to be to be in the middle one. 11:54.590 --> 12:00.310 Basically the alignment to do that go over to inspector then text component and alignment. 12:00.310 --> 12:02.150 We're going to choose both of these center. 12:02.350 --> 12:07.430 And I want the font size a little bit small, something like 80. 12:07.790 --> 12:12.750 And instead of saying zero we're gonna put X something like that. 12:12.990 --> 12:15.710 And we're going to increase it up a little bit. 12:15.750 --> 12:17.190 Basically the font size. 12:17.390 --> 12:22.550 And now we're going to move it in between this zero and this heart icon. 12:22.550 --> 12:24.110 And we're going to do the same thing. 12:24.230 --> 12:31.710 Uh, basically we're going to move this uh, bit between our Apple and this text, and I'm going to 12:31.710 --> 12:35.310 select my heart X and let's move it somewhere over here. 12:35.710 --> 12:40.470 And instead of calling our text one, we're going to call it X something like that. 12:41.030 --> 12:45.270 Uh so multiplication basically and we're going to duplicate this one. 12:45.270 --> 12:51.950 So to duplicate that let's press down Ctrl D and let's move it down somewhere around here. 12:52.550 --> 12:55.270 I guess this should be pretty much fine. 12:55.470 --> 12:58.110 And we're going to select our current Apple Text. 12:58.110 --> 12:59.630 And let's move it here. 12:59.630 --> 13:01.510 And now this seems pretty much cool. 13:01.750 --> 13:07.360 And instead of calling x one Let's call it x two, something like that. 13:07.880 --> 13:14.480 And after doing all of these things, make sure you select your UI game object and turn it into a prefab. 13:14.560 --> 13:16.800 So you're going to have the copy of it. 13:16.800 --> 13:23.200 So I hope you get the idea that that why we created this parent basically empty parent game object, 13:23.200 --> 13:29.080 because we just want to place all of the things inside in that game object and we can make that one 13:29.080 --> 13:29.560 prefab. 13:29.560 --> 13:33.920 So we're going to have the copy copy and we don't need to work from scratch. 13:33.920 --> 13:35.560 So that's why we have done it. 13:35.600 --> 13:38.880 We just created an empty parent game object first. 13:38.880 --> 13:42.840 And inside that game object we just place all of the things that we need. 13:43.000 --> 13:47.800 And now we're going to select our UI game object underneath our canvas in the hierarchy. 13:47.960 --> 13:49.800 And let's turn it into prefab. 13:49.800 --> 13:54.240 So we will have the copy of it and we turn it into a prefab. 13:54.520 --> 13:57.160 And this is this seems pretty much cool. 13:57.280 --> 14:02.440 And now we need to just link up this text with our basically heart and this fruit. 14:02.480 --> 14:09.440 So if I just go ahead and then click on this play button in the top and try to try to collecting our 14:09.480 --> 14:10.000 apple. 14:10.040 --> 14:16.320 You will not able to notice inside you why it's are not going to increase at all. 14:16.560 --> 14:16.960 Why? 14:17.120 --> 14:20.600 Because we need to skip that in order to. 14:20.840 --> 14:23.000 Basically we need to link that up. 14:23.160 --> 14:30.560 So if I try to collect my heart and this apple, as you can see, as soon as we collect it, it disappeared. 14:30.560 --> 14:34.480 But the problem is that it's not updating in the UI. 14:34.600 --> 14:37.240 So we need to link that up with an script. 14:37.240 --> 14:43.280 So if I select my player gameobject in the hierarchy, then go over to Inspector, then uh, player 14:43.280 --> 14:45.320 collectible scripts in the bottom. 14:45.320 --> 14:52.080 As you can notice, current apples is one, so we need to show up in this in the UI as well. 14:52.080 --> 14:55.840 So basically we need a reference of this text and we can do that. 14:55.840 --> 14:57.560 So I'm going to get out of play mode. 14:57.560 --> 15:00.640 And I hope you get the idea that how you can do it. 15:00.640 --> 15:05.600 And I'm going to press down control S on my keyboard in order to save my project.