WEBVTT 00:00.080 --> 00:02.160 Let's create some collectible items. 00:02.160 --> 00:04.240 So I'm going to create my heart first. 00:04.240 --> 00:08.720 So let's go to project tab then assets folder and sprites folder. 00:09.000 --> 00:11.520 And I'm going to move over to my UI folder. 00:11.520 --> 00:14.400 I have this sprite as you can see. 00:14.760 --> 00:20.240 Uh so firstly you need to select that uh basically select that go over to Inspector and then make this 00:20.240 --> 00:22.800 pixel per unit to something around 16. 00:22.800 --> 00:26.680 And then filter mode to point of filter to get rid of the blurry thing. 00:26.680 --> 00:29.440 And after doing all of this thing click on this apply. 00:29.680 --> 00:33.360 And what I'm going to do now I'm going to select my heart game object. 00:33.360 --> 00:36.640 So let's click on this arrow and I'm going to select my heart. 00:36.680 --> 00:38.960 Let's drag it over to this scene view. 00:39.000 --> 00:41.080 As you can see we have the heart. 00:41.080 --> 00:46.120 So what I'm going to do now firstly I'm going to create an empty parent game object. 00:46.120 --> 00:51.320 And I'm going to make this heart sprite a child of that game object. 00:51.320 --> 00:52.800 Why I'm going to create that. 00:52.800 --> 00:59.000 Because we're going to have to animation in this heart sprite one will be which will go up and down, 00:59.160 --> 01:00.200 uh, something like that. 01:00.200 --> 01:06.150 Or it's basically just going to increase the size and over time the size will be decreased. 01:06.270 --> 01:08.630 Basically I just want to make two animation. 01:08.630 --> 01:14.710 So one will be the idol, which basically just gonna increase the size and decrease, and another one 01:14.710 --> 01:16.350 just going to be the collected one. 01:16.710 --> 01:20.270 Basically once our player game object collide with this heart. 01:20.270 --> 01:25.030 So it's gonna go up and over time the sprite just gonna fade out. 01:25.030 --> 01:28.590 So uh, collect something like collected animation clip. 01:28.590 --> 01:33.870 So that's why we're gonna create an empty parent game object first, and then we're going to make this 01:33.870 --> 01:38.830 one child of that, uh, to create, or else our animation just gonna be weird. 01:38.830 --> 01:40.510 So that is the reason. 01:40.510 --> 01:41.630 So let's go to hierarchy. 01:41.630 --> 01:43.510 Right click or hit this plus icon. 01:43.550 --> 01:45.390 Let's create an empty game object. 01:45.390 --> 01:49.430 And I'm going to name this game object to something like heart uh heart. 01:49.550 --> 01:54.190 And I'm gonna drag it this heart game object in top of my hierarchy. 01:54.510 --> 01:57.190 And if you choose want to choose an eye gizmo. 01:57.190 --> 01:58.990 So I'm going to choose this gizmo. 01:58.990 --> 01:59.950 Something like this. 02:00.020 --> 02:01.060 as you can see. 02:01.100 --> 02:03.260 And now I'm going to select my sprite. 02:03.300 --> 02:07.700 I'm going to know I'm going to call it to firstly hard sprite something like that. 02:07.700 --> 02:10.060 So I'm going to call it hard sprite. 02:10.780 --> 02:12.980 Sorry hard as sprite. 02:13.700 --> 02:18.620 And now what I'm going to do I'm going to select my hard sprite and let's drag it over to this top of 02:18.620 --> 02:20.580 this hard GameObject in the hierarchy. 02:20.780 --> 02:22.740 And we're going to select our sprite. 02:22.780 --> 02:23.860 Let's go to transform. 02:23.860 --> 02:25.500 Let's right click and reset. 02:25.500 --> 02:32.060 So it just reset the position as the position of our heart GameObject or the parent game object as you 02:32.060 --> 02:32.700 can see. 02:32.700 --> 02:34.620 So it just reset the position. 02:34.740 --> 02:38.820 Now it seems fine and we are ready to create our animation. 02:38.820 --> 02:44.460 But before I do I'm going to select my heart game object and I'm going to select my tool Move tool and 02:44.460 --> 02:46.660 let's move it down somewhere over here. 02:46.660 --> 02:53.140 As you can see, as soon as my moving our heart game object, the heart sprite is also moving with it. 02:53.180 --> 02:53.580 Why? 02:53.620 --> 02:59.620 Because this heart sprite is a child of our heart game object, as you can see in the hierarchy. 02:59.650 --> 03:01.050 So that is the reason. 03:01.050 --> 03:03.170 So let's make the animation by now. 03:03.170 --> 03:06.730 So we're going to select our heart sprite basically not the parent heart sprite. 03:06.770 --> 03:07.730 Let's select that. 03:07.730 --> 03:09.370 Go over to animation tab. 03:09.370 --> 03:12.090 And we are ready to create our animation. 03:12.090 --> 03:17.610 So let's click on this create button and let's go to assets then animation folder. 03:17.770 --> 03:20.890 And I'm going to move over to my animation folder. 03:20.890 --> 03:24.570 And let's create another sub folder for this heart animation. 03:24.570 --> 03:27.410 So let's right click New and Folder. 03:27.410 --> 03:30.730 And I'm going to call this folder to something like heart animation. 03:30.730 --> 03:33.610 So heart underscore animation. 03:33.930 --> 03:38.450 And let's open up this folder as well by double clicking on it. 03:38.450 --> 03:41.410 And we have to name the animation what we want to name it. 03:41.410 --> 03:44.330 So I'm going to call this one to something like Heart Idol. 03:44.330 --> 03:48.770 And we're going to have the another animation which will be the Heart Collected one. 03:48.770 --> 03:51.610 So I'm going to name this animation to Heart Idol. 03:52.010 --> 03:54.290 So this one just going to be the ideal one. 03:54.290 --> 03:55.890 So let's click on that save. 03:56.050 --> 04:01.400 And we are ready to create the The animation, so make sure you select the hardest sprite. 04:01.440 --> 04:06.960 Then move over to animation tab and then click on this red button in order to record the animation. 04:06.960 --> 04:12.000 So I'm gonna move over to my 30 frames, something like that in Timeline in Animation tab. 04:12.160 --> 04:15.280 And then I'm gonna increase the size of this heart. 04:15.320 --> 04:17.680 Something something around. 04:18.560 --> 04:22.000 Uh, but before we do, I'm gonna get out of play mode. 04:22.120 --> 04:25.800 So just click on this red button in order to get out of play mode. 04:26.400 --> 04:27.760 So get out of play mode. 04:28.120 --> 04:32.480 By default, I just want to decrease the size of the sprite. 04:32.520 --> 04:35.920 I'm gonna make this one by default a little bit empty. 04:35.920 --> 04:41.360 So let's select the sprite game object, uh, underneath our heart GameObject in the hierarchy. 04:41.520 --> 04:46.280 Let's go to Inspector, and I'm going to make the scale in the X something like 0.5. 04:46.280 --> 04:49.280 And in the y I'm going to make it around 0.5. 04:49.560 --> 04:51.120 And now what I'm going to do. 04:51.160 --> 04:53.840 And now I'm going to record the animation. 04:53.840 --> 04:56.000 So let's select the sprite one more time. 04:56.000 --> 04:59.350 Let's go to animation tab and then click on this red button. 04:59.350 --> 05:01.510 And now we're gonna make our animation. 05:01.510 --> 05:05.710 So I'm gonna move over to my 30 frame, something like that in animation tab. 05:05.830 --> 05:10.070 Let's go to our inspector and make sure you select the heart sprite. 05:10.070 --> 05:12.230 Then go to Inspector and transform. 05:12.230 --> 05:16.230 And I'm gonna make the scale in the X, something like 1.2. 05:16.430 --> 05:19.910 And in the Y I'm going to make it something like 1.2. 05:20.230 --> 05:21.150 And now it's fine. 05:21.150 --> 05:27.070 So if I just click on this play button, as you can see, animation is now playing over again and again 05:27.190 --> 05:32.150 and once, uh, and now I'm gonna move over to 60 frame or this once again. 05:32.310 --> 05:41.150 And I just want to set back this sprite size to, uh, the two back point five in the X as well as 0.5 05:41.190 --> 05:41.950 in the Y. 05:42.070 --> 05:47.990 So let's go to Inspector and I'm going to make in the X scale something like 0.5 once again back to 05:48.030 --> 05:48.870 0.5. 05:48.910 --> 05:52.630 So we're going to make in the Y as well as in the X 2.5. 05:52.630 --> 05:57.670 So now if I just click on this play button in animation tab we can see the animation. 05:57.670 --> 06:03.500 So the so the heart just increasing its size in the X as well as in the Y. 06:03.660 --> 06:06.460 And over time it's just getting resized. 06:06.460 --> 06:10.740 So it just resize and the animation is playing over again and again. 06:10.820 --> 06:14.220 As you can see, animation seems now pretty much fine. 06:14.220 --> 06:20.140 So you can just play around with this value so you can just move over to something like a two second 06:20.180 --> 06:22.180 as well, or 120 frames. 06:22.180 --> 06:25.940 You can just make spaces between these keyframe as well. 06:25.940 --> 06:27.540 But I'm gonna leave it like this. 06:27.540 --> 06:30.940 So let's click on this red button to capture the animation. 06:30.940 --> 06:32.660 Or you can just leave it like that. 06:32.660 --> 06:35.580 It's automatically gonna capture the animation. 06:35.580 --> 06:37.460 So when I have the second animation. 06:37.460 --> 06:42.140 So let's click over here in animation tab and let's click on this Create New clip. 06:42.140 --> 06:44.340 And we have to name the clip what we want. 06:44.380 --> 06:46.180 So this will be the collected one. 06:46.180 --> 06:49.220 So I'm going to call this one heart underscore collected. 06:49.420 --> 06:52.900 So we're going to call it heart underscore collected. 06:52.900 --> 06:54.380 And let's click on this save. 06:54.540 --> 06:57.660 And in this animation what I basically want to do. 06:57.660 --> 07:04.290 So I'm going to move over to one second or a 60 frame, as you can see in animation tab. 07:04.290 --> 07:07.850 But make sure you just hit this red button to capture the animation. 07:07.850 --> 07:10.930 And I'm going to move over to one second or 60 frame. 07:10.930 --> 07:14.730 And then I'm going to move this sprite in the up direction. 07:14.730 --> 07:17.770 And over time I'm going to make this one fade out. 07:17.770 --> 07:19.210 So let's select the sprite. 07:19.210 --> 07:20.650 Let's go to Inspector. 07:20.650 --> 07:22.970 And in the Y I'm going to increase the value. 07:22.970 --> 07:25.650 Something around I guess this is fine. 07:25.650 --> 07:28.730 And we can click on this play button in order to see. 07:28.730 --> 07:31.810 So now as you can see this seems pretty much fine. 07:31.810 --> 07:35.690 And also I just want to make this one fade out over time. 07:35.690 --> 07:38.770 So let's go to a sprite renderer component then color. 07:38.770 --> 07:39.490 Click there. 07:39.490 --> 07:42.410 And in the A bottom you can see 255. 07:42.410 --> 07:44.810 So we're going to make all the way to the zero. 07:44.850 --> 07:47.250 Or you can just drag this line as well. 07:47.250 --> 07:49.370 And now we can see it just fade out. 07:49.370 --> 07:52.250 And we can click on this play button in order to see. 07:52.290 --> 07:55.850 Now as you can see, this seems, uh, too much cool. 07:56.050 --> 07:59.520 And I we created this animation clip by now. 07:59.520 --> 08:02.440 So let's hit this red button to capture the animation. 08:02.680 --> 08:09.840 And if we just click on this play button in the top, you will see that the animation just gonna play 08:10.040 --> 08:14.280 and the heart uh, idle animation just gonna be the default one. 08:14.320 --> 08:14.760 Why? 08:14.920 --> 08:19.000 Because, uh, we just created that animation clip first, so that's why. 08:19.040 --> 08:25.360 And we can see as soon as the game started at idle animation, it just playing over again and again, 08:25.360 --> 08:27.480 and we can see, uh, that. 08:27.480 --> 08:34.080 So if I select my heart sprite underneath my heart GameObject in the hierarchy, then move over to animator 08:34.080 --> 08:38.840 tab, we can see heart idle animation is just playing over again and again. 08:39.240 --> 08:43.480 So we also need to play this heart collected animation clip as well. 08:43.480 --> 08:45.200 So let's get out of play mode. 08:45.200 --> 08:49.520 And what we're gonna do now, uh, we're gonna move over to my animator tab. 08:49.520 --> 08:52.880 So make sure you select the sprite GameObject in the hierarchy. 08:52.880 --> 08:55.120 Then move over to this animator tab. 08:55.120 --> 08:59.310 And let's right click on this Heart idol and make transition to heart collected. 08:59.310 --> 09:02.150 And let's select this transition or arrow. 09:02.190 --> 09:03.270 Let's go to Inspector. 09:03.270 --> 09:04.230 And we're going to uncheck. 09:04.230 --> 09:10.390 This has exit time because as soon as player collect this heart it should play the heart collected animation 09:10.390 --> 09:11.750 clip immediately. 09:11.750 --> 09:15.470 So that's why and we're going to set the transition duration to zero. 09:15.470 --> 09:20.150 And if we scroll down we need to choose a trigger or a condition in which condition. 09:20.150 --> 09:22.710 We just want to play that animation clip. 09:22.710 --> 09:24.670 So we're going to set a condition for it. 09:24.670 --> 09:27.350 So let's go to animator tab then parameters. 09:27.350 --> 09:29.190 And let's click on this plus icon. 09:29.190 --> 09:30.750 And we're going to choose a trigger. 09:30.750 --> 09:34.630 And we're going to call this trigger to something like collected or Collide. 09:34.630 --> 09:37.110 We can simply say a like that. 09:37.110 --> 09:40.030 So I'm going to call it call it collide something like that. 09:40.070 --> 09:43.510 Let's go to Inspector and we're going to click on this plus icon. 09:43.510 --> 09:46.710 And we're going to choose this collide collide trigger. 09:46.710 --> 09:52.310 So as soon as we're going to trigger this collide parameter you will see this heart collected animation. 09:52.310 --> 09:53.150 Just going to play. 09:53.190 --> 09:53.470 Why. 09:53.510 --> 09:55.310 Because we have chosen that condition. 09:55.310 --> 09:57.620 As you can see an inspector. 09:57.660 --> 10:01.300 I guess I just misspelled my name. 10:01.500 --> 10:06.700 I don't know what is the perfect spelling of this, but I really apologize for it. 10:07.100 --> 10:10.860 Uh, so let's click on this play button in the top to have a look on this. 10:10.860 --> 10:17.180 So if we try to trigger this collide parameter in animator tab manually, you will see this art collected 10:17.180 --> 10:17.660 animation. 10:17.660 --> 10:19.620 Just gonna play right away. 10:19.780 --> 10:21.380 So let's trigger this parameter. 10:21.380 --> 10:28.220 As you can see, as soon as we trigger the heart collected animation is now playing uh, and uh, it 10:28.220 --> 10:31.220 just playing over again and again, as you can see. 10:31.260 --> 10:35.300 And we don't want this animation clip to be looped, this heart collected. 10:35.300 --> 10:39.740 So we're gonna get autoplay mode and let's go over to project tab then assets. 10:39.860 --> 10:45.900 And we're gonna move over to that animation subfolder, uh, basically where we just created and saved 10:45.900 --> 10:48.620 those animation clip of this heart game object. 10:48.620 --> 10:53.780 So we're gonna move over to that sprite, uh, that animation, uh, that animation folder. 10:53.780 --> 10:55.260 So in this heart sprite. 10:55.260 --> 10:57.890 So let's go to stop animation. 10:57.890 --> 11:03.050 And I have created this hurt underscore animation subfolder as you can see. 11:03.090 --> 11:09.530 And we can see we have both of these animation clip which will we have hurt ideal as well as we have 11:09.530 --> 11:10.410 hurt collected. 11:10.410 --> 11:14.570 So I'm going to select my heart collected animation clip and let's go to Inspector. 11:14.570 --> 11:16.570 And I'm going to uncheck the loop time. 11:16.570 --> 11:19.650 So the animation not gonna be looped at all. 11:19.810 --> 11:25.650 And I'm going to leave the heart idle because I want that animation clip to be played over again and 11:25.650 --> 11:25.930 again. 11:25.930 --> 11:28.330 So I'm not gonna uncheck the loop time. 11:28.690 --> 11:32.090 And what we're going to do now we're gonna select our heart game object. 11:32.090 --> 11:33.930 Basically select the parent one. 11:33.930 --> 11:37.730 And we're gonna add Collider to this heart game object. 11:37.730 --> 11:42.050 So player can easily detect collision detect collision. 11:42.050 --> 11:44.450 And then we can just play the animation. 11:44.450 --> 11:47.410 So I'm going to add some components to this heart game object. 11:47.410 --> 11:50.210 So make sure you select the parent one not the child one. 11:50.210 --> 11:53.210 So select the parent which in our case heart game object. 11:53.210 --> 11:54.490 So we're going to select that. 11:54.530 --> 11:55.530 Go over to Inspector. 11:55.640 --> 11:58.920 Let's click on this add component and we're going to add a component. 11:58.920 --> 12:01.400 First thing we're going to add a rigid body 2D. 12:01.440 --> 12:03.520 And we're going to set the gravity scale to zero. 12:03.520 --> 12:06.680 So it's not going to fall down due to our gravity. 12:06.680 --> 12:09.120 So let's find rigid body 2D component. 12:09.120 --> 12:10.520 And let's attach that. 12:10.520 --> 12:12.480 And let's go over to rigid body 2D. 12:12.480 --> 12:15.920 And I'm going to make the gravity scale to zero and collision detection. 12:15.920 --> 12:18.280 We're going to choose continuous and interpolate. 12:18.280 --> 12:21.680 We're going to choose interpolate to making a little bit smooth. 12:21.720 --> 12:24.120 Or you can just ignore these things as well. 12:24.120 --> 12:27.160 But make sure you just set the gravity scale to zero. 12:27.200 --> 12:34.800 Or you can simply say simply set this body type to kinematic so it's not going to fall down due to gravity. 12:34.800 --> 12:40.480 And we're going to add one more component which will be a collider 2D for our collision detection. 12:40.480 --> 12:44.600 So this so this player GameObject can collect this heart game object. 12:44.600 --> 12:46.440 So let's click on this add component. 12:46.440 --> 12:49.200 And we're going to add a Polygon Collider 2D. 12:49.240 --> 12:56.030 And you can add any type of Collider 2D you want but make sure it just fit perfectly our sprite size. 12:56.030 --> 12:57.910 So let's click on this Edit Collider. 12:57.910 --> 13:02.190 And we're going to edit the collider as the size of our sprite. 13:03.190 --> 13:04.750 Uh, something like this much. 13:05.630 --> 13:07.750 And this seems pretty much cool. 13:09.310 --> 13:17.150 And we can simply to basically make this size the collider size as the size of your sprite. 13:17.510 --> 13:20.630 And I'm going to I'm going to drag this up. 13:21.470 --> 13:23.150 And now it seems fine. 13:24.150 --> 13:31.510 And also make sure you just go to this polygon Collider or Collider 2D you attach, then move over to 13:31.750 --> 13:36.270 trigger and check this box or else this, uh, this, uh, hard GameObject. 13:36.270 --> 13:39.710 Just gonna register our player to pass through it. 13:39.710 --> 13:44.830 So that's why we just, uh, check that trigger and we're going to assign this hard GameObject as a 13:44.830 --> 13:45.470 heart attack. 13:45.470 --> 13:46.190 So player. 13:46.230 --> 13:52.350 So we can just detect, uh, detect the collision, and we can check also the name of the game object 13:52.350 --> 13:56.020 or the tag of the game object the player collided with. 13:56.020 --> 13:59.940 So that's why we're going to assign this hard game object with our hard tag. 13:59.980 --> 14:02.420 So let's select the hard GameObject in the hierarchy. 14:02.460 --> 14:04.540 Let's go over to Inspector and Tag. 14:04.580 --> 14:06.380 As you can see it says untagged. 14:06.380 --> 14:08.980 So just click there and then click on this add tag. 14:08.980 --> 14:12.500 And let's click on this plus icon in order to add a tag. 14:12.500 --> 14:16.020 And we're going to call this tag to something like heart something like that. 14:16.020 --> 14:17.060 So let's call it heart. 14:17.060 --> 14:20.820 And then click on save and make sure you select the game object one more time. 14:20.820 --> 14:23.100 So in our case heart in the hierarchy. 14:23.140 --> 14:24.940 Let's go to Inspector and Tag. 14:24.980 --> 14:26.020 It says earn tag. 14:26.020 --> 14:30.740 So let's click there and we're going to assign it with heart which we recently created. 14:30.780 --> 14:35.140 Now we assign it this heart as a heart attack as you can see. 14:35.180 --> 14:37.700 And we're going to make this heart game object a prefab. 14:37.700 --> 14:39.180 So we're going to have the copy. 14:39.180 --> 14:41.660 So let's select the heart GameObject in the hierarchy. 14:41.660 --> 14:44.380 And let's drag it over to that prefabs folder. 14:44.380 --> 14:47.500 In order to turn this heart into a prefab. 14:47.540 --> 14:49.980 Now we as a sign it this heart. 14:50.140 --> 14:55.140 Basically we just made a prefab, as you can see of this heart game object.