WEBVTT 00:00.040 --> 00:02.560 Now let's make our player animation. 00:02.560 --> 00:07.120 So before we create our player animation, let's create a folder. 00:07.120 --> 00:10.120 So we will head over to our project tab asset. 00:10.160 --> 00:12.840 Let's right click there create folder. 00:12.840 --> 00:17.680 And let's call this folder to something like animations animations. 00:17.680 --> 00:21.240 And let's open this folder by double clicking on it. 00:21.240 --> 00:23.320 Or you can simply right click on it. 00:23.320 --> 00:27.000 And let's create another subfolder for this player animation. 00:27.000 --> 00:27.520 Why? 00:27.600 --> 00:33.080 Because we're gonna have anime animation as well as some other animation clips. 00:33.080 --> 00:40.600 So that's why we will create a separate subfolders to keep our project clean and organized in an organized 00:40.640 --> 00:40.960 way. 00:41.160 --> 00:46.480 To organize our project, you can simply say, so let's right click on this animations folder. 00:46.480 --> 00:50.240 Let's let's click on let's go to create then folder. 00:50.400 --> 00:57.480 And let's call this folder to something like player underscore animations animation something like that. 00:57.880 --> 01:06.130 And I guess sorry instead of calling animation I'm gonna to rename this, let's call it instead animation. 01:06.130 --> 01:10.330 So we're going to place all of the player animation folder inside this play. 01:10.450 --> 01:11.010 Sorry. 01:11.050 --> 01:17.170 We will place all of the animation of this player game object inside this player underscore animation 01:17.170 --> 01:17.890 folder. 01:17.890 --> 01:22.050 So create to create the animation we need this animation tab. 01:22.050 --> 01:25.410 So you can just simply move over to window in the top. 01:25.570 --> 01:27.490 Then scroll down to the animation. 01:27.490 --> 01:33.690 And you can see animation as well as the animator tab and the shortcut key which is Ctrl Plus six. 01:33.730 --> 01:38.530 If you press down that, it's going to bring up the animation tab right away. 01:38.690 --> 01:43.610 But instead of doing animation like this way, we're going to do it a different way. 01:43.810 --> 01:45.490 And it's pretty much fast. 01:45.530 --> 01:51.450 Basically what we have to do, we're going to move over to our project tab, then assets and then sprites 01:51.450 --> 01:53.130 folder and then player folder. 01:53.650 --> 01:58.130 And over there we can see we have our player idle sprite. 01:58.130 --> 01:59.690 So let's find first. 01:59.810 --> 02:01.250 Firstly we need to find it. 02:01.690 --> 02:04.170 So let's find the idle one. 02:04.850 --> 02:06.530 so we need to find it first. 02:08.530 --> 02:11.810 Uh, so over here we have. 02:11.810 --> 02:16.330 So click on this arrow in order to, uh, see the individual. 02:16.330 --> 02:24.010 So we will select all of them by holding down shift uh, or holding down shift I guess uh, this one 02:24.010 --> 02:25.250 is one okay. 02:25.290 --> 02:27.330 So this spreadsheet sorry. 02:27.370 --> 02:28.330 Not this one. 02:28.330 --> 02:34.210 So click on this arrow in order to see the individual and select all of them by holding down shift. 02:34.210 --> 02:38.050 And then drag it over to top of this player game object in the hierarchy. 02:38.050 --> 02:40.370 So it's going to make the animation right away. 02:40.370 --> 02:44.970 And now we have to choose a folder where we want to place our animation. 02:44.970 --> 02:47.810 So we will go to top left we can see assets. 02:47.810 --> 02:55.010 So let's click there in the top left and inside assets folder we we can see that we created this animation 02:55.010 --> 02:55.650 folder. 02:55.650 --> 02:58.530 So we will open that up by double clicking on it. 02:58.530 --> 03:03.890 And we also created a folder called player underscore animation as you can notice. 03:03.890 --> 03:06.290 So let's open that up folder as well. 03:06.290 --> 03:09.740 And now we have to name the animation what we want to call it. 03:09.740 --> 03:11.540 So this will be the ideal one. 03:11.540 --> 03:15.180 So we're going to call this one player underscore idle. 03:15.180 --> 03:17.340 So let's call it player underscore idle. 03:17.340 --> 03:22.420 And then click on the save button in order to create the animation right away. 03:22.580 --> 03:28.580 And now if I select my player GameObject in the hierarchy, then move over to animation tab and then 03:28.580 --> 03:29.900 click on this play button. 03:29.900 --> 03:36.180 We can see the idle animation is just playing over again and again, but the problem is that it seems 03:36.220 --> 03:37.380 a little bit fast. 03:37.380 --> 03:41.340 So what we can do, we can make spaces between this frame rate. 03:41.340 --> 03:47.940 But before you do, make sure you click on this red button in animation tab animation tab in order to 03:47.940 --> 03:49.300 record your animation. 03:49.300 --> 03:51.460 Else it's not going to record at all. 03:51.460 --> 03:53.060 So we're going to select like this. 03:53.060 --> 03:56.180 And let's move it something like this. 03:56.180 --> 04:00.940 And if we click on this play button by now we can see the animation is ready. 04:00.980 --> 04:01.460 Fine. 04:01.460 --> 04:06.780 And once you are satisfied, you can just click on this red button to capture the animation. 04:06.780 --> 04:08.220 Or you can simply leave it. 04:08.340 --> 04:11.340 It's automatically going to capture the animation. 04:11.420 --> 04:16.500 Now we have to create the running attack and all of those animation, uh, animation. 04:16.500 --> 04:17.620 So let's do it. 04:17.620 --> 04:19.900 So now let's do the working one. 04:19.900 --> 04:22.300 So before we do it we need to find it. 04:22.300 --> 04:24.580 So I have it over here. 04:26.140 --> 04:28.340 Uh, over here I have. 04:28.860 --> 04:31.260 So let's select this sprite sheet. 04:31.260 --> 04:34.540 Let's click on this open Sprite editor in Inspector. 04:34.940 --> 04:37.260 And we need to slice individually. 04:37.540 --> 04:40.460 Uh so we will click on slice in the top left. 04:40.460 --> 04:43.260 And let's select automatic to create pixel count. 04:43.260 --> 04:45.980 And let's count how many columns and rows we have. 04:45.980 --> 04:47.780 So 367. 04:48.180 --> 04:50.940 So we're gonna put seven columns and one row. 04:50.980 --> 04:56.620 Let's click on this slice and then click on this apply button in the top right in Sprite Editor tab. 04:56.780 --> 04:58.900 And let's select the game view once again. 04:59.180 --> 05:01.220 And we will select all of the sprite. 05:01.220 --> 05:06.940 But before you do, make sure you just click on this arrow in order to see the individual sprite. 05:06.940 --> 05:13.630 And we we will select from the start to the end by holding down shift and select all of the individual 05:13.630 --> 05:19.350 sprite by holding down shift, and then and then drag it over to top of this player GameObject in the 05:19.350 --> 05:22.470 hierarchy in order to make the animation right away. 05:22.670 --> 05:23.230 Sorry. 05:23.510 --> 05:25.590 So we will do the same thing. 05:25.590 --> 05:30.270 So firstly we will move over to assets animation player animation. 05:30.270 --> 05:33.230 So this will be the working one or the running one. 05:33.230 --> 05:35.790 So we're going to call it something like player underscore. 05:37.070 --> 05:38.150 Let's call it run. 05:38.150 --> 05:39.550 And let's click on this save. 05:39.710 --> 05:43.390 And now if we select our player move over to animation tab. 05:43.390 --> 05:44.790 Then click over here. 05:44.790 --> 05:46.950 And then choose this Run Animation clip. 05:46.950 --> 05:49.390 And then click on this play button. 05:49.390 --> 05:55.910 We can see the running animation clip is playing over again and again, and we can see those animation 05:55.910 --> 05:57.910 clip in animator tab as well. 05:57.910 --> 06:04.790 So if I choose animator, we can see we have the player idle player run and all of this animation clip. 06:04.790 --> 06:10.590 So we need to create other animation as well like jumping, falling, attacking. 06:10.590 --> 06:11.670 So let's do it. 06:12.200 --> 06:15.080 So I'm gonna do the jumping by now. 06:15.320 --> 06:17.080 So let's see the jumping. 06:17.080 --> 06:18.520 We have it over here. 06:18.880 --> 06:20.480 So let's select the Spritesheet. 06:20.480 --> 06:22.080 First go over to Inspector. 06:22.080 --> 06:24.520 Let's click on this open Sprite editor. 06:24.680 --> 06:30.120 Let's click on this slice and let's count three six columns. 06:30.400 --> 06:32.760 So let's put six column one row. 06:33.240 --> 06:35.680 Let's click on slice apply. 06:36.160 --> 06:37.840 And we're going to do the same thing. 06:37.840 --> 06:39.680 So let's drag it. 06:39.680 --> 06:41.360 So this is the jumping one. 06:41.480 --> 06:45.160 So we need we will go to assets in the top left. 06:45.160 --> 06:47.240 And animation player animation. 06:47.240 --> 06:48.120 This will be jump. 06:48.120 --> 06:51.200 So we're going to call it player underscore jump. 06:51.640 --> 06:53.000 Let's call it jump. 06:53.280 --> 06:57.720 And if we move over to animation tab then select this jump. 06:57.720 --> 06:59.680 We can play the animation clip. 06:59.680 --> 07:03.720 As you can see let's create the attack animation clip. 07:03.800 --> 07:07.640 Uh so we have multiple attack animation clip. 07:07.640 --> 07:11.560 So we're gonna do uh do with all of this. 07:11.560 --> 07:13.160 So let's select the first one. 07:13.440 --> 07:15.920 Let's click on this open sprite editor. 07:16.360 --> 07:20.440 Let's slice it so we can see six column and one row. 07:20.480 --> 07:23.960 Let's put six column one row slice apply. 07:24.520 --> 07:29.120 Let's drag it on top of this player game object in the hierarchy. 07:29.720 --> 07:32.240 And we will go to assets in the top left. 07:32.240 --> 07:34.480 Then animation player animation. 07:34.480 --> 07:36.200 So this will be the first one. 07:36.200 --> 07:38.600 So player underscore attack. 07:39.000 --> 07:46.200 And we're going to call it player underscore attack one because this is the first animation clip of 07:46.240 --> 07:46.560 attack. 07:46.560 --> 07:47.360 So that's why. 07:47.720 --> 07:49.240 And let's click on this save. 07:49.520 --> 07:52.000 And now let's choose the second one. 07:52.000 --> 07:57.760 But before we do if we select our player in the hierarchy then move over to animation tab. 07:57.760 --> 08:02.160 Then click over here and make sure you select your player GameObject in the hierarchy. 08:02.200 --> 08:08.280 Else you're not going to able to see it on your animation tab, so make sure you just do it. 08:08.280 --> 08:10.680 So we're going to click over here Player Attack one. 08:10.680 --> 08:14.880 And if we click on this play button we can see the attack animation clip. 08:14.880 --> 08:19.610 So let's create another animation clip which will be attached to an attack three. 08:19.730 --> 08:20.930 So let's choose. 08:20.930 --> 08:23.170 Let's click on Sprite editor. 08:23.890 --> 08:29.530 Let's slice it then apply and let's select individual. 08:29.810 --> 08:33.210 Firstly click on this arrow in order to see the individuals. 08:33.450 --> 08:36.170 And we will select all of them by holding down shift. 08:36.170 --> 08:41.090 Let's drag it over to this player game object in order to create the animation right away. 08:41.290 --> 08:48.210 Let's go to Assets Animation Player animation and this will be player underscore attack two animation 08:48.210 --> 08:48.770 clip. 08:48.770 --> 08:53.170 So let's click on save and we can test it out. 08:53.290 --> 08:55.330 So this is our attack two. 08:55.690 --> 08:59.930 Let's create the third one which will be attack three. 09:00.130 --> 09:06.810 So let's select this so we can see we have 369 columns. 09:06.810 --> 09:10.530 So we're going to put nine columns nine columns. 09:10.530 --> 09:12.970 Let's click on slice Apply. 09:13.650 --> 09:16.290 And we're going to select all of this. 09:16.490 --> 09:19.970 And let's drag it over to this player GameObject in the hierarchy. 09:20.530 --> 09:26.850 Let's move to Assets Animation Player Animation and this will be player Underscore attack three. 09:27.370 --> 09:34.050 And let's click on this save button in order to uh order to create the animation clip and move over 09:34.050 --> 09:36.130 to animation tab. 09:36.130 --> 09:37.690 So this is the attack three. 09:37.850 --> 09:43.450 Let's create the heart and the animation clip as well so we can create that. 09:43.930 --> 09:45.850 Uh, so let's do it. 09:46.850 --> 09:51.890 So let's find the heart one so we can see this is our heart one. 09:53.690 --> 09:55.410 So we have two heart one. 09:55.410 --> 09:57.130 We can choose any of these. 09:57.570 --> 09:59.490 Uh so let's choose this one. 09:59.490 --> 10:06.290 So let's click on Open Sprite Editor and we're going to slice it for slice Apply. 10:07.010 --> 10:15.290 Then let's click on this and let's drag it over to this player game object assets animation player animation. 10:15.690 --> 10:18.980 And this will be heart player underscore Score. 10:19.020 --> 10:19.660 Heart. 10:20.020 --> 10:20.540 Heart. 10:20.540 --> 10:22.620 And this seems now pretty cool. 10:23.060 --> 10:25.860 And we can play that animation clip as well. 10:25.860 --> 10:28.220 So if I choose the heart one. 10:28.220 --> 10:34.620 So as you can see sorry, this is this is not the heart one. 10:37.580 --> 10:38.020 Sorry. 10:38.060 --> 10:40.460 We, uh, we have done some mistake. 10:41.180 --> 10:43.900 So we dragged this one, which was the idol. 10:43.900 --> 10:45.500 I really apologize for it. 10:45.900 --> 10:49.380 So basically, what we have to do, we need to find this heart. 10:49.820 --> 10:54.460 So to do so, let's select this one instead. 10:54.940 --> 10:58.620 So we're going to slice for apply. 10:59.380 --> 11:02.420 And let's click and let's select individuals. 11:02.420 --> 11:04.860 Let's drag it up of this player game object. 11:05.180 --> 11:08.900 Then we will go to assets animation player animation. 11:09.140 --> 11:12.620 And we're going to replace this one with our This heart one. 11:12.620 --> 11:13.980 So we're going to select that. 11:13.980 --> 11:15.780 And let's click on the save button. 11:16.020 --> 11:19.420 And it says player heart animation already exists. 11:19.460 --> 11:20.860 Do you want to replace it. 11:20.860 --> 11:23.270 Yes I want to replace it with this one. 11:23.270 --> 11:27.550 So I'm going to click on this yes button as soon as we have chosen yes. 11:27.550 --> 11:33.790 And if I select the game view and select this player in the hierarchy, move over to animation tab and 11:33.790 --> 11:36.270 then choose this Heart Animation clip. 11:36.270 --> 11:38.030 And then click on this play button. 11:38.030 --> 11:42.470 As you can see, this animation is now playing over again and again. 11:43.030 --> 11:49.510 So I hope you get the idea that how you can create the animation right away, and I don't want some 11:49.510 --> 11:55.750 animation clip to be loop something like this heart uh, those attack I don't want those animation clip 11:55.750 --> 11:56.510 to below. 11:56.510 --> 12:02.950 So what you can do for it to stop it, we basically head over to we need to move over to this project 12:02.990 --> 12:04.110 tab assets. 12:04.110 --> 12:09.750 And we had uh, we basically need to move over to in, in which folder. 12:10.030 --> 12:13.830 Uh, we just created those animation clip. 12:13.830 --> 12:20.670 So we do know that we have done inside this animation folder animations folder in our assets folder. 12:20.670 --> 12:27.430 So firstly we will move over to our project app assets animation and then this player animation folder. 12:27.430 --> 12:33.350 And we can see all of the animation clip right over here we have this player underscore attack one, 12:33.390 --> 12:34.950 attack two, attack three. 12:35.150 --> 12:38.590 And this heart an idol walk jump. 12:38.590 --> 12:43.710 And all of these and some animation clip I don't want to loop something like this. 12:43.710 --> 12:46.710 Player attack one, attack two, and this attack three. 12:46.710 --> 12:51.990 So I'm going to select all of them by holding down shift basically attack one, attack two, and attack 12:51.990 --> 12:56.710 three, and then go over to Inspector in the top right and you can see loop time. 12:56.710 --> 13:01.070 So I'm going to uncheck since I don't want this animation clip to loop. 13:01.070 --> 13:04.070 And also I'm going to do the same thing with this heart one. 13:04.350 --> 13:09.390 And I'm going to leave this player idle player charm and this player run. 13:09.390 --> 13:14.070 We can just uncheck this player jump one and let's leave it it for now. 13:14.070 --> 13:16.230 And we're going to take a look on it later. 13:16.430 --> 13:23.910 And if we select our player in the hierarchy and we can see a plus icon became in this basically an 13:23.950 --> 13:30.080 animator component attached to this player game object once we created those animation clip. 13:30.080 --> 13:36.920 So this animator component is responsible for playing those animation clip as well as transition between 13:36.960 --> 13:38.040 animation clip. 13:38.840 --> 13:40.040 Uh, clip. 13:40.040 --> 13:41.520 I hope you get the idea. 13:41.920 --> 13:48.160 Uh, so what we have to do now, uh, so we basically need to move over to this overrides and then apply 13:48.160 --> 13:54.120 all because the change we added this animator component and we can see the plus icon. 13:54.120 --> 14:00.840 So if I move over to my project app assets and then prefabs folder and open up this player prefab by 14:00.840 --> 14:04.080 double clicking on it, uh, and then go over to Inspector. 14:04.120 --> 14:10.360 As you can see, we cannot able to see that animator component which is attached, uh, attached to 14:10.400 --> 14:12.600 this player game object in the hierarchy. 14:13.000 --> 14:17.520 Uh, we cannot notice inside this prefab mode. 14:17.520 --> 14:18.880 Inside prefab mode. 14:18.880 --> 14:21.720 So what we need to do, we basically need to go back. 14:21.720 --> 14:24.280 So in hierarchy you can see the back arrow. 14:24.280 --> 14:30.040 So just click there in order to go back and we need to select our player, then go over to Inspector 14:30.040 --> 14:32.120 Overrides and then apply all. 14:32.120 --> 14:34.280 And as soon as we click Apply All. 14:34.320 --> 14:39.760 Now this animator component is also attached in this player GameObject prefab as well. 14:39.800 --> 14:45.600 To check it, we will open up the player prefab by double clicking on it, and if we move over to Inspector, 14:45.600 --> 14:51.920 we can see by now this animator component is attached to this player GameObject prefab as well. 14:51.920 --> 14:56.680 So I hope you get the idea that the changes you made are made. 14:56.680 --> 15:03.640 And if you just move over to overrides and then apply all, so the changes will also be saved into this 15:03.640 --> 15:06.440 player GameObject prefab as well. 15:06.440 --> 15:08.120 So basically that is the thing. 15:08.240 --> 15:15.280 So I hope you get the idea then how you can create the animation and make sure you always, uh, go 15:15.280 --> 15:22.600 to Inspector Overrides and then apply all if you change anything inside this player GameObject components. 15:22.600 --> 15:24.480 So the change is just going to be saved. 15:24.680 --> 15:29.600 And I'm gonna press down Ctrl S on my keyboard in order to save my project.