Hidden in some seemingly normal video game animations, there are single frames of body
horror. They’re called smear frames. You probably never noticed them, and that’s
by design. Smears aren’t all that common in video games these days, but there was a
time when they were vital - in fact, one of the most iconic game animations of all time
is a smear.
There’s a very good reason for their disappearance - but much like my limbs would in a smear
animation, I’m getting ahead of myself.
Smears harken back to the early days of modern animation. In the 1930s, Walt Disney (the
actual human man, not the media conglomerate) pushed for certain aspects to be “realistic.”
So his artists studied live action film, frame-by-frame, which is how they noticed a kind of distortion
in the images.
- TINA: Whenever you do an extremely quick movement, you know, just like blur your hand
like that. And that's why smears are also called blurs, it’s that your eye doesn't
pick up the hand moving across, it just picks up this smear of color, which represents the
fast moving object.
- This is Tina Nawrocki, the 2D animator personally responsible for animating these Cuphead bullies.
And she probably just tricked you into waving your hand in front of your face to see if
what she said is true. It‘s weird to think of smears as being more accurate to what we
see than just a bunch of single frames. But that’s how it works!
Cuphead runs at 60 fps, but it was animated in the same way those retro cartoons were:
by hand, with 24 frames per second. The optical illusion works because even when we’re only
seeing a bunch of stills, our brains naturally fill in the gaps in the action. So unless
we pause on just… the most damning frame, those deformations will read like motion.
- TINA: One frame of a hand here, and then here and disappear, that looks choppy. Whereas
if you do a smear, it's nice and smooth, and it actually mimics what our eyes sees.
- It’s easy to freeze on a single frame and think the animators must be pranking us. But
animation is the art of movement, not moments. And when you put it all together, it works.
Smears in Cuphead or Skullgirls function the same way as in those old Looney Tunes shorts.
American animation often uses a system of extremes and inbetweens. The lead animator
draws two frames, marking the beginning and end of an action. The frames in between are
filled in by, well, someone paid less. These inbetween frames are where smears happen.
They can be stretched smears, like this, which replicate the color smear that Tina mentioned.
Or repeated smears, like the afterimage of multiple frames flattened into one picture.
As Richard Williams explains in his seminal work, The Animator's Survival Kit, you can
use a smear, or any shape distortion, to bridge a big distance.
- TINA: It creates a movement that is surprising, that is quick, that is really like, you know,
great fun. But it doesn't confuse you because the smear is leading you to where you should
be going.
- We think of the smear as just the single frame where the wack anatomy happens, but there’s
a little more to it than that. To get that eye-directing power to work, the viewer needs
to know that something special is about to happen.
- TINA: You don't want to put a smear without the audience being ready for it in a sense,
like, you need to have a huge anticipation, which is just a rule of animation to make
sure the audience is expecting something to happen. And then you hit them in the face
with a smear, because it's a snappy, fun, fast action that happens like that.
- The super exaggerated art in Skullgirls is a great example. Mariel Cartwright, the game’s
lead animator, breaks a move into four core components: anticipation, smear, attack, and
return to idle.
The anticipation is a big rear-back held for multiple frames. Even in games that don’t
use smears, you’ll still see attacks with big anticipations. The recognizable wind-up
acts as a warning, giving players a chance to react. If they’re fast enough...
The smear itself is usually only a single frame, but it makes a big impression. And
look at what a huge distance this one covers! It’s a literal trail that leads you from
where you were looking, to where you need to be looking - the impact point. You see
the wind up and the attack, but you feel the smear.
Without a smear, you’d need multiple frames to cover that action, or, as Tina said,
it would look choppy. Early animators used them to cut down on the number of frames they
needed to draw (even while their managers thought they were just being lazy). The same
principle is useful for early sprite-based video games. When you don’t have much storage
space, anything that cuts down on the number of sprites you need is vital. Using a smear
was pure benefit: it was bigger action in fewer frames.
Most of Capcom’s fighting games from the 90s made extensive use of smears. That, and
other retro animation techniques, give a vibrant cartoonish feeling to every movement. It’s
part of why they still look so fucking good.
Smears serve an extra purpose in these games, because they don’t just sell motion - they
sell speed. So giving some characters a lot of smears can make them feel snappier, faster
- just generally just different from the others.
Consider Street Fighter III 3rd Strike, which has some of the best animation in any game,
of all time, period, that’s it. If we flip-book through the animation attacks for capoeirista
Elena, we see a slow, methodically animated sprite, reading as powerful and controlled.
Comparably, patron saint of leg day Chun Li’s animations come off as snappy, moving so fast
that your eye has to work to track it. Then you have ultra ninja speedster Ibuki, who
is so small and lightweight, even her falls have smears.
Aside from attacks, sprite-based games usually used them to speed up locomotion. You might
have seen them in a little game called Sonic the Hedgehog. Despite the very small storage
space on the Sega Genesis, this game has incredibly detailed and flavorful animation. So it’s
no surprise that Sonic’s design was directly inspired by those early American bendy boys.
And you can really feel it in his run animation.
And, generally speaking, smears are meant to be felt, not seen. I read this aphorism
all over the place while researching this video, and also:
- TINA: You don't want to see a smear, you want to feel it.
- But there are times where smears are held for multiple frames for stylistic reasons,
and you’re meant to be aware of them. Roadrunner’s orb-feet are very visible, and as such, they’re iconic.
That’s also the case for that super iconic game animation I mentioned at the start.
It’s Sonic’s spin dash. He’s moving so fast he becomes a lil egg, but because
we understand that that means speed, it totally makes sense.
Consider Chun Li’s iconic Hyaku-retsu-kyaku, or "Hundred Rending Legs." I mean, it’s
right there in the name, right? Like, obviously you’ve gotta double up on legs if you're gonna get to 100 kicks.
Street Fighter had some variation of this repeat smear in every game... up until Street
Fighter EX. This was also the first game in the series to use 3D graphics, and that is
not a coincidence.
It turns out, it’s really hard to do smears in 3D animation. Buuuut if you remember seeing
Overwatch smears in the intro of this video, you can deduce that sometime in between this
and this, animators found a way.
3D character animation relies on a skeleton and a mesh. The skeleton is the hidden, posable
core, and it’s the thing animators manipulate to make a character do any action. The mesh
goes on top of the skeleton to make the character look like Chun-Li or whomever. We have a full
video about skeletons if you want to learn more about that. But the important thing to
note here is that skeletons have a lot of preset information on how a body should move,
to keep it looking consistent and real.
Which is like the two things a smear shouldn’t be.
The upside of using skeletons is that it’s relatively easy to automate their movement;
you create the extremes - here called keyframes - and the computer moves the shape for you.
But it means all those in-between images - where smears used to happen - are done automatically.
Hand drawn smears could cut down on the artist’s work. But in 3D animation, it takes considerably
more effort to get that funky, stylistic, rubbery detail. This is part of the reason
3D animation can sometimes feel... stiff and underwhelming. The extra flair that went into
warping the figures is all automated away.
But some game animators are committed enough to make it work. Like Sonic, Crash Bandicoot
was inspired by our old noodly friends, and I mean… they are not trying to hide it.
Back in '96, the devs at Naughty Dog couldn’t warp the 3D skeleton how they wanted. Even
if they could, the Playstation couldn’t handle that much real-time processing. But
they did have a mesh in the shape of bandicoot… sort of… and they knew they could manipulate
the actual vertices that made up that shape. So rather than animate the skeleton… they
animated the polygons themselves. With a vertices-based animation, they could stretch and skew Crash’s
body shape, and even do wild Tasmanian Devil spins. It’s what makes Crash feel like Crash.
And that’s basically the same method Blizzard used, 20 years later, to get their smears.
The devs still use skeletons and meshes, but they have an additional layer of control points,
which helps them smear characters like Tracer.
- JESSE: If you can imagine like a cylinder representing a leg, we had her upper leg joint,
her like knee and then her ankle.
- This is the Principal Animator for Overwatch, Jesse Davis.
- JESSE: For that test, we actually had four other joints around each of those…
And those are the joints in our engine that we’re allowed to non-uniformly scale.
- Basically, this layer of information breaks all the rules of the skeleton by letting them
distort the mesh in whatever direction they want. You can really see it here:
Thanks to these control points, the arm is curved and has distorted widths.
They call these noodle joints.
- JESSE: Because you can literally sit there and noodle them separate from the rest of
the uh, the limb.
- *CHEF'S KISS*
Delicious!
Overwatch uses smears the same way fighting games did:
- JESSE: Like each hero has a different level of smear that I guess we lean into
and helps each character stand out from each other as well.
- Smears make sense for Tracer because speed is her whole deal. But when they tried adding
them to Bastion, it just didn’t work - it made him look rubbery, which isn’t quite
right for a metal robot.
You’ve probably never looked at Overwatch and thought “wow, just like Looney Tunes!”
Although they’re using smears and stretching characters in cartoony ways, they aren’t
really paying homage to those old cartoons.
- JESSE: We tend to not say it's cartoony or realistic, we kind of lean
towards more... based in like, real world physicality,
uh, with that extra kind of 20% of like, style pushed.
- It’s why Overwatch smears don’t always come with anticipations, or anything that
calls them out to the audience. Even more so than most games, they don’t want to draw
attention to this optical illusion. Or as Jesse put it:
- JESSE: For us, it's a lot of like, feel don't see.
- Heeey, he said it!
For Overwatch, it’s not a throwback, it's just an aspect of the aesthetic. And I did confirm
with Jesse that we should keep our eyes out for it in Overwatch 2.
(CLOWNLIKE HONKING)
To work in a 3D era, smears have to keep evolving. Outside of games like Cuphead and Skullgirls,
they can’t function like they used to. And we’re seeing innovations all over the place.
Dragon Ball FighterZ does a kind of smear-alike, where they paint the motion lines the same
color as the object doing the motion. 3D Sonic games can replace the “hedgehog”?? model??
with a plain ol’ orb pretty easily, but some add smear-y splotches of color.
Even Street Fighter has reintegrated smears for some animations. It’s easier to duplicate
a leg mesh at key moments, thus making a repeat smear, than it is to deform the shape entirely.
At other points, they use a kind of motion blur on some body parts to give a similar
feeling.
Plus there are smears in games where you’d least expect it. So when you see an animation
that makes go “damn” and you can’t put your finger on why - there might just be a
hidden smear at work.
(pleasant, jazzy pianos rise in volume to play us out of this enjoyable video experience)
(a throaty horn enters the chat)