Frame Data in Fighting Games
Tags: gaming
Published: 2019-09-30 14:54:23

I wanted to bridge the ground between software engineering and design/ animation, so I figured I would cover what it means to balance those two in a video game, specifically fighting games.  First, we should quickly go over some common elements if you've never played a fighting game before.  First you have offense, this is how your players dish damage, are they quick and agile? Slow, heavy- hitter? Somewhere in-between?  Then obviously you need defense, it is usually universal to simply hold opposite direction of opponent in order to block an incoming attack.  Every character should be able to block the majority of damage from Low, Mid, and High attacks using the proper stances, crouch block covers lows and mids, but is vulnerable to high attacks, while standing block does the same for mids and highs, but is vulnerable to lows.  Almost every fighting games is created with a Rock-Paper-Scissors mentality.  This means block beats attack, grab beats block, and attack beats grab.

The first question I will pose to you is what is a frame?  A single frame refers to the stand still picture that makes up a moving image (aka how videos are captured).  This goes hand-in-hand with frame-rate, which refers to how many frames are recorded per second (or FPS).  A higher FPS usually means for a smoother recording, unless animated to specifically look otherwise, or it was just poorly done.  It ties in directly with a displays refresh rate, if the refresh-rate isn't fast enough to display as many frames as a video is rendered in, then it will default to its highest.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hyv1h81racu16orm38j1.gif)

How does this convey to fighting games?  Well, character animations are made up of sprites, which refer to the still frames that make up an animation.  Each character has their own unique sprite pages that make up the frames for walking, jumping, punching, crouching, just about every animation that a character will make.  More frames = smoother animation.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lyd4p4jsskyzw90g4tqa.png)

Bring it all together by setting the images to display at a certain fps (in this case 60fps) and you have yourself an animation!

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/w3mfs25wptzhme7toh13.gif)

Notice how most animations come back to the same pose, this is the neutral pose, or when the player makes no input this is the default (or idle) position which will look something like this.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xpkl0r0hevwga7ugapyr.gif)

So how does all of this affect gameplay?  Well, all of the frames that make up an animation can be broken into parts, this is easiest to see when looking at an attacking animation.  

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/huupy1c9nosr49nu9t7y.png)

Startup frames are the amount of frames it takes for attack to start.  This happens the moment a player makes an input.  Active frames are how many frames the attack can do damage for, meaning this is the core of the attack.  Recovery frames are the amount of frames it takes for players to put in another input after starting a move.  This mechanic is made to give your opponent a chance for a counter-attack if a move misses.  Finally, hit-stun refers to the amount of frames a struck opponent is vulnerable for, which can set up for combos, leading to more damage dealt.

Different attacks and characters have different frame data.  Light attacks have a quick start-up with low dmg, but short reach with less recovery frames.  This makes these attacks pretty low-risk low-reward and serve as a way for players to safely condition an opponents in a match.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pnsk0qlyj107ukr0nfp9.gif)
Heavy attacks have a slow start-up with high dmg, but have longer reach and more recovery frames.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sd5qas2gvf0qmexp6yxa.gif)

Then you have interesting mechanics that vary from game to game, but in this case I will be focusing primarily on Street Fighter 3: 3rd Strike.  A player can do special Moves by making an specific input fast enough that will result in a character’s signature move.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a3ni93oax437c0elycpl.gif)
Players can also link a confirmed hit into another attack before active frames are over, resulting in a combo.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nt9i9gvh52y6aa9zv4hy.gif)
Finally, you have the parry, a defensive move that required player to input direction toward their opponent to block 100% dmg and give them a few frames of advantage, meaning they will be able to make an input slightly faster than before.  Players have a 6 frame window in order to preform a parry, which is 1/10th of a second.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/awepkgeuvhmx9qdktspt.gif)

Put it all together and:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4thfxzseqqv701uv9imp.gif)
you'll find you have gameplay that focuses on prediction and reading your opponent, rather than guessing and spamming out as many moves as you can.  You will want to focus on giving players a chance to make a come-back, and never fully taking away control.  The goal is to make it fun to pick up and play, but hard to master.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/chpgqucqri7sfykuso0s.gif)