Unpacking Fire Emblem's animations

When Fire Emblem first went international in 2003, its battle animations were the face of the game. The opening chapter fudged its numbers to stage a critical hit for the player, sending them into the intermission thinking about afterimages, impacts, and the dust Lyn kicked up as she slid into place. The E3 2003 reveal trailer highlighted that same sequence, alongside heavy cuts from the 40-odd classes like the Sniper, General, and Mage. Nintendo Power magazine quickly latched on to the battle screen to communicate the RPG's appeal in its Epic Center column and strategy coverage, calling out its "sparse but beautiful" and "heroic" animations in #174's review. The first TV spots ended on the Pegasus Knight and Sage, their effects fitting cleanly into ad break's limited format.

To gamers of a certain age, this is Fire Emblem—the sheets on FEPlanet and The Spriters Resource, the GIFs in forum signatures, and the chunky figures popping up in sprite comics. A game about backflipping Heroes, teleporting Assassins, and Wyvern Rider acrobatics. This iconography outgrew itself, mesmerizing players and going beyond the boundaries of the Game Boy Advance screen to overtake the internet as the franchise's popular image.

And from the moment the game was in their hands, fans were asking "How do I make that?"

This loop contains 24 unique frames of animation, displayed in-game for ~60 frames; like other forms of limited animation, Fire Emblem does not display a new pose every time the screen refreshes. Instead, it "holds" important poses to emphasize the character's silhouette and the arc of their motion. Holding a pose longer makes the motion feel slower, holding shorter feels faster, and changes between slow and fast motion set the pace of the loop.

(Today is all character animation, so visual effects like screen shake, flash, etc., aren't covered.)

There are five key poses in the swing, including the idle pose. These keys are the "bare bones" conveying the overall movement and its arc; if this were a manga, these are the poses the artist would draw. (Some say "key frames", but that can mean a couple different things.)

Here the keys are written in blue and circled.

In the pose-to-pose processes common to 2D animation, keys come first. The artist starts from the idle pose, draws the key representing the moment of contact, then returns to draw the keys between them. This is generally faster than straight-ahead methods of drawing poses sequentially.

Between the idle and contact, the most important key is the General standing with his sword ready to strike. This is the first pose defining the arc of his swing. Clearly visible arcs make animation more legible by providing something for the eye to follow.

Traditional animation is timed out of 24 frames; a cut drawn "on 2s" provides 12 unique drawings for 24 frames every second, "on 3s" 8 drawings per second, and "on 4s" 6 per second. Film animation is often on 2s, television on 3s, but animators bend these rules for effect. Games always target higher refresh rates than TV or film—60 frames from 1977~1993, a mix of 30 and 60 FPS since 1994—but 2D game animation still uses the same conceptual structure. (e.g. Cuphead was animated on a mix of 2s and 1s, but the game engine itself ran at 60 FPS.) This makes it easier to translate principles from one medium to another, and employ tools like exposure sheets created with 24 FPS in mind.

Most of Fire Emblem's frames are on 3s, but this specific key is held for seven additional frames to build anticipation. "Antic" prepares the viewer for a fast action, by dwelling on a movement building up to it. "Holding" anticipatory keys is one way to build anticipation. The General is about to swing quickly, so the animator lingers on the drawn sword.

After this comes the smear frame. A smear is a key pose that distorts the volume of the character to bridge between poses, presenting a more fluid form. (Note how the contour lines are almost completely lost here.) This smear is on 2s, which conveys the General snapping into action after the readied stance was held for 10 frames—the artist built up the anticipation, and executed on it.

The smear is a type of key, so it's circled here.

A lot of the Fire Emblem GIFs you see online have incorrect timing, and display every pose for an equal number of frames. (They were originally made by junior high students just figuring out GIFs in 2005, so we can't be too hard on them.) In-game most smears are shown for 1~2 frames, contact poses are held for 8+, and others vary 1~3 frames.

For example, this GIF of Eliwood looks floaty because all of the poses are shown for 10 frames (10-10-10-10-10-10...) when the actual timing in-game is like 1-2-3-6-1-16 for the attack and 1-2-1-2-1-2-1-2-1-2-2-1-2-1-3 for the recovery to idle.

Following the smear is the final key of the swing. This represents the moment of contact, held in-game for a variable number of frames depending on how long it takes for the HP bar to decrease. (Minimum 8.) Lingering on this pose makes the complete action coherent to the player.

On their own, key poses are not enough to create the illusion of movement. They are the core of the motion, but need something more: in-between frames. In-betweens fill the space between keys, smoothing out the motion. In film and TV production, in-betweens were traditionally done by assistants, but that's not always the case for game animators.

The key pose/in-between distinction also exists in Japanese, as 原画 genga and 動画 douga, while antic is 予備動作 yobi dousa. In-between drawings are more specifically called 中割 nakawari. These terms are taxonomic, not prescriptive; the language differs, but the result is the same. In film and TV genga and douga are handled by separate genga-man and douga-man jobs, but in games both tend to fall under a shared role like "Battle Animation," "Object Design," "Graphic Design," or even "Character Designer." (As opposed to "Scroll Designer," which is Capcomspeak for background art.)

Here the in-betweens are uncircled and written in green.

The most important in-between in this loop is the passing position, also called a "breakdown." Passing positions are transitionary points where limbs pass in front of or behind one another. Inserting the passing position between key 1 and 2 convinces us the character is stepping forward.

To get from idle to passing, the artist goes back and inserts two more in-betweens. The General lifts his left arm, pulls his sword arm in, and shifts his left leg forward while pulling his sword back. The motion of his arm pulls his pauldron along, obscuring his face and creating a smooth bridge to his left shoulder extending on the passing pose. These in-betweens are animated on 3s.

Note how the cloth at his sides distorts, pushed outward by the motion of his legs. This is called secondary motion and continues into later keys and in-betweens; the secondary motion responds to forces more slowly than the primary motion, creating a sense of inertia as these hanging elements are pushed and pulled around by the body beneath them. Secondary motion is usually added after the primary motion has been defined in the keys and in-betweens, as one of the last steps.

The next three in-betweens connect the passing to the ready key, extending the arms and left leg out while the cloth drapes. Again, the secondary motion of the cloth is slower than the primary motion of the legs. These are spaced very closely. "Spacing" refers to how near sequential poses are; close spacing adds weight and reduces speed, wide spacing quickens and lightens the motion.

Note how the pauldrons extend outwards one pixel before falling back on the ready pose. This is another bit of secondary motion. The first in-between is on 4s, but the next two are all on 1s, which makes the secondary motion happen faster than the primary motion. This enforces a sense of a heavy stride pushing around the pauldrons and cloth.

The next two in-betweens connect the readied pose to the smear. These are also on 1s, and feature the General lifting the sword diagonally, then duplicate the pose with the blade vertical. (It's fast enough that YouTube videos tend to merge these frames together.) These poses are also passing positions, as the right leg is now passing the left to step outward.

Because each in-between is only held for a single frame and the player's eye is on the sword, duplicating the body while moving the blade is sufficient to convey the arc.

The last in-between of this cut connects the smear to the contact key by adding secondary motion to the pauldrons, pushing them up a pixel for 2 frames before sinking down on contact for 8 frames. The timing of the animation up to this point (coming out of idle) is 3-3-3-4 1-1-1-3-10 1-1-2 2-8. This creates a steady build-up to the sword drawing back (3-3-3-4) followed by a weighty anticipation (1-1-1-3-10) and then snappy swing (1-1-2) that finally comes to a long rest. (2-8) It also only requires 14 unique frames despite displaying for 43—a real triumph of limited animation.

However, this is only half the animation. The animator still has to get the General back to idle.

Once more, we have the keys; just four keys make up the recovery to idle.

Stepping back with the right foot and pulling the sword in, on 4s.

Planting both feet on the ground, sword held horizontally, on 3s. Before this the General is leading with the right foot, and after the General is leading with the left. The motion reverses. (This pose is partially reused from key 2, but the upper body is redrawn and the spacing is different.)

Stepping back with the left foot, lifting the sword, for five frames.

And frames planting his feet back into the idle pose, sword held aloft, on 3s. This last one forms the transition to the idle pose.

Between the four recovery keys are six in-betweens, but no smears. None of the actions in the recovery are fast enough to warrant a smear—and overusing it would dilute its impact. This is not an agile unit like Eliwood or the Rogue, there's no call for that kind of speed.

The first two in-betweens take the General from stepping back to the feet-planted key, with secondary motion (follow-through) given to the cloth around the legs sinking down and the left arm lifting. These in-betweens also feature the pauldrons pushed forward, so that they sink down on the following key. The first in-between is on 3s, the second on 2s, accomodating the secondary motion.

The third in-between in the recovery connects the feet-planted key to the pose of stepping with the left foot, held for four frames. There are no poses between this and key 8, but there are three in-betweens bridging key 9 to the idle pose.

The first lowers the chestplate and pauldrons while raising the sword and swordarm.

The second pulls the sword back while further lowering the pauldrons, which helps us see the General returning to rest.

The last frame overshoots the sword's position one row of pixels lower than the idle, causing it to snap back up on returning to the idle pose. Overshooting means that an object travels slightly further than its final resting place, mimicking how momentum is maintained under physics. You don't see it on the General's contact frame because the screen shake effect used in-game would make it impossible to notice, but by putting it at the end of the recovery we get a more lively form.

The way the General was animated may seem strange if you're coming to it from a Disney-esque perspective, but it's consistent with how limited animation is taught and practiced in Japan. Slower arcs get more frames and faster arcs get fewer ones, mimicking how the eye tracks motion in life. Instead of "easing" out of and into key poses, the artist eases slow arcs and spaces fast ones.

I singled out this loop because it represents an intersection between two periods. The General's idle pose was first drawn for The Binding Blade (2002) when the Game Boy Advance was a new frontier. The accompanying sword animation was created for The Sacred Stones (2004) by which time Intelligent Systems had gone from a tiny two-person internal animation team to 15 artists, including outsources from Flagship, and freelancers not part of either company. Binding Blade's animations were primarily created by just two people, Takemori Maki and Nakai Youko, with assistance from four support artists juggling different duties. Within two years, art was Fire Emblem's biggest team.

There were some advances in tooling IntSys would have been on top of at this time. Japanese developers around 1999~2001 were migrating from the 256-color D-Pixed program to Takabo Soft's EDGE kit for pixel art, which featured animation tools like onion skinning that D-Pixed lacked. The "Enhanced Dot Graphics Editor" made it easier for artists to preview their animations while they worked, supported the 32k color range used by the GBA, and had palette manipulation features you wouldn't find in contemporary editions of Photoshop and other general-use graphics editors. Overall it worked much like Aseprite and GraphicsGale today, but released years earlier.

On the hardware end, the USB revolution helped Wacom art tablets enter widespread use with the 1998 Intuos, the 2000 Graphire, 2001 Graphire2 and Intuos2, and 2002 Cintiq. No longer were artists drawing pixels with a mouse and arrows, but with tablet pens and express keys. (It starts a little later, but I recommend David Revoy's retrospective on tablets.)

Many Binding Blade animations look awkward, like the Fighter that mechanically rotates its axe behind itself while not moving at all before snapping into contact and clumsily shuffling back to idle. The most fluid—classes like the Druid, Pegasus Knight, and Soldier—appear late in Binding Blade's internal class index, and may have actually been animated later in production, when Takemori and Nakai had an established workflow and familiarity with their new tools.

Certain things never quite looked right; mounted units had an inherent awkwardness, trying to maneuver a horse around a small space. By the time The Sacred Stones rolled around, Fire Emblem was a bigger operation with more artists and over a hundred animations they could reference from.

When we look at the General in 2004, we're looking at a couple years of expertise coming together to update an older work. The '04 sword animation reads more fluidly than the '02 lance loop:

Fire Emblem is an aspirational game for indie devs. Just as we can trace the influence of The Legend of Zelda: The Minish Cap down to Moonstone Island and Ocean's Heart, we can see Fire Emblem's fingerprints all over Wargroove and Dark Deity. In its own day it inspired Orbital's (sadly canceled) Pirate Battle, and long after that Dancing Dragon Games' Symphony of War. Contemporary pixel artists like Cyangmou and Hut cite it as a muse, while for fans "I miss 2D" is a recurring refrain that never quite goes away. Even Fire Emblem's current art director refers back to the GBA games, despite working in a much more complicated world of kinematics and cloth physics.

It was ultimately the artists' hands, not their hardware, that drew these frames. A pen is useless without the hand that holds it, and a tablet can make art easier but can't make art; only an artist can. Each new Fire Emblem was packed into a 128-Megabit catridge for a static platform—no RAM expansion or processor upgrade to fall back on. The difference was not in the circuits or the screens, but in the people beyond them.