WEBVTT 1 00:00:00.280 --> 00:00:02.980 Hey, everybody, welcome back to another Godot tutorial. 2 00:00:03.000 --> 00:00:06.700 Today we're going to talk about one of my favorite parts of game development and working with Godot, 3 00:00:06.700 --> 00:00:08.300 and that's animating characters. 4 00:00:08.400 --> 00:00:11.300 What we're going to do is take a Sprite Sheet and out of that Sprite Sheet, we're going to 5 00:00:11.460 --> 00:00:14.160 divide it into different defined animated series. 6 00:00:14.200 --> 00:00:16.800 We'll call them cycles or animation cycles or something. 7 00:00:17.250 --> 00:00:22.150 Godot has a wonderful tool for creating these kind of things and managing them and staying organized. 8 00:00:22.200 --> 00:00:23.800 And that's called the animation player. 9 00:00:24.300 --> 00:00:26.000 There are a few other ways to do this in Godot too. 10 00:00:26.000 --> 00:00:28.800 There's a node called Animated Sprites 11 00:00:28.880 --> 00:00:30.279 and a few other different ways; 12 00:00:30.700 --> 00:00:32.800 but the Animation Player quickly became my favorite 13 00:00:32.800 --> 00:00:36.900 because I like to do a lot of animations and in that you got to stay really organized. 14 00:00:36.900 --> 00:00:38.600 And plus the Animation Player comes with 15 00:00:38.640 --> 00:00:41.140 like a really nice UI that's easy to use and play with. 16 00:00:41.140 --> 00:00:43.160 So I'm excited to show that to you today. 17 00:00:43.500 --> 00:00:44.800 By the way, if you're new here, 18 00:00:44.840 --> 00:00:47.640 my name is Drew. I teach people how to get into game development. 19 00:00:47.680 --> 00:00:50.280 If you're into that kind of thing, please hit the subscribe button. 20 00:00:50.730 --> 00:00:53.830 Let's get started here by creating our actual character that we're going to work with. 21 00:00:53.900 --> 00:00:56.199 So as usual, hit this plus button. 22 00:00:56.400 --> 00:00:58.699 Go over to, I'm going to choose the other type of node. 23 00:00:58.748 --> 00:01:01.449 And just like we've seen before, Kinematic Body 2D; 24 00:01:01.500 --> 00:01:03.900 that's a good choice for a character that moves around the screen. 25 00:01:04.000 --> 00:01:06.800 We're not really going to do much movement like physics movement today, 26 00:01:06.809 --> 00:01:09.009 but we are going to do a lot of animating so that's common. 27 00:01:09.009 --> 00:01:13.210 Common, you need that in Kinematic Body 2Ds for your characters in your game. 28 00:01:13.800 --> 00:01:16.440 And just like before, I'm going to add a few layers. 29 00:01:16.440 --> 00:01:19.800 I'm going to just ignore the warning about the body collision body. We don't need that today; 30 00:01:20.000 --> 00:01:23.200 but I'm going to add two layers, one for the Sprite. 31 00:01:23.500 --> 00:01:25.600 It's going to be like the actual appearance of our character 32 00:01:26.000 --> 00:01:29.500 and then another one for another Sprite. 33 00:01:30.220 --> 00:01:32.320 This is going to serve to be the shadow 34 00:01:33.700 --> 00:01:36.200 of our character, and I'll just layer them properly. 35 00:01:37.000 --> 00:01:39.900 As usual, I've prepared some. Let's go ahead and 36 00:01:40.600 --> 00:01:42.399 save this as character. 37 00:01:43.300 --> 00:01:46.700 Like I said, I've prepared some images for us to use like I normally do. 38 00:01:47.089 --> 00:01:50.189 It's been brought to my attention. I've been doing a bad job lately of leaving 39 00:01:50.230 --> 00:01:52.230 those in the description as a download. My bad. 40 00:01:52.230 --> 00:01:53.530 These will be in the description 41 00:01:53.530 --> 00:01:56.060 if you want to download them and follow along with me right now. 42 00:01:56.450 --> 00:02:00.150 So the first thing I'll do is have our Sprite layer selected here and that will reveal our 43 00:02:00.270 --> 00:02:01.670 empty texture slot over here. 44 00:02:01.970 --> 00:02:03.770 I'm going to grab demo RPG character, 45 00:02:03.800 --> 00:02:06.800 which is one of the assets I prepared and plop it into texture. 46 00:02:07.100 --> 00:02:09.100 Now you'll see it appear on screen. 47 00:02:09.400 --> 00:02:12.200 And until this point in these Godot videos, if you've been following along; 48 00:02:12.200 --> 00:02:14.160 we've only been working with images that 49 00:02:14.920 --> 00:02:18.920 are kind of like one cell large, meaning they only have one thing in them. 50 00:02:19.210 --> 00:02:22.710 This is a Sprite Sheet where we have many different frames of the same character. 51 00:02:22.990 --> 00:02:27.090 And so by default, Godot doesn't know that we're dealing with a Sprite Sheet. 52 00:02:27.109 --> 00:02:30.109 So what we need to do is configure our Sprite over here. 53 00:02:30.109 --> 00:02:32.960 There's an animation spindly thing, 54 00:02:33.340 --> 00:02:36.240 and we need to tell Godot how big this asset is. 55 00:02:36.920 --> 00:02:39.920 And the way you do that is by rows and columns 56 00:02:40.220 --> 00:02:43.220 or V frames and H frames like vertical and horizontal. 57 00:02:43.400 --> 00:02:45.100 So this asset here we have 58 00:02:45.300 --> 00:02:49.900 5 rows going across. So vertically, what we're going to do here is pop in 5; 59 00:02:50.490 --> 00:02:52.390 and then you'll see that Godot kind of 60 00:02:53.299 --> 00:02:55.799 starts cropping this thing for us, which is good. 61 00:02:56.000 --> 00:02:59.900 And then each row is 4 frames across. 62 00:02:59.900 --> 00:03:02.500 So in H frames, hit 4 enter. 63 00:03:02.700 --> 00:03:04.899 And now you see that our character has 64 00:03:05.400 --> 00:03:07.200 appearing at the correct size that we want. 65 00:03:08.100 --> 00:03:11.400 It's also kind of fun to come in here and sometimes just play with the wrong value. 66 00:03:11.400 --> 00:03:14.800 And you can see that if it looks weird like this isn't a perfect square anymore, 67 00:03:14.800 --> 00:03:17.459 it's likely that you don't have the right values in here. 68 00:03:17.470 --> 00:03:19.070 So just if something looks off, 69 00:03:19.070 --> 00:03:22.770 just double check these values. Make sure it matches up with the asset that you're using. 70 00:03:23.519 --> 00:03:25.019 Zoom in on our character bit. 71 00:03:25.019 --> 00:03:28.100 And now I'm going to add our shadow. So I'll Select the shadow layer over here. 72 00:03:28.100 --> 00:03:32.390 It's already selected and pull in our shadow asset to the texture. 73 00:03:32.700 --> 00:03:34.500 And now the shadow is not a Sprite Sheet. 74 00:03:34.500 --> 00:03:37.100 It's just one frame that's 32 by 32 pixels. 75 00:03:37.100 --> 00:03:40.700 So it'll line up just perfectly with one frame of our character Sprite Sheet. 76 00:03:41.100 --> 00:03:44.700 Now the next step for us is to introduce the actual Animation player node. 77 00:03:44.710 --> 00:03:46.410 It's going to be the star of our show today. 78 00:03:46.600 --> 00:03:50.000 So I'll go add Child node and search for Animation Player. 79 00:03:50.000 --> 00:03:52.700 You see a few different hits come, but yeah, Animation Player is what we want. 80 00:03:53.100 --> 00:03:56.100 Create that and that can live just right next to our Sprite and shadow. 81 00:03:56.400 --> 00:03:59.000 So a quick intro to the Animation Player. You see, if I click it, 82 00:03:59.100 --> 00:04:01.000 we get this new area down here called 83 00:04:01.330 --> 00:04:03.230 this is like the workspace of the Animation player. 84 00:04:03.500 --> 00:04:06.200 And in here this is a drop down that's currently empty, 85 00:04:06.200 --> 00:04:08.489 but we can create animation cycles that we can 86 00:04:08.489 --> 00:04:11.660 then apply to whatever we want in our scene tree. 87 00:04:12.120 --> 00:04:15.020 So what I'm going to do is click the animation button and say new. 88 00:04:15.320 --> 00:04:17.420 This one will call Walk down. 89 00:04:18.620 --> 00:04:21.820 And then you see, after we did that, we get kind of this timeline 90 00:04:21.899 --> 00:04:25.599 sort of thing down here where how Animation Player does is; 91 00:04:25.789 --> 00:04:28.389 it allows you to select any node 92 00:04:28.450 --> 00:04:31.150 and then within that node any property of that node 93 00:04:31.539 --> 00:04:34.840 and plot out values for that node over time. 94 00:04:35.340 --> 00:04:38.940 So for example, right now we have a Sprite. It's starting only on frame 0, 95 00:04:38.940 --> 00:04:41.289 which is the top left frame of our Sprite Sheet. 96 00:04:41.700 --> 00:04:43.700 But over time we want to show Frame 0; 97 00:04:43.740 --> 00:04:46.140 Frame 1, frame 2, maybe back to frame 1 98 00:04:46.300 --> 00:04:47.900 and then start the whole thing over. 99 00:04:48.200 --> 00:04:49.650 So that's what we're going to walk through today. 100 00:04:50.040 --> 00:04:52.640 So to do that, I'm going to add track 101 00:04:53.200 --> 00:04:55.400 and this is going to be a property track. 102 00:04:55.740 --> 00:04:57.940 The first step is to select the node 103 00:04:58.080 --> 00:04:59.979 that we want to animate a property on. 104 00:05:00.100 --> 00:05:02.000 And so for us, that's going to be our Sprite. 105 00:05:02.500 --> 00:05:04.400 But again, you notice you can select anything in here 106 00:05:04.400 --> 00:05:07.680 which makes these tools really powerful, and we'll walk through some of that in a bit. 107 00:05:07.680 --> 00:05:09.479 But I'll Select Sprite. Hit OK. 108 00:05:09.979 --> 00:05:11.080 The next question is going to be 109 00:05:11.159 --> 00:05:14.859 on our Sprite, which property do I want to animate over time. 110 00:05:15.500 --> 00:05:20.000 And for us again, you can see everything that you can normally tinker with in the Inspector over here 111 00:05:20.300 --> 00:05:21.300 is available here. 112 00:05:21.800 --> 00:05:24.900 But for us, as I said before, we're just going to use frame, 113 00:05:25.870 --> 00:05:28.670 and now we get a new track. Kind of like 114 00:05:28.940 --> 00:05:30.640 video editing, audio editing, whatever. 115 00:05:30.840 --> 00:05:33.940 A new track that we can right click insert key 116 00:05:34.100 --> 00:05:36.500 and then create different points on. 117 00:05:37.020 --> 00:05:40.620 If I select one of the points that I've created, the Inspector will 118 00:05:40.740 --> 00:05:42.440 show the value for it here. 119 00:05:42.440 --> 00:05:45.059 So the value for the frame on this one is zero. 120 00:05:45.099 --> 00:05:48.599 But if I come over here, insert key, select the second one 121 00:05:48.660 --> 00:05:53.460 and go ahead and change the value to one for the first frame in our Sprite Sheet. 122 00:05:53.500 --> 00:05:54.700 Again, they start from 123 00:05:54.880 --> 00:05:57.380 the top left and go to the right and then count their way down. 124 00:05:57.400 --> 00:05:59.900 So one will be like the one to the right of the first one. 125 00:06:00.500 --> 00:06:01.800 Now we see that 126 00:06:03.780 --> 00:06:06.179 the character when I put the cursor past 127 00:06:06.390 --> 00:06:09.490 the last step on the timeline, the character updates to be that first frame. 128 00:06:09.920 --> 00:06:13.220 If you just drag the cursor around, you can see that the frames are changing. 129 00:06:13.500 --> 00:06:16.200 So let's go in here and just add the next few ones. 130 00:06:19.200 --> 00:06:20.300 So this will be two 131 00:06:21.800 --> 00:06:22.500 and three. 132 00:06:22.900 --> 00:06:26.200 And now you see as I drag my cursor around the frames change. 133 00:06:26.300 --> 00:06:27.600 I can also hit this play button 134 00:06:27.900 --> 00:06:30.900 and that'll play the animation once. But this is a walking cycle. 135 00:06:30.900 --> 00:06:32.360 So we want to repeat. 136 00:06:32.660 --> 00:06:34.360 So there's this little looping button 137 00:06:34.400 --> 00:06:37.800 so the walk down will always repeat when you play it. So click the looping button. 138 00:06:38.210 --> 00:06:41.710 And then also if I Zoom in a little bit here, you see that; 139 00:06:42.050 --> 00:06:45.550 our animation will go the length of what's highlighted here in the timeline, 140 00:06:45.760 --> 00:06:49.159 but we've got a lot of negative empty space. 141 00:06:49.780 --> 00:06:51.180 And so what I'll do is 142 00:06:51.780 --> 00:06:54.580 take this and change the limit to more like what we want, 143 00:06:54.640 --> 00:06:56.940 which I think is 0.5 144 00:06:57.620 --> 00:06:58.720 No, 0.4. 145 00:06:59.950 --> 00:07:03.650 And then now we have the same amount of negative space after our last frame. 146 00:07:03.720 --> 00:07:06.220 So if I rewind to the beginning hit play; 147 00:07:06.420 --> 00:07:09.720 you see that the character will kind of run and it keeps repeating evenly. 148 00:07:10.880 --> 00:07:14.880 This is a little bit faster than I intended, so I'm going to go ahead and just space them out a little bit more. 149 00:07:15.620 --> 00:07:17.220 Move you over here, move you over here, 150 00:07:17.330 --> 00:07:18.830 make sure it's nice and even. 151 00:07:19.849 --> 00:07:23.849 And then we'll extend our length out to where it goes. 152 00:07:24.940 --> 00:07:26.840 Now our pace is a little bit more natural. 153 00:07:27.400 --> 00:07:31.099 It is possible to change the speed of the animations with code, too. 154 00:07:31.099 --> 00:07:34.159 But for the sake of our tutorial today, I want to keep it nice and simple. 155 00:07:34.730 --> 00:07:37.830 Now we've covered the most basic animation coming from a Sprite Sheet. 156 00:07:37.980 --> 00:07:40.780 This is good and often it's enough. But let's have a little bit more fun. 157 00:07:41.070 --> 00:07:43.670 I'm going to add one more layer up here to our scene. 158 00:07:43.800 --> 00:07:45.700 Add another Sprite again. 159 00:07:46.300 --> 00:07:48.600 And this time I'm going to call this hat. 160 00:07:49.640 --> 00:07:51.640 I'm going to move hat kind of right to be 161 00:07:51.750 --> 00:07:53.850 just above the Sprite, just for cleanliness. 162 00:07:54.070 --> 00:07:56.870 What I'm going to do is pull in another Sprite Sheet to that hat. 163 00:07:57.620 --> 00:08:01.720 Sorry. So I need to select the hat, reveal the texture, drag it in. 164 00:08:02.770 --> 00:08:05.270 And now you see, I'll Zoom out a little bit. 165 00:08:05.590 --> 00:08:08.590 Now we have a hat Sprite Sheet that goes four wide 166 00:08:08.920 --> 00:08:13.320 and it's one row tall. So let's go ahead and plug in those values to our Inspector; 167 00:08:13.680 --> 00:08:15.480 so vertical frames can remain one. 168 00:08:15.500 --> 00:08:17.380 But horizontal frames, let's go four. 169 00:08:17.690 --> 00:08:20.690 And now again, you see that hat snapped directly onto the character, 170 00:08:21.140 --> 00:08:22.240 but it's not moving. 171 00:08:22.438 --> 00:08:25.539 See, the character's head is bobbing up and down, but the hat staying still. 172 00:08:25.539 --> 00:08:27.890 So let's go ahead and animate the hat along with the character. 173 00:08:28.260 --> 00:08:31.260 We've seen already that you can animate frames. And that's great. 174 00:08:31.340 --> 00:08:36.340 But like I said before, you can animate anything. So we're going to add a new track another property track. 175 00:08:36.340 --> 00:08:39.558 And again, first question is, which node in the scene do you want to animate 176 00:08:39.799 --> 00:08:42.400 for us this time it's going to be a hat. So I'll hit say hat. 177 00:08:42.799 --> 00:08:45.699 Then Godot will ask, okay, which property do you want to animate on the hat? 178 00:08:45.819 --> 00:08:49.319 And for us this time it's going to be position. 179 00:08:51.350 --> 00:08:54.650 Now that I've done that, you see that we get a new track on our timeline. 180 00:08:54.790 --> 00:08:56.390 This time for hats position. 181 00:08:56.400 --> 00:08:59.290 It does a nice job of kind of organizing where everything is for us. 182 00:08:59.570 --> 00:09:01.970 I'm going to stop this before I drive myself nuts. 183 00:09:02.510 --> 00:09:05.210 And here I'll right click insert a new key. 184 00:09:05.380 --> 00:09:07.480 And this time before we were dealing with a frame, 185 00:09:07.500 --> 00:09:11.000 and that value is just like the number of the frame that should be showing right now. 186 00:09:11.819 --> 00:09:15.819 But for position, Godot knows that's a type vector 2D. 187 00:09:16.020 --> 00:09:20.020 So when we inspect that stop on our timeline on the position track, 188 00:09:20.420 --> 00:09:24.520 the Inspector knows. Okay, a vector 2D has an X value and a Y value. 189 00:09:24.820 --> 00:09:27.220 And so we can use that and change it over time. 190 00:09:27.580 --> 00:09:29.880 For our first step, we just want to stay right where we are 191 00:09:29.920 --> 00:09:31.720 because what we see on screen looks correct. 192 00:09:32.020 --> 00:09:34.520 But I'll insert another one. Let's do another few. 193 00:09:35.020 --> 00:09:37.820 And the way the Sprite Sheet works is when 194 00:09:38.280 --> 00:09:42.980 the character steps forward, his head goes one Pixel down on Y will say one; 195 00:09:43.910 --> 00:09:46.510 and then the third frame we're back up to the top 196 00:09:46.510 --> 00:09:49.270 so we can leave it at the default where it was, which is zero-zero. 197 00:09:49.620 --> 00:09:52.720 But then our fourth one will go ahead and also change that to one 198 00:09:52.720 --> 00:09:55.520 because it's also how the Sprite Sheet works. The heads bobbing up and down. 199 00:09:56.300 --> 00:09:57.900 You see, when I move my cursor around, 200 00:09:58.400 --> 00:10:02.199 the head in fact, we'll just play the animation in loop mode. 201 00:10:02.439 --> 00:10:04.040 The hat will bop up and down, 202 00:10:04.310 --> 00:10:06.209 but something kind of funky is happening. 203 00:10:06.209 --> 00:10:08.200 Zoom in just a little bit more. I see that 204 00:10:08.700 --> 00:10:11.500 the position is animating to its next spot. 205 00:10:11.540 --> 00:10:12.640 It's not just jumping there. 206 00:10:13.000 --> 00:10:14.700 If you were making a game that had more 207 00:10:14.900 --> 00:10:18.600 like illustrated characters that had more bubbly feel, this might be appropriate; 208 00:10:18.640 --> 00:10:22.740 but for us in Pixel art, it just looks kind of funky and 209 00:10:22.740 --> 00:10:24.170 kind of weird kind of freaking me out. 210 00:10:24.200 --> 00:10:27.400 So this spot right here, let's stop that real quick. 211 00:10:28.520 --> 00:10:30.720 Each track has these little drop downs next to it. 212 00:10:30.740 --> 00:10:34.240 And see that our frame before already defaulted to this value; 213 00:10:34.240 --> 00:10:38.029 but our hat position track defaulted to 214 00:10:38.260 --> 00:10:40.060 transition type of continuous, 215 00:10:40.120 --> 00:10:45.220 which is basically going to if you're going from zero to one, it's going to animate all the way there; 216 00:10:45.220 --> 00:10:47.520 and get all the sub points between zero and one. 217 00:10:47.660 --> 00:10:51.360 We don't want that. We just want to jump from zero to one right on that node stop. 218 00:10:51.770 --> 00:10:55.270 So we'll just select discrete. And now that that's selected; 219 00:10:55.730 --> 00:10:59.930 and I drag you see that the hat moves with the character, so we'll play it again. 220 00:11:00.750 --> 00:11:02.750 Now it looks like a real animation, 221 00:11:02.750 --> 00:11:05.650 and this is really cool, because now that the hat is a separate layer, 222 00:11:06.570 --> 00:11:07.970 you can toggle it on and off. 223 00:11:08.600 --> 00:11:10.600 So imagine in your game, you can unlock a hat. 224 00:11:10.600 --> 00:11:12.859 Well, if you have the hat, you just turn the hat on 225 00:11:13.040 --> 00:11:15.640 or if you want to get a different hat, find a different hat. 226 00:11:15.640 --> 00:11:18.050 You can just change out the texture of this hat layer, 227 00:11:18.300 --> 00:11:20.800 and it's already set up animating for you ready to go. 228 00:11:21.500 --> 00:11:22.900 So that concludes the first of 229 00:11:23.030 --> 00:11:26.829 two videos about the animation player. We're going to dive into part two right after this; 230 00:11:26.959 --> 00:11:29.759 where we're going to learn about adding different types of animations 231 00:11:29.780 --> 00:11:32.380 and getting the animation player itself to do more things. 232 00:11:32.700 --> 00:11:34.100 We've covered Sprite frames 233 00:11:34.140 --> 00:11:37.340 and positioning right now, and those are great and can be very powerful; 234 00:11:37.500 --> 00:11:40.300 but this thing can do way more. It can even fire code at certain points. 235 00:11:40.300 --> 00:11:42.100 It can play sound effects. It can do a lot. 236 00:11:42.420 --> 00:11:44.820 So we're going to dive into that stuff in the next video. 237 00:11:45.300 --> 00:11:47.500 Thank you so much for watching this. Like I said before, 238 00:11:47.510 --> 00:11:49.910 if you're interested in game development, please subscribe. 239 00:11:49.910 --> 00:11:52.480 If you learned something here, I really appreciate when you hit the like button. 240 00:11:52.880 --> 00:11:54.580 And if you're making a game yourself, 241 00:11:54.600 --> 00:11:57.700 be sure to hop in our Discord. We've got a community of people that are 242 00:11:57.979 --> 00:11:59.680 making and playing indie games. 243 00:11:59.700 --> 00:12:01.900 So if you're into that kind of thing, please come hang with us. 244 00:12:02.079 --> 00:12:04.379 All right. Thanks a lot. Catch you in the next video.