How To Make a 2D Platformer with AnimationTree in Godot

nah don't do this never use the animation player alone if you want to animate your magnum opus of a platformer you should separate the animations from your code by using godot's built-in tools a lot of beginners seem to spend too much time with managing their animations until they discover the alternatives there's a thing called animation tree so let's get started i prepared the average platformer setup using the assets of the godot demo project there's the stock kinematic body 2d where i did not touch any properties a sprite sheet that feeds its frames into the animation player and has a lot of animations for us to use then there's a raycast that is enabled and casts to y20 for ground detection and the animation tree that i'll show in a moment but first we'll look at the code i began the creation of the script by implementing movement jumping and then separately the animation tree over here i get the player's input and based on that i flip the sprite's orientation i use linear interpolation to alternate between the direction input and a zero origin this will allow smooth transitioning from walking to standing idle finally move and slide transforms the body with it for the jumping mechanics we have to look at two cases we are on the floor and initiate a jump or we are moving over a ledge and allow a forgiveness jump to happen to me the easiest approach is a time-based one when i'm in the air i start incrementing timers depending on how i lost contact with the floor determines which timer matters so if i press the jump button i will cancel out the forgiveness timer to disallow it with that i can verify if the time for any jump or holding down space has elapsed if not i get launched into the air once with full force then if i hold space i incrementally rise until the maximum jump time is reached the gravity will take care of the rest and back on the ground the cycle restarts to see what the animation tree does i'm going to create a new one select animation 3 and on the right side you can see the tree root in the inspector select the new animation note blend tree not the state machine i'll explain why later on assign the animation player and make sure that the animation tree is always set on active inside the animation tree window i will create a new animation node then i will select the idle animation connect it to the output and as you can see it applies it as a live preview to our character i also want to run on the ground so i add another animation which is the run animation and to transition between two animations we need the transition node so let's create it inside the inspector create two new inputs for the zeroth input let's call it idle for the first input we'll call it run now connect the inputs and as you can see our character will start running with the flip of a switch i can switch between those two states i will name this one movement and drag it over here now if we follow the platform we need another animation which will be the falling animation for this we need another transition node so let's create one inside the inspector we create two new inputs called the zeroth one ground and the first one air connect the inputs and then again we can switch the animations name this one in air state and since we want to jump we'll add the jumping animation for that we need another transition node create two new inputs zeroth one is falling and the first one is jumping connect the outputs and name it in air if we now play with the states we can see that we can jump to make the running more interesting i want to show you how you can add a time scale node and this time scale node will take the run animation and based on the slider value it will play it faster or slower let's call it movement time you might ask yourself why i use three transition notes if i could have just used one with six inputs and then plug in the animations directly the reason is separation of concerns over here we have the movement branch over here the in-air branch and together the inner state so if i want to add swimming to ground air climbing or being inside a vehicle then i would have to add 20 more animations or something to the transition node this would get pretty ugly also the inner state has a higher priority because it's closer to the output than all the other transitions let's implement it in code in here let's make sure that the animation tree is always active this will happen once in the ready function animation three dot active equals true now let's open the animation tree so we have it as a reference and scroll down to the inner states which will be here so if we press the jump button if we hold it down then we are jumping if we don't hold it down we are falling if you click on the animation tree you will see every parameter here to the right which you can apply if you hover over it you get the correct path to the property that we need at this position so let's enter it animation tree dot set string value parameters in underscore pair current and here comes the part that you could handle with numbered enums but i will just write down the numbers this will be one if we are jumping we take the not the zeroth animation but the first so we have to enter a one here and if we release the space button we should fall this action just released and then the ui select i didn't create a special action for that to make it easier animation tree dot set we can copy the path input it and change it to zero now if we release it we go into the falling animation let's scroll down to the is on floor if we're on the floor we do everything that happens inside the movement transition because we are on the ground so animation three dot set you get the reference to the path which is parameters movement current movement current okay this one gets a little trickier so since our direction is a vector we can just do direction dot length we get the length of the vector so if it's bigger than 50 it will return true and if it's smaller than 50 return false this is important because true becomes a one he's running and false becomes a zero it's idle he's idle so int zepha casts that condition that boolean into an integer i can have true and false this is usually a bad practice to do it like that but i have my reasons right now alright so believe it or not we are almost done animation tree dot set this one will be the movement time parameters movement time scale now it gets a bit trickier as well we get the horizontal movement value so how fast we're moving either the 0 or something like 750 we want the absolute value of that because it can be negative if we go to the left and for my setup i bring it down to the 0 1 10 scale by dividing by 100 and i offset it by 1 plus because if it's zero the animation would hold but i always want to let the animation play so it has to be offset by a one okay so the last transition we are going to look at is the inner state which is ground in air so type animation tree dot set parameters oops in air state current now here comes something i introduced in the beginning i'm using a raycast to detect the ground because if i would use the is on floor it would flip-flop between true and false because it is highly precise but i need a little bit more space to transition the animation correctly so brake casts 2d if it's colliding if it's colliding we are on the floor so this will return true and as we learn true will be one so he would be in the air invert that by negating that statement and then as on the top cast it to an int and the boolean true will become a one so yeah that's it oh oh so here we are now we are idle now we run and we get faster over time now let's do a forgiveness jump and a regular jump now with variable jump height that's it when you really dislike this approach i still want to show you something useful for the animation player at least in the code of most people they use this pattern to wait for an animation to finish this is fine but you have to organize your code around that after some time it leads to a massive switch case or a lot of if statements as the project grows this would be an easier approach where you wait for the animation finished signal to emit then it will execute the next line as a disclaimer i'm not sure if this stops all processing from happening in that script but make sure to consider that it is always your choice what you use now that you've seen this why would i use a blend tree instead of a state machine for 2d animation after some time the state machine becomes really unreadable as the project grows a lot of connections appear and you don't know where to start reading you can't debug it as easily while it has to reflect your code or it won't run hard coupling actual gameplay state to animation code is not good if you need it regardless you can always add a state machine inside a blend tree and vice versa to close this off i want to show you the notes you can use in this different project so there's the blend space 1d if you open the editor for it you can define these points where an animation will be played and the value between it will determine how much of this animation is influenced by this animation right the other blend spaces the blend space 2d functions the same way and the blend 2 and plan 3 are just the same thing but with two inputs and here comes the most important note the one shot note if i activate the reloading animation in this branch and i click it he will execute the animation no matter what and to till the end you might ask yourself if we don't use animation finished then how exactly do we get code to run after the animation is actually done and overall the cleanest way to do this is to actually go into the animation player pick the animation you want to edit and then you want to add a new call method track pick the note where the script is attached and then you can call a method from that script in the end of the animation i call the on gun reloaded method with that i have a properly named function for the code that can be reused anywhere you might argue well i can do the same in the animation finished then i would say can you do this i don't think you can i hope you learned something and had a fun time watching this please bear in mind that this is a simple platformer to get you going and show you the animation tree most tutorials you find out there go way deeper into the details of the gameplay mechanics so don't miss out on them

Channel: NovemberDev

Views: 17,019

Keywords: Godot, GameDev, 2D Platformer

Id: OUvpe9FMkLI

Length: 15min 19sec (919 seconds)

Published: Mon Sep 21 2020