WEBVTT 00:00.040 --> 00:02.920 Now let's do the same thing with our heart. 00:03.000 --> 00:09.200 So for that, I'm going to move over to my project tab assets and then the sprites folder and then coin 00:09.200 --> 00:10.520 and hearts folder. 00:10.520 --> 00:14.800 I have, as you can notice right over here I have the heart. 00:14.800 --> 00:16.840 So I'm going to select that sprite sheet. 00:16.880 --> 00:18.280 Let's go over to Inspector. 00:18.320 --> 00:20.960 Let's click on this open Sprite editor. 00:21.240 --> 00:23.160 So we're going to slice individually. 00:23.160 --> 00:26.600 So sprite mode to multiple and pixel per unit. 00:26.600 --> 00:32.600 I'm going to make it something around 16 and filter mode to point no filter to get rid of blurry. 00:32.600 --> 00:35.680 And then click on this apply button in the bottom right. 00:35.920 --> 00:38.000 And let's go over to Sprite Editor tab. 00:38.000 --> 00:42.720 Let's click on this slice and let's select automatic to Create by Cell count. 00:42.720 --> 00:45.720 And let's count how many columns and rows we have. 00:45.720 --> 00:49.080 So we have one row and for eight columns. 00:49.080 --> 00:51.760 So we're going to put eight columns and one row. 00:51.920 --> 00:54.520 And then click on slice and then apply. 00:54.520 --> 00:57.040 And I'm going to select my game view once again. 00:57.040 --> 01:03.240 And let's go move over to that sprite sheet and then click on this arrow in order to see the individual. 01:03.240 --> 01:04.920 So I'm going to select the first one. 01:04.920 --> 01:08.440 Let's drag it over to this scene view or into this hierarchy. 01:08.720 --> 01:12.800 As you can notice it's kind of seem a little bit small. 01:12.800 --> 01:15.720 So we just want to make it a little bit bigger. 01:15.720 --> 01:20.600 So we need to make we need to make our pixel per unit number less. 01:20.600 --> 01:23.200 So I'm going to select that spreadsheet one more time. 01:23.200 --> 01:25.960 Let's go over to Inspector and Pixel per unit. 01:25.960 --> 01:28.000 I'm going to choose something around 12. 01:28.160 --> 01:31.000 And then let's click on this apply button in the bottom. 01:31.000 --> 01:33.320 Still it seems a little bit small. 01:33.320 --> 01:35.200 So I'm gonna do it ten. 01:35.560 --> 01:37.720 And now let's click on this apply button. 01:37.720 --> 01:40.440 Now say ten seems pretty much fine number. 01:40.800 --> 01:42.480 And we're going to do the same things. 01:42.480 --> 01:46.080 Basically we will create an empty parent game object first. 01:46.080 --> 01:50.880 And we're going to make this sprite, basically this sprite child of that game object. 01:51.120 --> 01:57.160 So our animation just gonna because we're gonna have two animation clip which will be collected one 01:57.160 --> 02:05.000 and the other one will be the you can simply say ideal animation of this, uh, heart sprite. 02:06.080 --> 02:09.960 Uh, basically, we're doing the same thing as we have done with this fruit. 02:09.960 --> 02:17.280 Or you can simply say with this Apple game object, so let's rename this sprite or this sprite to something 02:17.280 --> 02:19.600 like heart heart icon. 02:19.600 --> 02:23.520 So let's call it something like heart uh, heart sprite. 02:23.520 --> 02:29.120 Or we can simply say, uh, let's call it heart sprite instead of heart icon. 02:29.440 --> 02:32.560 And now we're going to create an empty game object. 02:32.560 --> 02:34.840 To do that, let's move over to hierarchy. 02:34.840 --> 02:36.920 Right click or hit this plus icon. 02:36.920 --> 02:38.920 Let's create an empty game object. 02:38.920 --> 02:42.120 And we're gonna call this game object to something like heart. 02:42.360 --> 02:45.880 And if you want to choose an gizmos then go over to Inspector. 02:45.880 --> 02:46.720 Click here. 02:46.720 --> 02:48.640 And I'm going to choose this gizmo. 02:48.960 --> 02:53.120 And now what we're going to do, we're going to take our sprite in the hierarchy. 02:53.320 --> 02:58.050 And let's drag it over to this heart GameObject, top of this heart game object in the hierarchy. 02:58.330 --> 03:01.250 Then select your hardware sprite basically the child one. 03:01.290 --> 03:02.570 Then go over to Inspector. 03:02.570 --> 03:05.410 Right click on this transform and then reset. 03:05.450 --> 03:10.890 As you can see it, just reset the position as the position of our heart game object. 03:10.890 --> 03:16.730 So now if I take my heart GameObject in the hierarchy, basically select that and try to move around. 03:16.730 --> 03:21.450 As you can notice with that our heart sprite is also moving. 03:21.450 --> 03:23.930 So basically that is the thing we just done. 03:24.210 --> 03:26.050 And I'm going to select my heart GameObject. 03:26.050 --> 03:29.130 Let's drag it in the top so we can see all the time. 03:29.330 --> 03:31.570 And we will add some components. 03:32.010 --> 03:34.770 So first thing we're going to add a rigid body 2D. 03:34.770 --> 03:36.370 And we will set it to kinematic. 03:36.370 --> 03:38.690 So it's not going to fall down at all. 03:38.890 --> 03:40.370 So let's go over to Inspector. 03:40.410 --> 03:44.810 Let's click on this add component and we're going to add Rigidbody 2D. 03:44.810 --> 03:46.250 And let's attach that. 03:46.290 --> 03:48.130 Let's go over to Rigidbody 2D. 03:48.130 --> 03:50.410 And let's set the body type to kinematic. 03:50.410 --> 03:52.090 So it's not going to fall down. 03:52.090 --> 03:57.450 And collision detection to continuous and interpolate to interpolate to making smooth. 03:57.770 --> 04:04.570 And we will add second thing which will be a polygon Collider 2D or any Collider 2D, something like 04:04.570 --> 04:04.930 that. 04:04.930 --> 04:06.690 And it should fit perfectly. 04:06.690 --> 04:07.490 So that's why. 04:07.690 --> 04:09.890 So I'm going to click on this add component. 04:09.890 --> 04:14.730 Make sure you do these things with the parent, not the child one inside the child one. 04:14.730 --> 04:19.410 We just want to make the animation only and into this parent game object. 04:19.410 --> 04:21.530 We're just going to add the components. 04:21.530 --> 04:23.410 So let's click on this add component. 04:23.450 --> 04:27.890 Now let's add up a polygon Collider 2D or a Circle Collider 2D. 04:27.890 --> 04:32.810 But I'm going to add a Polygon Collider to it to just fit perfectly. 04:32.810 --> 04:37.450 So let's find it by typing Polygon Collider 2D and then attach. 04:37.650 --> 04:40.090 And then let's click on this Edit Collider. 04:40.090 --> 04:46.650 And we're going to edit the Collider as the size of our hard GameObject hard sprite, you can simply 04:46.650 --> 04:49.650 say and we're going to drag it like this. 04:49.730 --> 04:52.330 And this seems pretty much fine. 04:52.330 --> 04:56.290 You can simply say and let's drag it here. 04:57.930 --> 05:01.290 And this seems much fine, as you can notice. 05:01.290 --> 05:08.290 So that's why we just added Polygon Collider 2D instead of Circle Collider 2D to just feed it perfectly. 05:08.490 --> 05:14.970 And once you are done, make sure you just go over to your Polygon Collider 2D or Collider 2D you recently 05:15.010 --> 05:17.130 added and check this is trigger. 05:17.130 --> 05:20.970 So it's not gonna register our player to pass through it. 05:20.970 --> 05:26.290 And we're gonna use Ontriggerenter 2D function in order to check the trigger. 05:26.290 --> 05:29.810 If we just trigger it with this hard GameObject or not. 05:29.810 --> 05:34.490 So we're going to assign this heart as a heart game object as a heart tag. 05:34.530 --> 05:36.450 To do so, let's go over to Inspector. 05:36.490 --> 05:39.370 Make sure you select the parent one in the hierarchy. 05:39.410 --> 05:40.850 Then go over to Inspector. 05:40.890 --> 05:42.010 Click on untag. 05:42.050 --> 05:46.530 Let's click on Add Tag and we're going to create a new tag for our heart. 05:46.530 --> 05:48.530 So let's click on this plus icon. 05:48.530 --> 05:51.570 And we're going to name this to something like heart. 05:51.570 --> 05:53.530 And then click on the save button. 05:53.570 --> 05:58.250 And we're going to select our heart GameObject in the hierarchy, basically the parent, and then go 05:58.250 --> 06:02.250 over to its Inspector and assign with the tag you recently created. 06:02.250 --> 06:05.330 So I'm going to assign my heart GameObject as a heart attack. 06:05.370 --> 06:06.770 As you can notice. 06:06.770 --> 06:08.010 So we just made it. 06:08.050 --> 06:11.250 Now let's make the animation of this heart game object. 06:11.290 --> 06:13.770 To do that, we're going to select our heart sprite. 06:13.810 --> 06:17.850 Basically the child one, not the parent one to parent one. 06:17.850 --> 06:21.490 So make sure you select the child one instead of the parent one. 06:21.690 --> 06:23.850 Then go over to project tab assets. 06:23.850 --> 06:27.010 And then I'm going to move over to my sprites folder. 06:27.050 --> 06:30.970 Then Coins and Hearts folder where basically I have the sprite sheet. 06:31.170 --> 06:36.850 And then we're going to select all of these by holding down shift, and then drag it over to this sprite 06:36.850 --> 06:37.370 game object. 06:37.370 --> 06:40.970 Basically the child one, top of this child one in the hierarchy. 06:41.930 --> 06:47.010 And it's going to take us, take us to a folder where we want to place it. 06:47.010 --> 06:49.450 So we will go to assets and assets. 06:49.490 --> 06:52.530 We created this animation folder as you can notice. 06:52.690 --> 06:55.770 we're gonna open that up by double clicking on it. 06:56.130 --> 06:59.570 And let's move over to items animation folder. 06:59.890 --> 07:02.090 And we have to name the animation clip. 07:02.090 --> 07:03.410 So this will be hard. 07:03.450 --> 07:04.050 Idle. 07:04.050 --> 07:07.610 So I'm going to call it heart underscore idle. 07:08.370 --> 07:10.570 And let's click on the save button. 07:10.770 --> 07:14.890 And then if we select our hardest part then go over to animation tab. 07:14.890 --> 07:16.770 And then click on this play button. 07:16.770 --> 07:24.490 As you can notice is playing the idle animation clip or basically the heart sprite animation or the 07:24.490 --> 07:26.370 Heart Idle animation clip. 07:26.690 --> 07:32.930 And we need to create the second clip, which are basically these are just going to go up and over time 07:32.930 --> 07:37.250 it's going to fade out, as we have done with this fruit game object. 07:37.250 --> 07:40.090 Or you can simply say with this Apple game object. 07:40.090 --> 07:41.730 So we're going to do the same thing. 07:41.850 --> 07:43.730 So let's select our sprite. 07:43.770 --> 07:46.970 Let's go over to animation tab and let's click here. 07:46.970 --> 07:49.210 And let's click on this Create New clip. 07:49.210 --> 07:54.460 And we have to name we have to name the clip or the animation, so this will be hard. 07:54.500 --> 07:56.460 Underscore something like collect one. 07:56.460 --> 07:58.980 So we're going to call this one collect it. 07:59.380 --> 08:01.020 So let's call it collect it. 08:01.020 --> 08:02.980 And then click on the save button. 08:03.140 --> 08:05.660 And now what we're going to do we're going to make the animation. 08:05.660 --> 08:09.500 So let's click on this red button in order to capture the animation. 08:09.500 --> 08:11.980 And let's move it over to 60 frame. 08:12.140 --> 08:16.380 And then let's select the sprite underneath our hard GameObject in the hierarchy. 08:16.580 --> 08:19.180 And let's drag it in the up direction. 08:19.180 --> 08:21.060 And over time it should fade out. 08:21.340 --> 08:28.300 To do that, let's go over to Inspector Sprite Renderer Component and let's click on this color. 08:28.300 --> 08:31.060 And in the bottom a we can see 255. 08:31.060 --> 08:32.380 So let's make it zero. 08:32.380 --> 08:34.020 So it's gonna fade out. 08:34.020 --> 08:38.340 And now if we click on this play button as you can see it's going up. 08:38.340 --> 08:40.580 And over time it's just fading out. 08:40.700 --> 08:46.220 And once we are satisfied then we can just click on this red button to capture the animation. 08:46.220 --> 08:47.900 Or we can just leave it like that. 08:47.940 --> 08:50.540 It's automatically gonna capture the animation. 08:51.100 --> 08:53.620 So I hope you get the idea by now. 08:53.820 --> 09:00.060 And if we select our sprite GameObject in the hierarchy underneath our hard GameObject, then go over 09:00.060 --> 09:02.300 to animator tab as you can. 09:02.420 --> 09:08.940 As you can notice, we have the heart underscore idle animation clip as well as heart Underscore collected. 09:08.940 --> 09:14.860 So we need to make transition between this animation clip from this heart idle to heart collected. 09:15.020 --> 09:16.660 So we need to make transition. 09:16.660 --> 09:22.180 So let's click on right click on this heart idle and make transition to this heart collected. 09:22.180 --> 09:23.820 And let's select this transition. 09:23.820 --> 09:26.220 Go over to Inspector and we're going to uncheck. 09:26.220 --> 09:31.740 This has exit time because as soon as we can collect this heart we want to play the heart collected 09:31.740 --> 09:33.580 animation clip right away. 09:33.580 --> 09:39.100 So that's why we just untick the has exit time as well as we'll set the transition to zero. 09:39.260 --> 09:44.820 And if we scroll down, we need to choose a condition in which condition we want to play the animation 09:44.820 --> 09:45.340 clip. 09:45.340 --> 09:49.820 So for this heart a heart I'm gonna choose a trigger parameter. 09:49.820 --> 09:54.700 To do that, let's move over to our animator tab and let's select this parameter. 09:54.700 --> 09:56.180 Let's click on this plus icon. 09:56.180 --> 09:57.740 And we're going to choose a trigger. 09:57.940 --> 10:01.220 And we will call this trigger to something like collected. 10:01.380 --> 10:04.020 And then we're going to choose this parameter. 10:04.020 --> 10:05.500 So let's select this transition. 10:05.500 --> 10:09.340 Go over to Inspector scroll down and then click on this condition. 10:09.340 --> 10:11.220 And we're going to choose this collected. 10:11.220 --> 10:12.580 And now that's fine. 10:12.580 --> 10:17.580 And I don't want to play this hard collected animation clip over again and again. 10:17.580 --> 10:23.220 So what we're gonna do we're going to uncheck the loop time of this hard collected animation clip uh 10:23.540 --> 10:24.060 clip. 10:24.060 --> 10:28.700 So we need to move over to our project tab assets and then animation folder. 10:28.740 --> 10:34.700 Basically we need to move over to move over to that folder in which folder we just created the animation 10:34.700 --> 10:35.220 clip. 10:35.220 --> 10:39.980 So we have done inside this items animation folder as you can notice. 10:39.980 --> 10:43.660 And we have the heart collected as well as the heart idle. 10:43.660 --> 10:46.340 So I'm going to choose my heart underscore collected one. 10:46.340 --> 10:49.740 Let's go over to Inspector and we're going to uncheck the loop time. 10:49.740 --> 10:51.980 So it's not going to loop at all. 10:51.980 --> 10:57.300 And if I select my heart GameObject in the hierarchy and move over to animator tab, basically select 10:57.300 --> 11:00.780 this heart sprite and then click on this play button in the top. 11:00.780 --> 11:02.700 In order to play our game. 11:02.700 --> 11:07.460 You will notice as soon as our game just gonna start a heart idle animation. 11:07.460 --> 11:09.260 Just gonna play right away. 11:09.300 --> 11:09.660 Why? 11:09.700 --> 11:13.900 Because that animation clip is the default one, so that is the reason. 11:14.460 --> 11:15.780 So just wait a moment. 11:15.940 --> 11:21.700 And as you can see, indeed it's playing the heart idle animation clip over again and again. 11:21.700 --> 11:27.740 And if I trigger this collected parameter manually, you will notice this heart collected animation 11:27.740 --> 11:29.340 just going to play right away. 11:29.540 --> 11:34.820 As soon as we're gonna trigger with trigger this heart collected animation clip. 11:34.820 --> 11:38.500 Basically this collected uh, parameter if we trigger it. 11:38.500 --> 11:44.940 So if I just trigger manually, as you can notice, as soon as we trigger it, it just played that animation 11:44.940 --> 11:45.420 clip. 11:45.620 --> 11:47.870 So now we're going to get out of play mode. 11:47.870 --> 11:53.350 And basically we have done the thing and now what we need to do, we need to make this hard game object 11:53.390 --> 11:54.110 a prefab. 11:54.110 --> 11:56.190 So we will have the copy of it. 11:56.190 --> 11:59.030 So we're going to select our hard GameObject in the hierarchy. 11:59.230 --> 12:04.590 And let's drag it over to this prefabs folder in order to turn it into a prefab. 12:04.830 --> 12:07.870 So we're going to select our hard game object in the hierarchy. 12:08.070 --> 12:12.150 And let's drag it over to this prefabs folder in our project app. 12:12.230 --> 12:15.670 And let's create a sub folder for our collectibles. 12:15.870 --> 12:17.990 Uh, this apple and this heart. 12:18.030 --> 12:19.190 So let's do it. 12:19.190 --> 12:23.830 So let's go over to project app first, then assets and then prefabs folder. 12:23.830 --> 12:27.350 And let's create a sub folder for our collectibles item. 12:27.350 --> 12:31.070 So let's right click then create a folder. 12:31.070 --> 12:34.150 And we're going to call this folder to something like collectibles. 12:34.390 --> 12:40.070 So let's call it collect uh collectables collectables. 12:40.070 --> 12:42.950 And we're going to select our Apple and this heart. 12:42.950 --> 12:45.590 And let's drag it inside that sub folder. 12:45.590 --> 12:48.190 Now we just made it as you can notice. 12:48.190 --> 12:51.990 So we just created this folder to just keep our project clean. 12:51.990 --> 12:58.830 So that's why we just create folder and we drag the things that we need inside that folder to just keep 12:58.830 --> 13:00.230 our project clean. 13:00.230 --> 13:03.910 And I'm going to select my heart GameObject in the hierarchy by now. 13:03.910 --> 13:09.510 And we're gonna drag it on top of this collectables game object, because we just created this game 13:09.550 --> 13:13.350 object in order to keep our our hierarchy clean. 13:13.350 --> 13:20.230 So that's why we just created a collectibles game object and we just made our this game object child 13:20.230 --> 13:21.350 of that game object. 13:21.350 --> 13:25.990 So we can just click here in our hierarchy to just collapse at once. 13:25.990 --> 13:31.950 And it's gonna just make our, uh, project clean and the hierarchy as well. 13:32.110 --> 13:36.910 And I'm gonna press down Ctrl s on my keyboard in order to save my project. 13:36.910 --> 13:39.830 So I hope you get the idea that how you can just do it. 13:39.870 --> 13:45.670 We have done the same thing as we have done with our apple or that fruit game object.