Godot Tutorial 2D || Tournament Fighter || Better Combo Input System || Godot 3.X

hello everybody my name is kellen from kindersword productions and in the past few weeks i've been amazed at how much support i have gotten from my video on the tournament fighter indigo engine a lot of you told me that this was a topic that wasn't really treated as much as hoped for and that you really wanted a series to follow so for this amazing morale boost i've decided to make another video on this topic but now with a more deeper dive into applying a better combo system to your game and also making the written code more generic meaning that there are less scripts needed for the whole game i also know that people really wanted to see me do the ai as well and to them i would like to say hang on tight since a follow-up video will be made and uploaded soon but first i want to set everyone onto the right track in a clear and easy to follow explanation since there have been some major changes since the last video if you are having trouble following this tutorial i also have this project posted on my github page so that you can download it from there and follow along at your own pace i also have my sources in the description as well if you want a better explanation on the topics inside of this video alrighty let's get started we first need to address the new setup for this tutorial since a lot of the comments were having some great suggestions and optimizations that we can use if you followed my previous tutorial on this topic you might see the biggest difference on ryu's scene tree this being the disappearance of multiple colliders that we placed on each body part and also the loss of signals and groups for the hit detection we now only use one area to denote and also one collision shape to denote this one is called hit collider the body still uses one collision shape unlike the animated sprite to d which has changed for a regular sprite to denote we also need to add two more notes that will be very important for this video we'll use an animation player note to create our animations but also to transform the position of our colliders and also their moment of activation and deactivation this wasn't really possible using the animated sprite 2d we also use an animation tree node this will give us the ability to go through our animations based on conditions that are met and letting the states reset themselves more explanation on this note later if you haven't seen the previous video i'll show you that under the debug tab you can turn on visible collision shapes this is really handy if you want to know if your colliders are working as well if you go to the project settings and go to the input map you'll see that i've added some new inputs these are the ones we'll need to make our combos work i gave them simple names like up down left and right and gave every axis the standard wasd keys to use as input i also changed ui punch into the regular word punch and gave it the l to use as input now let's go by every node and their settings the kinematic body 2d note aka the base of the character scene doesn't contain any weird settings this also counts for the area to denote the hit collider has been given a rectangular shape and disabled is turned on turning the box grey inside of the scene view the body collider has also been given a rectangular shape and also got a different size this size can be set by clicking on the rectangle shape box and setting the extends to something more fitting for your character this pride note received as texture a sprite sheet made up of the moves we are going to use today to set up a sprite sheet within godot to perfectly get one sprite on screen and not a weird part of another sprite use the age frames and v frames inside of the animation tab before we go on you might have noticed that your sprites look kind of blurry or unsharp here's a way to fix that go to your sprite or sprite sheet image in your project folder hit the import tab and turn the filter off if it's still blurry go to compress and under mode click lossless now the animation player node to make sure everything goes well i'll give a quick explanation on how the interface works if you already know this please skip to the time shown on screen if you want to make a new animation click on animation and click new if you head towards the sprite note you can see small keys appear if you click on a key you are setting a keyframe for the animation meaning that the animation player has saved that as a setting to play at that part of the animation in the bottom right you can turn the animation time from based on seconds to based on frames if you want to make an animation loop you will have to click on the small logo at the top right to set the duration of the animation click next to the looping logo and fill in a time or amount of frames keep in mind that the last frame isn't played if the animation needs to loop therefore you also need to create some space between the last frame and the actual end here comes the last important part since we are working in a 2d environment and don't use momentum but more snappy movement we want our collision boxes to move directly to a new position after each frame let's head to e honda and fix one of his animations the hundred hand slap is a very good example because the hitbox needs to change from position real quickly we can write some amazingly complicated code to fix this or we can just let the animation player do our homework and set the update mode from continuous to discrete meaning that each frame is a sort of instant update of the collider position this is otherwise a update calculation to smoothly move or grow to the next frame as you can see the animation player in godot will really help you get rid of some unwanted code so make good use of it we can also get the body collider and also change its position size or activation time if we want do this to the rest of your animations as well and tweak as much as you want lastly the animation tree node like i said earlier this node will help us transition between different states to set up the animation tree you will need to do the following click on the box of tree root click new animation node state machine and inside the anom player click the animation player that is going to be connected to this tree if you see two errors at the bottom don't panic as it's just a warning telling you that you'll need to activate this tree so that you can use it click on active and you're set keep in mind that when this is on you can't use the animation player to tweak some settings or animations you must turn the active option off beforehand if everything went correctly you can now start with your state machine if you right click somewhere in this field you will see a small menu pop up giving you some options we want to add an animation in here so let's follow that as you can see the tree takes the animations that are made and stored within the animation player and when we click the idle and animation it will be put inside of this field do this for all of your animations and make sure that they are placed in such a way that you can easily follow what's going on when this is done you can start with the last part of this whole setup phase you now need to make proper transitions between the states of your character meaning that when you start with idle what's the most logical possible animation from there to make transitions in the animation tree you will need to click on a small arrow image when this is selected you can make the transitions between animation a to animation b and also back here's my setup next we want each transition to follow some rules so that our states got the time to fully show themselves without being cut off first we give our animation tree a point to start from since idle is the state that our character will always return back to we will click that state and then click the small label which has the letter a in it if done correctly it will show start above the state next we want to click on the transition lines that go back to idle and tell them that they first need to finish their animation before they can auto advance to the next state after a short while your animation state machine should look something like this now that we are done with the setup we will head for the coding section during the weeks of brainstorming i came up with a solution for making our code more generic and also very easy to update you see in a tournament fighter there are only two players on screen at once but before that we might have quite a big roster filled with different characters like in street fighter 2. what you want to prevent is the use of way too many scripts that can make searching for a specific issue a long task so why not look for a simple type of system that cannot only store multiple values but also return values back if we have failed in the right combo or use the character that is privileged to access these moves let me present you the dictionary typing kudo this handy type will help us reach that goal without any problems it uses a system where you need a specific key to open a door to that value you want this is exactly what we are looking for we can use the name of the current selected character to access a specific moveset that only accepts the correct made combos at the end of this we have only used two scripts in total so let's go first we need a moveset manager script we then turn this into a singleton this is done by going to the project settings and move to autoload in here we need to search for our newly made script and add it to the list make sure that the singleton option is set to true the second script needed is of course the player movement script where we will send the name of our character and also send the combo made using an array as a key value for the dictionary when the dictionary receives our key it will return to us a string that is going to be the name of our animation that needs to be played go inside the manager where we will make a new dictionary variable called name dictionary like i said this will receive our character names as a key so that it can reach our character-specific dictionaries as an example we have the name ryu and he will only get access to the dictionary named ryo moves notice that the moves are stored above the name dictionary not really sure why but the reason of this might have something to do with the way the compiler works within godot for now we will use a simple one as a key inside of ryu moves and as a return value we'll pass it a string called goodbye moon if you want to add another key and value to the dictionary you will need to add a comma after the last value let's give the next one the value 2 and pass it a string value hello world since the moveset manager is a singleton we don't have to announce its presence within the tree nor inside the script we can immediately access its contents so inside the ready function of the player movement script write the following line to see if the connections are made correctly print moveset manager dot name dictionary and as key we give it the player's name so name and next to that we will place two more brackets where we will use one of the key values set inside of rio moves dictionary let's press play and if we look in the output we will see that the correct value has been printed we would also like a general dictionary which will store all of the shared moves by the characters for example punch and kick or both idol states this will save up on a lot of writing now we are ready to finish this inside the player movement script we will add the following variables two floats called time till next input holding a value of 0.2 and a float cup time receiving the value stored within time till next input two booleans named was input made and is crouching both of them start at false we also need one array variable named use keys one reference to the animation tree and lastly two variables to store the paths needed to not only access the moveset manager but also to make things more readable one is going to be called general moveset anoms and the other is going to be called specific moveset anoms next we want to make a new set of functions these are function input event function process delta and function send combo attempt within its parameters var attempt this will be an array that receives the used keys as an attempt inside the input event function we will first let the system know that if there was a key pressed we want to only register it once we then want to make a temp variable that will store this input as a string after that we go through another if that will check if our input made was actually something that we can use if all went well we can set was input made to be true our time will have the same value as time till next input and lastly our temp character will be stored inside our used keys now we are at process delta we first want to check if an input has been made if that is the case we want our time to be subtracted every frame by delta if our time has become less than zero and our used keys does have a value we want our attempt at a combo to be sent to send combo attempt function after that we want was input made to be set to false the time to be the same as time till next input the used keys to be cleared of any value and lastly every turn the last thing we need inside this function is a simple input detection to see if we are using the down key or not if we do we want the animation tree to travel to the general dictionary and get the crouched idle animation and also set is crouching to be true if we aren't crouching we want our normal idle to be shown and also our crouching to be false in both cases we again need the return the final function will try to decode the given attempt array and turn it into a readable string for the animation tree to read from but before we get there we must make a distinction between a general move and a specific move so we will make a simple if statement that asks if the attempt size is the same as 1 and if it is it isn't allowed to be an s since that is used by the crouching input if that went well the player will be checked if he or she is crouching if it's true a crouched punch will be played if not a standing straight punch will be shown the attempt will be treated differently if it is longer than one in that case we first check if the value given inside attempt even exists inside of the specific moveset annum and after that we will travel towards the correct animation well that was one brainstorm to figure out but at the end you will have quite a decent combo maker and also decoder on your side there are still a few bugs with this though the first if you crouch and throw a punch it will be seen as a combo and it will not be performed a solution could be to store that as a specific combo as well inside every character second bug because we work with a timer that needs to register another input within a set value you will have some input lag for this i don't really have a good idea on how to tackle this lastly for some inputs you can't be delicate for the combo this might be fine for some but if you don't i sadly don't really know how to fix that bug as well as it could be stemming from the second bug but to see if all is working let's set all of our dictionary combos ready and play the game to also show you that we can use a different character i'll place the player movement script onto e honda and as you can see he is performing his own set of combos like i said in the last video please post a comment if you got a solution for some of the bugs or if you yourself are having problems it would really help out the godot community anyway my name is kellen from kindestor productions and i'll see you next time bye

Channel: KindoSaur Productions

Views: 1,191

Keywords: 2D, Godot, Godot Engine, Tutorial, Godot Tutorial, Fighter, 2D Fighter, 2D Tournament Fighter, Arcade, Arcade Tutorial, Developer, GDScript, Godot Script, Combo, Combo System

Id: 13WX1wXQXVY

Length: 17min 56sec (1076 seconds)

Published: Thu Oct 28 2021

Reddit Comments

[u/Bangted]

Hadve't really worked with the animation tree that much. Didn't know it was that powerful of a node!

Great tutorial. Learned a lot that may be used for further projects :) Thanks!