Sidescroller Combat
Summary
Trying out combat in a sidescrolling game.
Project Goals:
Project Goals:
- Extreme fluidity
- Practice cloth and hair animation
- Contextual animations (characters should react to each other's actions)
- Unique characterization (characters should have their unique personalities)
Video
Player Locomotion
Overall, getting the player animations to be fluid was not difficult. I already had a lot of practice from my Catbot locomotion project, so it was mostly just applying the same knowledge. The difference now is the addition of cape/hair.
The state machine here is the player character's locomotion state machine. It is similar in setup to the Catbot, but simpler. I used montages to handle turns, one for stationary turn, one for running turn, and one for stationary to run while turning.
The state machine here is the player character's locomotion state machine. It is similar in setup to the Catbot, but simpler. I used montages to handle turns, one for stationary turn, one for running turn, and one for stationary to run while turning.
Player locomotion state machine. There are no blendspaces; each state is a single sequence.
I included an animation for short taps so it doesn't look bad when you tap the movement button quickly. This is a common technique.
There are about 18 animations for the SwordBunny. The most obvious missing assets are pings for getting hit from behind, but I got lazy on them.
Player Combat
Since one of the goals was fluidity, I wanted the attacks to feel like one continuous sweep. One of the ways I approached it was to make sure the sword and the cape both maintained their momentum from one attack to the next if the attack button was repeatedly pressed. For example, in the 2nd attack, instead of doing a normal left>right slash attack by reversing the direction the of the sword, I directed the sword up and back around to reverse the direction of the slash while maintaining the momentum, which makes it look continuous.
Notice the cape's shape and movement is maintained from the end of the 1st attack into the start of the 2nd attack. This helps to maintain the flow of the animation. When creating overlaps, I always consider what other animations an animation is able to blend to to maintain the fluidity.
Likewise for the sword, the momentum is carried from one attack to the next. This loses the initial weight a little if you pause between the 1st and 2nd attack since the 2nd attack begins immediately, but I decided it was OK. If I really wanted to, I could make different variations depending on if you continue attacks immediately or not, but I'm too lazy for that.
I also wanted to show her personality through her poses. While her combat is very graceful and nimble, when her hit reactions are very clumsy and silly. Her overacted hit reactions demonstrate her youth as well as inexperience. The combat posing also helps to reinforce her youth - she is throwing her entire body into her attacks even though it is a dangerous way to fight - like a reckless teenager who thinks they are invincible. Some of the poses were also made to show hints of femininity, such as the coy sitting posture in the second attack.
|
|
Her poses range from graceful to silly, but still trying to be consistently youthful and cute.
I take a lot of inspiration from animals - such as the way she shakes herself off here after getting up.
Heavy Knight
In contrast to the young Swordbunny, the Heavy Knight is much more stoic and disciplined. His poses and movement are elegant and precise, showing his skill. His idle pose is very elegant, upright, and light, which implies a nobility and mastery. His arm is gently outstretched, showing that he is calm but ready to receive an attack, again hinting at his skill and experience. At least that's the hope.
His lightly balanced idle pose is reminiscent of a dancer. His poses are much more elegant and balanced than the Swordbunny.
His high skill also comes with high pride. While normally his movements are controlled, when he is humiliated such as by getting hit repeatedly, his injured pride can transform to anger. This wild attack is an outburst of his anger before he regains his composure.
I usually prefer to make my characters lighthearted and not so serious. I thought it would be fun to have a smugness to him occasionally.
AI animation blends
I think most people are going to be a little disappointed by the Heavy Knight's normal locomotion state machine.
It's very sparse because I̶ ̶w̶a̶s̶ ̶l̶a̶z̶y̶ and also the Knight spends most of his time in the walk state by design, so I didn't really feel a need to make specific transitions from idle>walk>idle. As far as blending in and out of montages go, it's the standard method of just making sure the beginning and end poses are similar enough to whatever pose they transition from (which is mostly the idle pose) and letting the engine's interpolation handle the rest. Since the Knight has no extra stuff like cloth, there's no special challenges for him.
This is the end of the single swipe attack. The pose is the same as the idle pose, so it blends with no problem.
The alternate state is a little more interesting. There are 6 different idles. By design, the Knight only changes his idle stance when turning (and attacking, if I had gotten that far), so the different idles don't actually need to transition to each other, making the state machine pretty simple. Each time a montage plays, the state machine is reset by default. When it enters again, it determines the new idle to play by random number (see the 2nd image below) and is then locked into that idle stance until the next time the Knight turns.
I wish UE4 allowed conduits as entry points for a state machine...
This is the logic for selecting a new idle stance. Basically, a new integer is selected from 0-5, and then checked against an array that stores the last 3 stances used to see if it has already been used recently. This guarantees visual variety by making sure the same stance is not used repeatedly.
There are 6 idles, so there are 36 turns since each idle has to be able to switch to another. I do not recommend this method for sanity reasons.
Heavy Knight Sword Throw
I've gotten a lot of questions about the Heavy Knight's sword throw attack, so I'll give a more in depth breakdown.
The sword throw is really a three part attack, so it made sense to also divide the animations and logic into three parts - the throw, the charge, and the slam. Separating it into three sections made it easy to provide the unique behavior needed for each section.
The throw
The first section is the throw. He throws out his sword which embeds into the wall. The way I did this was by hiding the sword mesh on the character when he throws the sword through a notify, and then spawn a projectile with the spinning sword mesh. This projectile will stop on contact with the wall, hitting the player along the way if the player doesn't dodge.
The first section is the throw. He throws out his sword which embeds into the wall. The way I did this was by hiding the sword mesh on the character when he throws the sword through a notify, and then spawn a projectile with the spinning sword mesh. This projectile will stop on contact with the wall, hitting the player along the way if the player doesn't dodge.
At the end of the throw, the Knight will wait in the end pose. The left arm mesh is then hidden, and 5 projectiles are fired that each are a separate piece of the arm. These arm projectiles will also stop at the wall, and when all 5 hit the wall, they send a message for the Knight to charge. This way, the duration between the arms hitting the wall and the Knight charging is consistent no matter how far the Knight is from the wall.
This is the end pose that the Knight waits in while the arms are fired at the wall. It is a looping section in the sword throw montage.
5 arm projectile blueprints, separated for clarity. Each of these are spawned individually and fired. The box collision is used to determine collision with the wall, and the circular collision is the collision with the Player.
The charge
The second section is the charge, which is the most straightforward section. The Knight simply transitions from the above held pose into the charge loop and activates charge hitboxes. If he hits the player, the player is knocked up. Once the Knight hits the wall, he transitions instantly to the last section.
The second section is the charge, which is the most straightforward section. The Knight simply transitions from the above held pose into the charge loop and activates charge hitboxes. If he hits the player, the player is knocked up. Once the Knight hits the wall, he transitions instantly to the last section.
The charge is a looping section of the montage. Charge speed is handled by root motion and took several tries to get it right.
The slam
The final section is triggered when the Knight slams into the wall. This is also very straightforward - if uninterrupted, the Knight simply completes his animation, which is pulling out the sword and attacking.
The final section is triggered when the Knight slams into the wall. This is also very straightforward - if uninterrupted, the Knight simply completes his animation, which is pulling out the sword and attacking.
The hit reaction for the when the Knight's sword is stuck in the wall is actually just 3 separate animations, each one that is triggered if attacked within a certain time.
The first two hit reactions continue the original slash, but the third will cause him to get angry and wildly strike back.
Contextual Animation
As stated in the summary at the top, one of the goals for this project was contextual animation. I wanted both the player and the AI to have some degree of reacting to each other automatically to make them seem like they are aware of each other in game.
This was fun because I was only limited by my willingness to make new animations. I won't go over the implementation in much detail because each contextual animation was a unique instance, but here are some examples of what I did to make the characters feel aware of the world.
This was fun because I was only limited by my willingness to make new animations. I won't go over the implementation in much detail because each contextual animation was a unique instance, but here are some examples of what I did to make the characters feel aware of the world.
The Knight has a 3 hit combo that changes direction on each attack depending on which side the player happens to be on. This helps him feel intelligent and like he's reacting to what the player is doing.
The first attack in the 3 hit combo has a unique interaction if he hits you while turning around. I added this because it's a very unexpected attack, so I thought it would be fun to have the Knight taunt you. It's also a small consolation prize if you get hit, because you have time to run in and hit him while he's taunting you.
Another example (and the first one I made) was the contextual dodge - the player character will perform different dodges depending on the AI's attacks. This is determined by the AI giving a "warning" before each attack that tells the player character which dodge to perform. But gameplay-wise all the dodges are the same.
In the same way, each attack also plays different hit reactions for the player.
In the same way, each attack also plays different hit reactions for the player.