Make an Action RPG in Godot 3.2 (P5 | AnimationPlayer)

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to the Godot action RPG series this video will be part 5 and in this video we're going to start animating our player character as you can see when we run the game our character moves around nicely in this world smooth collides with the bushes but the character just stands stands there the animation our sprite doesn't he doesn't move so we're going to be fixing that so we're going to come into our player scene and you're gonna find that's a reoccurring theme throughout future videos is if we need to do something with our player we're obviously going to be opening up our player scene and a changing stuff inside of this scene so we won't actually have our character fully animated by the end of this video and the reason is because we're going to have to learn about two different parts of the animation there's kind of two areas that we need to learn about and implement so this video is going to cover the first one we'll get the basics down and then in the next video we're gonna talk about some slightly more complicated things but they're really beneficial and important to talk about as well let's start by adding a new node to our player scene here and we're going to add an animation player now an animation player is a powerful node that lets you basically keyframes key any property actually over here you can key anything like offset whether it's flipped animation the region position I mean you could key you could key whether it's visible or invisible you can create any key in a little timeline down here and have an animate so first we're going to start by creating our own animation so we'll click when you when you select the animation player should open up this little tab down here and we can click animation and do new and this will allow us to create a new animation we're going to I'm actually going to open up my reference project here because I want to make sure how I set this up so we're going to do an animation for run right yeah will do run right so we'll call this run but we got to name it run right like that and you can see that gives us a little time line down here in each of these numbers they represent seconds you can see that down here you could change this to frames per second or whatever but we're gonna just keep it in seconds and we've got a snap and our snap is set to 0.1 so if we try and move through this timeline you can see our position will snap it in point one intervals and this is the end of the animation we can actually use our zoom here to kind of zoom in that's probably good this little lighter area represents the entire animation from here to the end of it and this number right here is the total length of the animation so for this animation it's actually going to be six frames for our character well we actually be an idle - that's okay we'll start with a run that'll make the idle we're gonna have six frames so we'll do point six here since we're in point one snap increments then we can do point six to create six frames right here for our total animation now what property do we actually want to animate well we want to select our sprite because we're going to be animating the sprite for this animation and the property want we want to animate is the frame right over here and you can see if we move through this we get the different frames for animation so we're going to start on frame one this is the first frame we want to key at the start of our animation so then we can just press this little key right here and that's going to say create a new bed a new track property frame and insert a key and we say create but we don't want to use Bezier curves we don't need to worry about that for pixel-art for this kind of frame by frame animation so we'll do create and you can see it's added a little frame down here now if we come back to our sprite we can come over to the next one here and we can move up a single frame to go to frame two because this is the next frame we want in our animation and we can key it now since it's already been properly keyed or since we've already created this track it doesn't ask us about the Bezier curves anymore and because of that it instantly jumps to the next frame based on our snap distance and also moves the next frame here so Godot knows that we probably have a sequence of animations and we want to keep frame so it's going to do those two tasks for us and we can just continue to hit the key right here until we get to this last one right here we don't want to key it again and the reason is because technically for this last frame and our animation we actually want our very first frame and that's because I want this animation to start out on an action frame so I want it to start with the leg going forward and then end on a standing frame and that just helps so that if you barely tap the right key when you're moving your character it'll start out on this frame instead of instead of just you know being able to move the character without the legs moving at all so there we go and we want this animation to loop there's a little button right here we can press and this will make it loop and we can play the animation and watch our character animate inside of the editor in real time and we can stop this animation and save now we're going to create a new animation and we'll do run up and we're going to do a lot of the same things we'll set the length to point six and we'll come to our frames here come all the way to this frame frame seven will key this frame it's going to ask us if we want to create the curve or if we want to create the track we do come over one go to frame eight Kiki Kiki and then here we need to go all the way back to frame six and key that as our last frame and we'll turn on looping for this too now we have running up for a character perfect we're going to create a new animation we'll do run left set our length 0.6 we'll want it to loop come to here this frame 13 key that go over 1 come up to frame 14 key key key key and then come all the way back to frame 12 and key that and now the characters animating properly there and you can check these animations in the Ezzor to make sure you have them set up properly if you mess one up you can click on it and right-click and delete it and then add a new key there and if you lose your properties over here make sure you click on sprite again to get those back and we'll add a new animation run down that's how we're all fill in these days right just a little run down and we'll set this to loop as well come to frame 19 come to our first make sure we're in the first point in our track little keyframe key that frame go to 20 key key key key and then we'll come all the way back to 18 and key that as our last key test this to make sure it looks good it does and save now we're going to do the same thing but this is going to be for all of our idle animations so we're gonna do idle right so let's see it alright this will be a new animation this only needs to be a length of 0.1 because we're only going to have one frame for idle and you could of course set up your game to have animations for the idle I don't I don't have that in this project but you would just make sure to add the frames for your idle animation here make sure to set it to loop so I'm just going to go back to our very first frame and key that set it to loop and we'll create another one idle up set it to point one and we'll key idle up which will be this frame and then we'll set it to loop I must save so I don't lose my progress if something happens like a new frame idle left our new animation I mean and we'll come to our left one here key this make sure it loops save make a new animation idle down and we'll set this to 0.1 and key this frame make sure it loops there we go so you should have a big if you click on this now you should have a big list of the different the four different directions that your character needs to enemy and and that's pretty quick to set that up it doesn't take too long to set up those animations and they're ready to be used inside of our game now so if we set our run right here as an animation there's a little button right here that you can split that you can press this is called autoplay onload it means that this animation will be the one that plays when the game loads when the game starts running if we run a character you can see our character is now animating although he continues to animate even when he's not moving and he always faces to the right so we'll start with the very basics what you're going to learn about here is how to get access to our animation player node inside of our player script so first I'll show how to do it so let's hide our animation thing here and we'll come up here and we can create a new variable we'll call this an animation layer we'll set this equal to null and then you can do function ready in the ready function we can say animation player equals and if you do the dollar sign here this is a shorthand for getting access to a node in the tree here that you are that is a child of you basically and so you can see we could get the animation player the collision shape or the sprite we're going to get the animation player and it turns that green saying this is a path to a node that's to get to this node so we're setting our animation player variable this is a reference equal to the path to that node so that we can get access to it now why do we have to do it in the ready function well if we try to do it up here that node might not be finished initializing its properties and stuff and so we wouldn't be able to access it yet it might actually not even be in the scene yet we want to make sure and do it in the ready function once we're ready it should be ready as well and we can access it that way and then we can do anything we want with the animation player once we have access to it however there's a shortcut for this inside of Godot instead of doing it like this you can do what's called an unready VAR so we can do on ready and then you can say animation player equals and then do the dollar sign here animation player and that what this allows you to do is get rid of the ready function so you don't have to have a ready function that accesses a whole bunch of nodes right you can just do on ready var and this variable will not be created until the node is ready that's what the unready keyword here says beforehand so now that we have access to our animation player let's start with the very basics we'll make it so there are character animates when we're moving and doesn't enemy when we're stopped well we'll do we'll run the idol when we're stopped so if you want to look and see what you can do with this animation player we can actually search the help and say animation player right here click on this okay so this is the documentation for the animation player let's look at some of the methods that it has because that's what you can do right what can it do you can see we can add animations that advance find an animation and you look through these and you see play here and it says string and so let's click on that says play plays the animation with the key name so whatever we pass in as the name here that's what it will play that's the animation and then there's some custom there's some optional arguments here that we could pass in but we don't need to worry about all of those so we can come back to our player and in seen here when we're moving right this is when we're moving we can say animation player dot play and it gives us the list of our different animations well this is one we're moving so let's do idle right okay that's a good starting point and what we're not moving wait no that's not right we won't run right silly me and then when we're not moving we can do animation player dot play idle right this is when we want idle right let's save and run the game and now our character only animates when removing otherwise it plays the idle animation now let's see if we can take this one step farther we have our input vector and it will be positive it will be positive the x value will be positive if we're moving to the right and negative if we're moving to the left right so let's implement that into here as well we'll say if input vector vector dot X is greater than zero that would be positive play moving to the right else let's copy this paste it right here play run left save and run and now if we move to the left our character animates or turns and faces the left it doesn't work for other directions though right and you could you could write a big giant script that said oh what if our input you know if our input is this then move to the right if it's this then move up you know and try and figure out all of that logic but that's gonna be a huge pain we're not gonna want to do that little that won't be fun at all so and this gets into the next video we will be learning about animation trees and an animation tree will allow us to easily animate our character in multiple different directions including if you have a game with it we only have four directions here for our sprite but if you had a game that had sprite for eight all eight directions or even more directions you could set up your animation tree to handle multiple different directions for animations for all of those different directions so that's we're going to be learning about in the next video this one is going to be done here we created the basic animations we learned how to get access to a child node inside of our scene and how to look up the things that node can do in the documentation and then use them like this that's really important when you're learning about nodes you can see what can this node do look it up in the documentation you can kind of see what it can do and so I'm happy with how this video turned out I hope you guys enjoyed it I hope you guys learn something from it if you did give it a like let me know in the comments down below if you have any questions once again this video was sponsored by my Kickstarter backers for the one bit Godot course that course was funded and I was able to make this series as part of that Kickstarter if you're interested in learning about the course there will be a link for that and I will talk to you all later

Channel: HeartBeast

Views: 134,453

Keywords: Godot Engine, Godot 3.2, Godot 3, Tutorial, Series, Action RPG, RPG, Pixel Art Game, Indie Game, Game Development, Learn gamedev, Gamedev

Id: wX145eoLFSM

Length: 17min 45sec (1065 seconds)

Published: Fri Mar 20 2020