Animating for Fighting Games Part 2
Animating for fighting games encompasses a lot but in my experience when it comes to attacks it boils down to two things. Did I give the player a tool that feels good to use and still looks cool?
A lot of the time animating a fighting game attack, specifically a normal (i.e. light punch, hard punch, heavy slash, jab, tilts, smash attacks, aerials, etc.) I have to sell anticipation within 100ms sometimes I get a bit more time than that and sometimes I get a bit less but that’s my personal preference to ballpark when I’m playing with a concept for a move. Now 100ms is at 60fps is 6 frames and knowing how to spend those frames is crucial to creating a cohesive & expressive final product.
Just so I can show you exactly what I mean let’s take a simple punch animation and just adjust the anticipation so you can get a feel for exactly what I’m talking about.
For this first one let’s do what I call “the lazy approach“ where frame 1 will be our character’s idle and frame 6 will be the full anticipation key, they will be full keyframes with every controller keyed. We will also use platform or “flat“ tangents on both keys, even though a spline would suit nearly every key better, to accentuate that feeling of doing this exercise with no prior knowledge and remembering “oh ease in ease out is always good right?“.
[INSERT PUNCH WITH TWO KEYS IDLE ON 1 AND ANTIC ON FRAME 6]
Now we’ll go ahead and look to key into making the movement a bit more responsive to the player by delivering instantaneous feedback of the input through pose contrast (i.e. frame 1 will not be the idle pose) and we’ll use some spline tangents instead of flat ones:
[INSERT PUNCH ANIM WITH FRAME 1 AS SMOOTH DELIBERATE KEY AND 6 AS ANTIC MAKE SURE TO SPLINE ALL KEYS, EXCEPT MAYBE FEET]
For this next adjustment we’ll take it a step further and push frame 1 closer to the anticipation key on frame 6 and actually move that key back a frame to frame 5. On frame 6 we’ll whip up a key to push the core of the character into the punch with translation forward and twisting into it while the upper chest, shoulder & arm drag behind in space. This new frame will enhance the illusion of weight behind the attack and contribute to an overall more fluid movement.
[INSERT PUNCH ANIM WITH PUSHED FRAME 1, ANTIC ON 5 & A DELIBERATE INBETWEEN ON FRAME 6]
Once you have a firm understanding of how timing works and more importantly how it feels on the player end of gameplay animation you can start to play around with how your anticipation can be used to add a sense of style and personality to a character’s actions without even having to adjust any other part of the animation. Let’s do a few examples:
1) Here we used a few compact anticipation keys & two low to the ground inbetweens to make the character feel more like a quick, practiced boxer.
[INSERT PUNCH W/ANTIC STYLIZED TO BE A BOXER]
2) We can take a totally different approach to make the character and the punch feel more like a martial arts move if we swirl the arms a bit & add a sense of fluid motion through the whole body.
[INSERT PUNCH W/ANTIC STYLIZED TO BE A MARTIAL ARTIST]
3) Now let’s make him a bit of a bruiser that’s more focused on strength than technique.
[INSERT PUNCH W/ANTIC STYLIZED TO BE A BRUISER]
Now all these concepts & adjustments would produce an even better product if you went through the whole animations and tweaked every key to fit the character & style you were going for. That said I thought it would be easier to showcase just how much influence you have on the perception of an action with the anticipation alone if I held the rest of the animation exactly the same.
