Visuals
Hit stop is just one piece of the puzzle, but you can't have a good car just by having a solid under the hood foundation. What the player's character is actually doing needs to look pretty too. This comes in many shapes and forms so this will be the longest section.Take Eternal Fighter Zero for example. The hit stop in this game for normals is universal at 10f, which feels like a pretty small amount, but it still has good feedback because it delivers greatly in the visuals and audio department, which we will get to in a bit.
The first thing you may notice are the hit sparks. You can see they get increasingly bigger when the strength of the attack increases from 2A to 5B to 5C. The heavy sparks even change their color from orange to blue and their particles linger and literally bounce on the floor. Additionally, the animations of the characters themselves feel very smooth and snappy. All of Doppel's normals flow into each other very smoothly. Attack animations are a bit too complex of a topic to cover here in full, but having good keyframes is really important to giving your buttons the impact they need.
Just through understanding of keyframes and where to place the in betweens, attack animations can look buttery smooth and punch-y regardless of what other fluff you put on top of it. The 90s era of fighting games excelled at this unlike any other. A good example here is Street Fighter Alpha 2. Attacks in that game (and the Alpha series in general) nowadays can be seen as choppy, given that often times they don't use many animation frames and sometimes just use keyframes only, yet you would be lying if you said hitting even the most basic combos was not incredibly satisfying.
This is a basic short short fireball combo, yet it feels great to land as the hit stop on each attack is perfectly tailored, each attack has great clarity and flow (the low short itself just has 2 unique frames and they are spaced right in terms of where the legs starts and ends), and the fireball at the end has the impact that a combo ender needs to really invoke that dopamine rush of finishing a cool combo. The fireball in particular is what ties this together as it not only has good hit stop, knocks down, and causes the opponent to be burned, but it also slows down the game for a brief period, adding onto the impact the move has. It's a very nice cherry on top. Would I do this for every single combo ender I design? Definitely not, but you can see how it is useful here in a game where meterless combos are not at all flashy.
As for the actual art of animating fighting game attacks, I already said it was too complex to cover in full here, but I do want to share some basic tips to make those attacks flow a lot better. There is this book my cousin (who was an animator) gave me years ago called Animation by Preston Blair, and it actually really helped me when I was animating Battle Dudes characters. The specific concept that helped me and the one I'm going to show here is called the Line of Action.
Though the book is primarily intended to be used to help draw and animate golden era MGM-style cartoons, a medium that generally lacks overlap with fighting games, you can still adapt and apply this concept to fighting game animations created by the greats, and ones created by the wannabe greats (like me!)
Here, I'm interpreting the Line of Action a little differently. Instead of drawing that line across the entire character as a whole, I'm drawing a line from where the attacking limb starts then what path it takes. Tons of talented animators do this when they are conceptualizing an attack animation, using various lines of action to ensure the attack animates smoothly. When an attack flows using these lines of action, the overall feedback of the buttons you press by extension feel better as well. As they say, "look good feel good play good." This is of course a simplified example of the concept, but I think it should help you understand what I mean by "attack flow" if you are unfamiliar with it.
Another important thing to note that you are probably aware of already is the actual length of this line of action. A quick jab might have a very small line of action, but a big roundhouse kick would probably have a much longer and more elaborate line of action. The impact of the attack is then compensated accordingly based on that. You don't want a really big line of action to just end up being a simple jab. You want to reserve those for bigger, harder hitting attacks. This is not always the case, but it is a general rule of thumb I recommend to follow.
Another reason why older games have such reverence in terms of their kinetic feedback is their keyframing. There's very little in betweens when it comes to the attack's motion. I borrow heavily from Capcom vs. SNK 2 in terms of my animation keyframing/posing, because I feel like it's perfect for what I want. We can look at how some of these attacks are keyframed and get a better understanding.
Your animation speeds tend to follow more closely in line with real physics. A wind-up into a punch is gonna start slow, then go really fast, then reach a stopping point, then slowly return back. In a lot of 2D games the wind-up it condensed into 1 or 2 sprites depending on the general speed of the buttons.
Kanae 5B for example has 4 unique frames. It is keyframed with 3, the extra frame is what I call the "snapback" frame, AKA the frame after the initial attack where the limb snaps back after extension. What is important to note about this animation and others like it is the "perceived motion." That first windup sprite lasts for about 6 frames, then immediately goes into the extended leg sprite. Your brain then fills in the gaps, and it makes the animation feel like it has a great deal of speed because of the space in between the leg winding up and actually extending being reached in a mere frame. Do keep in mind that this technique also takes into account that line of action mentioned earlier. There is a clean line that you can draw on the leg from the windup to the extension. If the leg were to start from, say, above rather than below, then the animation's perceived motion would be wonky because basic physics tell you that is not how one executes a thrust kick without some extra in between sprite to fill in the gaps for you to make it make sense. I like to study a lot of various resources to understand this attack logic from real life, since you're probably basing these attacks off of martial artists. Training videos from MMA fighters (Wonderboy Thompson in particular), martial arts movies, fencing/sword related media etc. are my go-tos.
Another example this time from my own work. K2's j.HP has 3 unique startup sprites, which seems like a lot for a right straight punch, but this is to account for the move itself being a heavy and needing extra startup. Notice though that I never use any of these startup frames to fill the gap between the wind up and the punch. Why? I don't need to. The human brain does this for me. Those 3 startup frames are spent actually getting to the wind up, rather than filling between the wind up and the punch, because I want that punch to have considerable impact, and adding an extra frame between the wind up and punch makes the brain think that punch is coming in slower than it should, slightly reducing the potential impact. This also saves you a lot of time when animating. Because you know that your attack will actually have more impact if you keyframe everything properly based on line of action, you can save a frame or two by cutting out the middle man from the wind up and the strike.
Games like Street Fighter Alpha are all about this concept. I will show you two variants I made of Blanka's cr.HP from SFA3.
Notice the difference? There's 1 extra unique frame of startup on the left. That I borrowed over from the recovery on the attack. The one on the right is what Capcom uses. That does not have that in between frame. While both look fine at a glance, I would choose the timing on the right because as mentioned earlier, the perceived motion makes you believe the attack on the right is hitting harder than the one on the left. Each has their time and place of course, but in general this is the strategy I employ.
If you still are unsure about the space being perceived is too big for comfort, you can just add smear frames. Granted, you will need to be careful with those as not every attack needs a smear frame. Just attacks that have a large space between the frame before the attack and the frame of the attack. Particularly useful for sword attacks as they give more of a "cutting" feel. I will cover animation techniques in a different document.
