Code a Platformer Game and Release It in Godot Ep. 3 | Player Animations

welcome back to the series i know the last video was quite long and for future videos i'm going to try my best to break up into smaller chunks so hopefully that'll work better and in this episode we're going to be learning how to code the player movement and its animations let's get started the first thing we need to do is add a kinematic body 2d note for our player so let's go ahead and add that rename it to player and let's also go ahead and update the collision mask for this player from the last tutorial you should know this first one will represent player and we actually want the player to interact with the second one second one will be enemy the third one will be just objects so let's go ahead and update those project settings the first layer is player and let's make the third layer object which is basically everything else now let's go ahead and add a sprite node and for this sprite we're going to add the player sprite sheet which is located in your assets folder on your player go ahead and drag that over and as you can see all the sprites are listed here it is a little blurry so you know what to do turn off the filter and re-import and there we go go ahead and go to your right side under animations we need to specify how many frames there are and in this sprite sheet there should be 35. there we go let's go ahead and get rid of that warning sign and add a collision shape 2d and let's get rid of this warning sign and add a capsule shape 2d let's go to frame 8 just so it's easier to draw our collision shape go ahead and resize it as best you can i think that's pretty good for now the next thing we're going to add is our animation player the animation player is basically going to be the node that holds all our animations all our different states regarding animations so go ahead and go down here click new and the first animation we're going to do is attack there's going to be a lot of different animations let's go ahead and add each one next one is dash death or idle jump push and walk so for the attack animation we need to start our frame 30 so go ahead and make sure you're on frame 30 make sure the duration is 0.4 and the the increment should be actually 0.1 so go ahead and click this keyframe to save the keyframe into the timeline hit create go ahead and go to the next one and the next one should be frame 31. key and the next one is 32 key and 33 and that's our attack animation go ahead and click loop so we can just look at it clearly click play and that's what it looks like go ahead and hit stop and then turn off loop because for attack animation you don't need to loop it we just need to play it once so that's the first animation and we still need to go through and add all these other ones i'm going to show you a spreadsheet of what the animations are so this is what it looks like make sure you guys pause the video or screen capture this and go ahead and add all the animations yourself so i'm going to go ahead and add each animation but i'm not going to explain everything i think it's self-explanatory i'll go and try and do it really quick so i'll see you guys back when you guys are done so that looks good guys i just want to let you guys know that for the push one i decided to lower the duration to one i felt like it looked better after playing but it's up to you guys this is all subjective everyone does it differently and just based on feel so if it looks fine then go ahead and leave it if you want and mess around play with it that's also fine so that looks good let's go ahead and change it to attack let's also save the player scene go ahead and save it under under the player folder the next thing we need to do is let's go ahead and add an animation tree actually let's do that afterwards let's go ahead and add a new hitbox for our player so go look for area 2d actually first look for position 2d rename this to hitbox position add a child that's going to be an area 2d for this one let's call this hitbox to get rid of this error we need a collision shape go ahead and add a new capsule and for this capsule we're going to transform it 90 degrees let's make this capsule size 3 and 7.5 and let's change its position to 11.5 so it's out in front of the player adjust the hitbox position to 2.6 for the y that looks pretty good as you can see when the player attacks here's the hit box so if the enemy is within this area the programs that the function that we write would know to trigger an attack and kill the enemy and the reason why we need this hitbox position is because when the player moves left for example the hitbox needs to be on the left side so through code we're going to rotate this to the side and it's going to be rotating about the hitbox position point which is right here and not up here let's also change this collision shape let's change it to leave as player and interact with enemy go ahead and hit save the next thing we need to add is the animation tree the animation tree is basically a node that is used to help with state transitions so if you're going from idle to walk or while you're walking decide to attack the animation tree will help delegate and transition to all the other different states so for the tree root node we're going to make a node state machine which is basically the setting used to handle state transitions for animation player we're going to select our animation player active means basically start running this tree every time before we start the game we need to make sure this is on so that the game runs in under here you're going to see this box we need to add all our states here go ahead and right click it add animation and let's say let's do idle as the first one go ahead and click on idle this top left button here it says toggle basically toggle auto start click that and this will be the starting point so every time our game starts the starting state of our player will be idle okay let's just go ahead and click active so that the error disappears so let me go ahead and expand this so because it's going this area is going to get crazy as you can imagine this needs to hold all our states so let's go ahead add animation add attack let's move it up here add dash move it down here add the death state move over here ball jump walk and push so we have all our states and we're going to start at the item so go ahead and go to the top left corner this third icon here says connect the nodes and make sure your settings on immediate so this is saying basically if you're in this state can this state transition to this state and how fast should a transition in this case we want it to be immediately so go ahead and click and drag and connect to attack so we are saying that in the idle state we can transition to attack state can the idle go to walk yes i wouldn't connect it to push in my opinion in order to start pushing an object we should be in the walking phase so we would not transition idle to push but could you be standing there and fall i would say yes you can jump from the idle state you can dash and while in the idle state you can also die so let's go ahead and connect those similarly if you're in the attack phase can you go into idle phase i will say yes after you're done this is saying for an attack phase we can go into idle face but actually this is not the correct arrow because when i started learning godot there's a lot of issues when i added the attack animation and i noticed a lot of people run into this too and basically if you were probably doing this on your own you would run into the error where you click the button to attack but the attack animation wouldn't finish it seems like you're not attacking like it's a quick jitter and it's not all finished and basically what we want to do is we want to make sure the attack animation finishes first so go ahead go ahead and click on this click that click this and then click the delete button go ahead and click this again and we're going to change the type of arrow which is going to be at n and go ahead and drag it so basically we are saying that attack animation should go to idle after the attack animation has finished and go ahead and click this pointer arrow again click this and then on the right side it should be set at end so it happens at the end and it should automatically transition when the state is reached so click on and there we go and that looks correct so go ahead and go back to this go back to immediate and we'll also do the other states walk and go into idle death you can't return from death so nothing goes from death and then push i would say you can go into the idle state fall you can go idle from the jumps that you cannot go into idle state you have to fall first that wouldn't make sense dash can you go to idle state yes and for dash it should be this arrow we want to go at the end and the dash same thing with fall the dash transitioning to fall we want the dash to finish first and can you go um i think that's it for that and go ahead and click this similarly click that and click the check box also click this and click the check box so that looks good go ahead and update your arrow to immediate again from the dash we can go to death i think that's it for dash so then for jump we're going to go into the fall state and jump transition into the dash yes i would say you can jump in and quickly hit dash jump goes into fall [Music] and i think that's it can jump go to death yes everything can go to death though let's actually go ahead and connect that attack is done idle's done jump dash is done fall let's see so for the fall state we can go into dash and fall go into push i don't think so can push go into fall yeah i guess you can be pushing something and then fall down walk can you go into phosphate yes and can fall down to jump now for the walk state you'll be going transitioning to push fall can you be walking then jumping yeah i think that's possible can you be walking and then do dash yeah i think so and i believe that's it for the transition states so go ahead and drop this down go ahead and hit save i actually forgot to create a transition from walk to death so make sure you add that and also from push to jump so now we need to add a script to our player node now before we get coding let's go ahead and add the controls for our player first go ahead and do project project settings input map and we're going to add a new control we're going to add attack we're also going to add jump and dash so for attack we're gonna hit the plus sign get a key and let's just use a for attack it's up to you this is just my personal preference for jump we're going to use spacebar for dash we're going to use the key s so that looks good go ahead hit ok and then hit save so in order to x by the coding process i'm just going copy and paste my code so go ahead and definitely pause the video and type it out and then hit start when you're ready i think it's important to pay attention to what i have to say so it's better to make sure you have it all typed out and then hit play so then you can actually listen to the information i'm going to delete all this first the first thing we need to do is get our animation state machine so go ahead and create a variable and then we're going to get node animation tree and get the parameters playback and if you go to animation tree the right side here's the playback parameter and here's our note state machine which which has all our animations the next thing we need to do is add our player variables so we have gravity which you know from the last tutorial our jump speed or how strong or jump is walk speed for how fast we go dash speed for the dashing state and then number of dashes for this game i decided to make the player have only one dash so once he dashes he runs out the next parameters we need to add is velocity direction and these two are the new ones they just basically serves as a gateway for checking is the player attacking or is the player dashing now we need to add the player states so the variables stay here and here are the different states that our player can go in as you know from the animations that we added it's going to be idle walk fall jump attack and dash and when we start out let's just start the state in the states.idle state the next thing we need to add is the physics process like the enemy we add a mesh statement to transition from different states in order to transition using the animation tree we call this function travel and we go into the idle state for this case let's go ahead and add all the other states here for walk we're going to turn to transition to the walk state and the idle state is pretty easy to code there's not much to it because the players standing still you pretty much need to only check one thing which is is the player pressing the left or right key so if the player is pressing left or right you know the player wants to walk so we transition the player into the walk state and once we're in the walk state we're going to enter the walk animation and we need to grab a direction in order to calculate our velocity and we use this function get action strength basically the action strength is just used to return a number from 0 to 1 depending on the direction of your directional pad or joystick it can also be used for keyboards that's the same thing basically this is this is just saying it's either going return either a one for the player going to the right side or it's going to return zero for the right and a one for the left and in this case this minus sign is going to make this one a negative one zero minus one equals negative one so the player is moving to the left direction another thing we're going to add is this piece of code right here there are situations where maybe the player hit the left or right at the same time and this is used for to make sure that if you're going to hit left or right at the same time you're either going keep right so if you're going right and you decide to hit the left button you're going to keep right or if you're going left and you decide to hit the right button you're going to keep left it's not really necessary but it's just it just helps with you know user error stuff and the last thing we're going to need to do is calculate the velocities this should all be familiar from the last tutorial so the last episode so i won't go over it we are missing the update direction function so let's go ahead and add that and we are missing the set direction right and set direction left so the difference from the player set direction and the enemy set direction is that we have now a hitbox so in this case if you're going to the right the rotation we're not going to rotate it at all it's just going to stay normal so let me show that to you right here go and head to hitbox hitbox position transform so if it's zero it's on the right side in this case if it's 180 it's on the left side so that's all we're doing right here go ahead and reset that and the next thing we need to do is apply gravity which you already know how to do that from the last episode and we're going to just add a couple of functions that we're going to use in the future tutorial we're going to add attack finish and on dash finish we're going to add another function which is reset dash counter so when the player runs out dashes it's going to use this function to reset it and we're also going to write a function to check the number of dashes and in this game i decided to make it to where when the player lands then the dash counter resets go ahead and go to game let's instant a player let's hit play okay let's see okay yeah i thought this wouldn't work and it makes sense so let's go ahead and hit on ready and let's hit play and there we go only the left and right works let's go back to here let me explain this really quick from the last episode i gave you a little quiz on ready and just by looking at this originally it was just var and at first glance you guys should have questioned this because this should throw an arrow if you if you look at this it should it makes sense that it would throw an error because the way this works is when godot loads up and loads all the nodes into the scenes right the player node is going to load up with the script so this thing is going to load up and it's going to say this and it's going grab animation tree but animation tree is down here it has not loaded yet so that's why it throws an error saying no instance it could not find it because everything is not loaded yet we need to add this on ready it waits until all the nodes are loaded it's just as if we put this in the ready function so on ready waits until this is all the nodes are loaded and then it sets this so then that's why when we click play there's no more error and it works that's that's an error right there i'm not sure why he's running let me see we did not transition the walk state go ahead and add this at the end and this basically just says the direction is zero then let's transition to idle because if the direction is zero you know velocity zero you know nothing's moving so let's go ahead and hit play and there it transitions now so that looks good as you guys can see this is a lot of code and it is kind of hard to read you can barely see the idle code section here and then here's walk and we did not even add collisions yeah detecting collisions and we didn't add these states yet and we're already over 100 lines of code this can get pretty big and messy really quickly so let's go ahead and hold off from doing these states and in the next episode we're going to actually go over state machines and learn how to isolate these chunks of code into their own nodes so then it makes the code more maintainable and easier to read and also easier to debug because right now as you can imagine as we keep adding on to this it's going to get crazier and more confusing so i think it's best to use a state machine and isolate everything and encapsulate into its own node and so so each node handles one state and it makes it a lot easier to code your games and understand everything especially when you don't look at it for a while so i think that's all i had for this episode for the next one we'll be coding the state machine i'll see you guys next time

Channel: DCR

Views: 400

Keywords: Godot, godot game engine, puzzle platformer, platformer, game development, game developer, DCR, game development for beginners, game development godot, godot tutorials, godot platformer tutorial, godot tutorial for beginners, godot 2d tutorial, godot tutorial 2d platformer, godot platformer tutorial 2d, godot game engine tutorial, godot engine 2d tutorial, godot animationtree, godot animationplayer

Id: W4o3AWZQEYk

Length: 28min 17sec (1697 seconds)

Published: Sun Oct 31 2021