WEBVTT 00:00.050 --> 00:00.620 Hello guys. 00:00.620 --> 00:01.670 Welcome to the video. 00:01.670 --> 00:05.390 In this one I want to take care of the visuals of the player. 00:05.390 --> 00:07.070 We already have some functionality. 00:07.070 --> 00:08.300 He can move left and right. 00:08.300 --> 00:14.000 And when I visually show that he is moving or standing, we're going to do that with the help of animations. 00:14.030 --> 00:19.430 Animator is a very simple component, and it's not that difficult to understand, but it can be a bit 00:19.430 --> 00:20.750 too much when you just starting. 00:20.750 --> 00:26.420 So first of all, we would have to go to window find Animation Animator. 00:26.810 --> 00:29.330 This is the animator window we're going to use. 00:29.330 --> 00:32.120 Then we're going to go to Window Animation. 00:32.120 --> 00:33.110 Animation. 00:33.110 --> 00:37.250 And this window is responsible for controlling the animation itself. 00:37.820 --> 00:41.930 Like here we uh control an animations one by one. 00:42.780 --> 00:45.960 And here we have entire set up for the animator. 00:45.990 --> 00:50.550 Now let's actually make one of the animators and apply them to the player. 00:50.580 --> 00:53.580 We're going to go here and make a folder. 00:55.320 --> 00:57.000 Animations. 00:58.130 --> 01:01.130 Then inside of this folder we want to make. 01:01.630 --> 01:03.490 Animator controller. 01:04.810 --> 01:09.340 Animator controller and let's call it player. 01:10.520 --> 01:14.090 Now let's select animator itself and drag this one. 01:15.250 --> 01:16.990 On the animator like so. 01:16.990 --> 01:22.810 Now it will have an animator controller component with controller assigned over here. 01:22.870 --> 01:24.670 Very good, very very good. 01:24.670 --> 01:32.140 Now if we select this animator and go to animator over here you can see we have animator opened. 01:32.470 --> 01:35.500 And now we need to make some animations and use them. 01:35.620 --> 01:38.680 We're going to make player idle first. 01:38.680 --> 01:42.220 So we're going to click create over here on the assets. 01:42.220 --> 01:44.290 Make sure you select animations folder. 01:44.290 --> 01:51.160 So we have it all organized and I'm going to name it as Player idle. 01:52.160 --> 01:53.750 And I'm going to use camel case. 01:53.750 --> 01:56.600 So player idle let's save it. 01:56.960 --> 01:59.570 And now we have default animation for the player. 01:59.570 --> 02:01.910 But it is empty. 02:01.910 --> 02:03.860 So we need to assign some sprites. 02:03.860 --> 02:06.320 Over here we can go to graphics. 02:08.520 --> 02:09.690 A main character. 02:10.620 --> 02:12.600 Virtual guide and idol. 02:12.600 --> 02:17.820 So luckily for us, creator of these assets prepared everything for us. 02:17.850 --> 02:23.670 If you go to open Sprite Editor, you can see that these sprites are well cutted and we can use them 02:23.670 --> 02:24.510 as they are. 02:24.510 --> 02:30.930 But it may happen that in the next project you get the assets and they are not prepared like that. 02:30.930 --> 02:34.560 So I'm going to show you how to prepare assets for animations real quick. 02:35.040 --> 02:37.020 Let's click reset over here. 02:37.020 --> 02:39.060 Now it has nothing there. 02:39.060 --> 02:40.410 No setup nothing. 02:40.410 --> 02:41.610 Just an image. 02:42.910 --> 02:44.800 It is altogether and blurry. 02:45.220 --> 02:49.000 First of all, to make it not blurry, you would have to go to compression. 02:49.000 --> 02:52.660 Choose none and filter mode no filter. 02:52.660 --> 02:53.770 Hit apply. 02:53.800 --> 02:56.470 Now it is crispy and nice. 02:56.620 --> 03:01.630 Next step would be what to change pixel per unit, just like we did in the beginning. 03:01.630 --> 03:03.970 So let's do pixel per unit 16. 03:04.690 --> 03:05.830 Very nice. 03:05.830 --> 03:10.810 Now let's go and choose sprite mode multiple here. 03:10.810 --> 03:12.130 This is very important. 03:12.130 --> 03:16.360 And after that we can click Open Sprite Editor on the sprite editor. 03:16.360 --> 03:19.450 We need to slice them so they can be used one by one. 03:19.570 --> 03:23.200 I'm going to choose here grid by cell size. 03:23.410 --> 03:26.770 And I know the size is 32 by 32. 03:26.800 --> 03:29.470 So let's slice it hit apply. 03:29.470 --> 03:32.620 And now we have them ready to use just like we had before. 03:34.020 --> 03:36.600 Now let's select all of the sprites here. 03:36.600 --> 03:37.560 Just like that. 03:39.130 --> 03:41.230 And drag them to this animation. 03:41.440 --> 03:48.520 If we go to scene now and click play, we can see our character is moving in the idle animation, although 03:48.520 --> 03:50.020 it's kind of too fast. 03:50.020 --> 03:56.860 We can go here, click Show Sample Rate and change sample rate to what we want. 03:56.860 --> 04:00.430 I know for this animation it is better to have sample rate 15. 04:00.430 --> 04:03.070 So I'm going to type 15 and press enter. 04:04.380 --> 04:06.900 And now this is the idle animation. 04:06.900 --> 04:11.310 Let's go ahead and place character somewhere here and go to play mode. 04:14.060 --> 04:15.080 And here. 04:15.080 --> 04:16.370 He feels alive now. 04:16.400 --> 04:17.960 Very nice, very cool. 04:17.960 --> 04:19.940 Although if we try to move. 04:21.020 --> 04:22.640 This is what is happening. 04:22.790 --> 04:24.470 There is no movement animation. 04:24.470 --> 04:31.310 So first we have to create an animation and then we have to set up transition between animations so 04:31.310 --> 04:33.890 we can transit from idle to move. 04:33.890 --> 04:35.360 Very easy to do. 04:35.570 --> 04:37.100 Let's just uh. 04:38.620 --> 04:46.180 Select animator, go here, click create new clip and type player move. 04:46.630 --> 04:48.850 Make sure you select correct folder. 04:48.850 --> 04:52.750 So I'm going to go to Assets Animations and make it here. 04:54.110 --> 04:54.770 Nice. 04:54.770 --> 04:58.160 Now we need movement sprites and we have them over here. 04:58.160 --> 04:58.790 Run. 04:59.360 --> 05:01.130 So I'm going to select them all. 05:02.270 --> 05:03.860 And just move them here. 05:04.190 --> 05:05.900 Uh, let's see the animation. 05:06.380 --> 05:07.100 Too fast. 05:07.100 --> 05:08.870 Let's change it to 15. 05:11.530 --> 05:12.280 Um, kinda. 05:12.280 --> 05:12.670 Okay. 05:12.670 --> 05:14.620 Maybe it could be a little bit faster. 05:14.620 --> 05:16.600 So let's try 17. 05:18.830 --> 05:19.220 Yeah. 05:19.220 --> 05:20.090 Feels okay. 05:20.090 --> 05:21.050 Very good. 05:21.500 --> 05:24.830 So now if we go to animator, we can see we have two animations. 05:24.830 --> 05:28.040 And somehow we need to establish connection between them. 05:28.040 --> 05:33.470 And somehow we need to tell if we need to change from one animation to another. 05:33.470 --> 05:35.000 There are a couple of ways to do that. 05:35.000 --> 05:39.530 First, I'm going to show you one of the most common ways, and then I'm going to show you a nice way 05:39.530 --> 05:41.090 to do it how I like to do it. 05:41.090 --> 05:41.630 Okay. 05:41.930 --> 05:44.090 So let's go to parameters. 05:48.880 --> 05:50.020 Click plus. 05:50.020 --> 05:53.170 And over here we're going to choose Boolean. 05:53.170 --> 05:56.560 And I'm going to name it as Ease running. 05:58.290 --> 06:01.380 So now we created a parameter for the animator. 06:05.160 --> 06:07.020 Uh, let's click one of the animations. 06:07.020 --> 06:07.800 Right button. 06:07.800 --> 06:10.050 Make transition to player move. 06:10.500 --> 06:13.740 So now we have two animations and we have transition between them. 06:14.800 --> 06:17.770 And condition for the transition would be assigned. 06:17.770 --> 06:18.670 Over here. 06:18.670 --> 06:19.570 We're just going to click. 06:19.570 --> 06:22.330 Plus is running true. 06:23.160 --> 06:25.170 Then we need to make transition back. 06:26.890 --> 06:28.090 Is running. 06:29.150 --> 06:29.810 Pulse. 06:30.550 --> 06:36.790 Now somehow we need to change this parameter over here in the animator through the script. 06:36.940 --> 06:38.290 This is what we need to do. 06:39.400 --> 06:40.810 We're going to go to player. 06:40.810 --> 06:45.550 And if we want to work with animator, that is over here. 06:45.550 --> 06:51.130 First of all, we need to get access to that animator, same as we did with the rigid body. 06:51.160 --> 06:55.930 That can be achieved by just creating a variable type of animator. 06:55.930 --> 06:59.710 So private animator and let's give it a name. 06:59.710 --> 07:01.540 And I'm used to work with the name anim. 07:01.540 --> 07:02.890 So that's what I'm going to use. 07:02.890 --> 07:05.260 Anim now how do we get this? 07:05.260 --> 07:10.600 If it's a private and it is not on the same GameObject, it is a child. 07:10.600 --> 07:14.920 Well actually we can go back to script and type here. 07:15.430 --> 07:21.280 Anim equals to get component in children animator. 07:22.380 --> 07:27.690 Now let's save this, and let's just make sure we got the component by going to play mode. 07:27.690 --> 07:29.760 And we're going to check debug over here. 07:30.270 --> 07:32.760 Debug we have animator assigned. 07:32.760 --> 07:34.320 And this is the animator. 07:34.980 --> 07:35.790 Right. 07:36.390 --> 07:37.410 Very good. 07:39.970 --> 07:43.870 Now we have access to the animator and somehow we need to change. 07:43.870 --> 07:45.850 This parameter is running. 07:45.880 --> 07:48.460 Let's try to make a public boolean. 07:49.560 --> 07:50.610 Is running. 07:52.780 --> 07:58.240 And then in the animator over here I'm going to type enum set bool. 07:58.270 --> 08:00.790 So we set in boolean of the animator. 08:00.790 --> 08:05.860 Then we need to give a name of a boolean and be sure not to make a mistake here. 08:05.860 --> 08:08.470 And I usually do lots of mistakes in the animator. 08:08.470 --> 08:12.220 So I'm going to go here and copy this name over here. 08:12.220 --> 08:16.510 Then go back to script open quotation marks and paste this in. 08:16.510 --> 08:20.200 And then as a parameter we want to have we need a value. 08:20.200 --> 08:21.970 We need to pass a value here. 08:21.970 --> 08:24.310 First we say what do we want to change. 08:24.310 --> 08:26.380 Then we want to say how we change it. 08:26.380 --> 08:30.820 And we're going to give it a value of boolean we just created is running. 08:30.820 --> 08:31.990 Let's save this. 08:31.990 --> 08:33.460 Go back to unity. 08:37.370 --> 08:42.260 Select normal and we have Isrunning boolean here. 08:42.260 --> 08:43.730 Let's go to play mode. 08:46.960 --> 08:48.730 And we can see he's standing. 08:48.730 --> 08:50.140 Now I'm going to click this. 08:50.140 --> 08:50.980 True. 08:51.430 --> 08:53.170 It was changed here to true. 08:53.170 --> 08:54.340 And he is moving. 08:54.340 --> 08:57.430 I'm going to click it again and he stops. 08:57.460 --> 08:58.450 Very cool. 08:58.450 --> 09:01.390 Now somehow we need to make it change. 09:01.390 --> 09:07.420 Not when we press in boolean in the inspector, but you know, automatically by itself. 09:07.420 --> 09:10.240 Well, we can do it in some simple way. 09:11.900 --> 09:16.160 First, I'm going to show you how you could do it with a if statement, but I'm going to say in advance 09:16.160 --> 09:17.270 it's not very good way. 09:17.270 --> 09:19.730 I'm just going to show you how not to do it. 09:19.730 --> 09:21.440 And then I'm going to show you a nice way to do it. 09:21.440 --> 09:21.950 Okay. 09:23.550 --> 09:24.960 So we're going to type if. 09:26.120 --> 09:35.060 RB velocity dot x not equals to zero means we are moving because velocity of the x is not zero, it 09:35.060 --> 09:37.580 is -1 or -1 or bigger. 09:37.580 --> 09:39.320 And that means RB is moving. 09:39.320 --> 09:41.960 So we're going to do is running true. 09:43.010 --> 09:48.500 Else in other case if it's a zero then is running false. 09:48.500 --> 09:49.790 Let's just do it this way. 09:49.790 --> 09:52.100 And then I'm going to show you a better way okay. 09:52.100 --> 09:53.540 Let's save this. 09:54.790 --> 09:55.600 Go back. 09:58.070 --> 09:59.300 Hit the play button. 10:01.050 --> 10:03.120 And see the animation we stand in. 10:03.120 --> 10:06.510 I'm going to move and I have animation there. 10:06.720 --> 10:07.680 Very nice. 10:07.680 --> 10:11.310 So first of all, you can see transition is not immediate. 10:11.310 --> 10:13.290 And even if I stop running. 10:13.890 --> 10:18.180 There was a bit of a delay between animations that can be easily fixed. 10:18.180 --> 10:21.960 If we go over here as the exit time and check. 10:25.780 --> 10:28.630 And transition duration should be zero. 10:29.200 --> 10:31.240 Same goes for another condition. 10:31.390 --> 10:34.540 Transition duration zero has exit time and check. 10:34.570 --> 10:39.730 Now when I move, it immediately changes to the movement animation. 10:40.560 --> 10:41.280 Very cool. 10:41.280 --> 10:41.910 Right? 10:42.450 --> 10:46.860 Now this is working and this is nice, but it's really written. 10:46.860 --> 10:47.820 Not that good. 10:47.850 --> 10:49.260 We could do it better. 10:49.260 --> 10:51.690 There is a way of assigning boolean. 10:52.730 --> 10:55.310 Just by typing what it should be equals to. 10:55.340 --> 11:01.310 If we want it to be true, uh, we're going to type is running which is a boolean equals to. 11:01.310 --> 11:05.750 And here whatever you type will be condition for the boolean to be true. 11:05.750 --> 11:12.260 As example we want to say is running equals to RB velocity dot x not equals to zero. 11:12.260 --> 11:19.100 So in this way we say that this boolean will be true if rb velocity is not equals to zero. 11:19.100 --> 11:22.010 If there is any other value here, it's going to be false. 11:22.040 --> 11:24.050 Let's go ahead and see this. 11:30.550 --> 11:32.530 To the very cool rate. 11:34.630 --> 11:41.080 Now this works very well and it can be done a bit better with the help of a blend tree. 11:41.080 --> 11:44.920 But I want to show you how to work with the blend tree in the next video. 11:44.920 --> 11:49.150 So as of now, let's just clean this up a little bit and jump to next video. 11:49.150 --> 11:49.660 Okay. 11:49.900 --> 11:52.420 We're gonna select these two lines of code. 11:52.420 --> 11:55.000 And this time I'm not going to make method manually. 11:55.000 --> 12:02.110 Actually I want to click Alt Enter to call Quick Actions and then choose over here extract method. 12:02.260 --> 12:08.110 So now we took those two lines of code and wrapped them up in the method sort of automatically. 12:08.110 --> 12:13.000 Now let's give it a name and I'm going to name it as Handle animations. 12:14.120 --> 12:15.050 Nice. 12:15.290 --> 12:17.900 Let's keep it like that now it is a bit cleaner. 12:17.900 --> 12:20.660 This method is responsible for animations. 12:20.660 --> 12:23.390 This method is responsible for movement. 12:23.390 --> 12:29.780 Also, we don't really need to make a boolean here because we can just pass value to this animator like 12:29.780 --> 12:30.590 it is. 12:30.590 --> 12:32.360 We can remove this boolean. 12:33.920 --> 12:42.260 We can remove information from here and we can just go to this parenthesis and type here. 12:42.260 --> 12:45.860 Our velocity dot x not equals to zero. 12:46.040 --> 12:51.110 And even like that it will accept this information as a boolean true or false. 12:51.110 --> 12:53.720 If this not equals to zero it will be true. 12:53.720 --> 12:56.540 If it is equals to zero and it will be false. 12:56.540 --> 13:00.290 So we sort of control in boolean that way and it will work as well. 13:00.290 --> 13:02.000 We can go ahead and quickly check this. 13:02.000 --> 13:06.110 But other than that we good with this video and we're going to jump to the next one. 13:07.500 --> 13:10.020 And it's working very well. 13:10.020 --> 13:11.790 Now let's go to the next video. 13:11.820 --> 13:16.830 We're going to talk about Blend Trace, something very useful and very helpful especially for this project. 13:16.830 --> 13:17.790 I'll see you in the next video.