How to animate Sprite Sheets in Godot using AnimationPlayer (beginner tutorial)

hey everybody welcome back to another godot tutorial today we're going to talk about one of my favorite parts of game development and working with godot and that's animating characters what we're going to do is take a sprite sheet and out of that sprite sheet we're going to divide it into different defined animated series we'll call them cycles or animation cycles or something godot has a wonderful tool for creating these kind of things and managing them and staying organized and that's called the animation player there are a few other ways to do this in good o2 there's a node called animated sprites and a few other different ways but the animation player quickly became my favorite because i like to do a lot of animations and in that you got to stay really organized and plus the animation player comes with like a really nice ui that's easy to use and play with so i'm excited to show that to you today by the way if you're new here my name's drew i teach people how to get into game development if you're into that kind of thing please hit the subscribe button let's get started here by creating our actual character that we're going to work with so as usual hit this plus button go over to i'm going to choose that other type of node and just like we've seen before kinematic body 2d that's a good choice for a character that moves around the screen we're not really going to do much movement like physics movement today but we are going to do a lot of animating so that's commonly common you need that in kinematic body 2ds for your characters in your game uh and just like before i'm going to add a few layers i'm going to just ignore the warning about the body collision body we don't need that today but i'm going to add two layers one for the sprite it's going to be like the actual appearance of our character and then another one for our um another sprite but this is going to serve to be the shadow of our character and i'll just layer them properly as usual i've prepared some let's go ahead and save this as character like i said i've prepared some images for us to use like i normally do it's been brought to my attention i i've been doing a bad job lately of leaving those in the description as a download my bad these will be in the description if you want to download them and follow along with me right now so the first thing i'll do is have our sprite layer selected here and that will reveal our empty texture slot over here i'm going to grab demo rpg character which is one of the assets i prepared and plop it into texture and now we'll see it appear on screen and until this point and these godot videos if you've been following along we've only been working with images that are kind of like one cell large meaning they only have one thing in them this is a sprite sheet where we have many different frames of the same character and so by default godot doesn't know that we're dealing with a sprite sheet so what we need to do is configure our sprite over here there's a animation spindly thing and we need to tell godot how big this asset is and the way you do that is by rows and columns or v frames and h frames like vertical and horizontal so this asset here we have five rows going across so vertically what we're gonna do here is pop in five and then you'll see that godot kind of already starts cropping this thing for us which is good and then each row is four frames across so in h frames we'll hit four enter and now you see that our character has like appearing at the correct size that we want it's also kind of fun to come in here and sometimes just play with the wrong value and you can see that if it looks weird like this isn't a perfect square anymore it's likely that you don't have the right values in here so just if something looks off just double check these values make sure it matches up with the asset that you're using zoom in on our character bit and now i'm going to add our shadow so i'll select the shadow layer over here it's already selected and pull in our shadow asset to the texture and now this shadow is not a sprite sheet it's just one frame that's 32 by 32 pixels so it'll line up just perfectly with one frame of our character sprite sheet now the next step for us is to introduce the actual animation player node it's gonna be the star of our show today so i'll go add child node and search for animation player you see a few different hits come but yeah animation player is what we want create that and that can live just right next to our sprite and shadow so quick intro to the animation player you see if i click it we get this new area down here called this is like the workspace of the animation player and in here there's this is a drop down that's currently empty but we can create animation cycles that we can then apply to whatever we want in our scene tree so what i'm going to do is click the animation button and say new and this one will call walk down and then you see after we did that we get kind of this timeline sort of thing down here uh where how what animation player does is it allows you to select any node and then within that node any property of that node and plot out values for that node over time so for example right now we have a sprite that's starting only on frame 0 which is the top left frame of our sprite sheet but over time we want to show frame 0 frame 1 frame 2 maybe back to frame 1 and then start the whole thing over so that's what we're going to walk through today so to do that i'm going to add track and this is going to be a property track the first step is to select the node that we want to animate a property on and so for us that's going to be our sprite but again you notice you can select anything in here which makes these tools really powerful and we'll walk through some of that in a bit but i'll select sprite hit ok the next question is going to be on our sprite which property do i want to animate over time and for us that's again you can see everything that you can normally tinker with in the inspector over here is available here but for us like i said before we're just going to use frame and now we get a new track kind of like you know video editing audio editing whatever a new track that we can right click insert key and then create different points on if i select one of the points that i've created the inspector will show the value for it here so the value for the frame on this one is zero but if i come over here insert key select the second one and go ahead and change the value to one for the first frame in our sprite sheet again they start from the top left and go to the right and then count their way down so one will be like the one to the right of the first one now we see that the character when i put the cursor past the last step on the timeline the character updates to be that first frame and so if i you just drag the cursor around you can see that the frames are changing so let's go in here and just add the next few ones so this will be two and three and now you see as i drag my cursor around the frames change i can also hit this play button and that'll play the animation once uh but this is a walking cycle so we wanna to repeat uh so there's this little looping button so the walk down will always repeat when you play it so i'll click the looping button and then also our if i zoom in a little bit here you see that our animation will go the length of what's highlighted here in the timeline but what that's we've got a lot of like negative empty space uh and so what i'll do is take this and change the limit to more like what we want which i think is 0.5 nope 0.4 and then now we have the same amount of negative space after our last frame so if i rewind to the beginning hit play you'll see that the character will kind of run and it keeps repeating evenly 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 move you over here move you over here make sure it's nice and even and then we'll extend our length out to where it goes and now our pace is a little bit more natural it is possible to change the speed of the animations with code too but for the sake of our tutorial today i want to keep it nice and simple now we've covered the most basic animation coming from a sprite sheet this is good and often it's enough but let's have a little bit more fun so i'm going to add one more layer up here to our scene add another sprite yet again and this time i'm going to call this hat i'm going to move hat kind of right to be just above the sprite just for cleanliness what i'm going to do is pull in another sprite sheet to that hat sorry so i need to select the hat reveal the texture drag it in and now you see i'll zoom out just a little bit see now we have a hat sprite sheet that goes four wide and it's one row tall so let's go ahead and plug in those values to our inspector so vertical frames can remain one but horizontal frames let's go four and now again you see that hat snap directly onto the character but it's not moving uh see the character's head is bobbing up and down but the hat's staying still so let's go ahead and animate the hat along with the character we've seen already that you can animate frames and that's great but like i said before you can animate anything so we're going to add a new track another property track and again first question is which node in the scene do you want to animate for us this time it's going to be the hat so i'll hit say hat then godot will ask okay which property do you want to animate on the hat and for us this time it's going to be position now that i've done that you see that we get a new track on our timeline this time for hat's position it does a nice job of kind of organizing where everything is for us i'm gonna stop this before i drive myself nuts and here i'll right click insert a new key and this time before we were dealing with a frame and that value is just like the number of the frame that should be showing right now but for position godot knows that that's of type vector 2d so when we inspect that stop on our timeline on the position track the inspector knows okay a vector 2d has a x value and a y value and so we can use that and change it over time for our first step we just want to stay right where we are because what we see on screen looks correct but i'll insert another one let's do another few and the way this sprite sheet works is when the um the character steps forward his head goes one pixel down so on y we'll say one and then the third frame we're back up to the top so we can leave it at the default where it was which is zero zero but then our fourth one we'll go ahead and also change that to one because it's also how the sprite sheet works the head's bobbing up and down now you see when i move my cursor around the head uh in fact we'll just play the animation in loop mode the hat will bob up and down but something kind of funky is happening zoom in just a little bit more see that uh the position is like animating to its next spot it's not just jumping there if you were making a game that had more like illustrated characters that had a more bubbly feel this might be appropriate but for us in pixel art it's uh it just looks kind of funky and kind of weird it's kind of freaking me out so this spot right here let's stop that real quick each track has these little drop downs next to it and see that our frame before already defaulted to this value but our hat position track defaulted to a transition type of continuous which is basically gonna uh you know if you're going from zero to one it's gonna animate all the way there and get all the sub points between zero and one we don't want that we just want to jump from zero to one right on that node stop so we'll just select discrete and now that that's selected and i drag you see that the hat moves with the character so we'll play it again see now it looks like a real animation and this is really cool because now that the hat is a separate layer uh you can toggle it on and off so imagine in your game you can unlock a hat well if you have the hat you just turn the hat on or if you want to get a different hat find a different hat you can just change out the texture of this hat layer and it's already set up animating for you ready to go so that concludes the first of two videos about the animation player we're going to dive into part 2 right after this where we're going to learn about adding different types of animations and getting the animation player itself to do more things we've covered sprite frames and positioning right now and those are great and can be very powerful but this thing can do way more it can even fire code at certain points it can play sound effects it can do a lot so we're going to dive into that stuff in the next video thank you so much for watching this like i said before if you're interested in game development please subscribe if you learned something here i really appreciate when you hit the like button and if you're making a game yourself be sure to hop in our discord we've got a community of people that are making and playing indie games so if you're into that kind of thing please come hang out with us alrighty thanks a lot catch you in the next video you

Channel: Drew Conley

Views: 90,692

Keywords: godot engine, godot 3.2, godot tutorial, animation, sprite sheets, learn godot, coding tutorial, sprite sheet tutorial, AnimationPlayer

Id: FEwE6myyz_I

Length: 12min 19sec (739 seconds)

Published: Thu Aug 06 2020