platform fighter

Animating with 3D Smears and Multiples

Hello friends. Tyler “Flapjack” Anthony here to show off a little bit of the animation style and technique going into Dragon Slayers. A lot of fighting games are 3D these days. There are positives and negatives for developing a 3D game over a 2D game. One point I would like to talk about that 2D games do better than 3D games is smear frames.

What are smear frames?

Fighting games are fast. They need to be fast so they feel responsive. The problem with being fast is that the human eye can only detect so much information per second. That's where smear frames come into play. A smear frame will help the eye follow the action and infer movement over a large distance in a short time. Let's take a look at some examples and techniques used.

Makoto - Street Fighter 3: Third Strike

Makoto - Street Fighter 3: Third Strike

Makoto - Street Fighter 3: Third Strike

Notice in some frames Makoto's appendages are stretched and in other frames she's moving so fast she's appears as only a blur!

 
 

Here's an example of another smear frame technique, multiples. Instead of a blurred image to create a sense of speed, the object is multiplied.

Smear frames are more flexible in 2D games because each frame is hand drawn. That's something we aim to capture with our animation.

How does this fit into Dragon Slayers?

Our goal was to implement some of these techniques and allow the animator to have more control of the motion, rather than relying heavily on VFX. Here are some examples using the Slugger.

Smear Frames

Make sure to view these gfy’s in HD! (bottom right button on each clip)

 
 

First is his Weak Forward attack. The animation altogether is 35 frames long. At 60 frames per second that is only half a second long. The hit frame is at frame 7, that gives us only 6 frames (1/10th of a second) to show the character anticipating and executing the action! A very short amount of time to display crucial information.

 
 

Here, you can see more clearly the smear from the bat. We start the animation already in an anticipation pose and hold it to allow the action to read clearly. The swing of the bat is very fast which is why we add the smear frame and have most of our motion as follow through. These things add up to help the player read the action while still feeling responsive.

 A few more examples:

 
 

Multiples

This form of smear frame gives a heavier feeling. Of course it is still very fast!

I hope you've enjoyed this brief look into some of our animations. We're very excited to share more soon! If you have any questions about animation, or our game in general, feel free to visit our Discord or Tweet at us. Until next time!

Tyler “Flapjack” Anthony

(discord) (meta games twitter) (my twitter)

Other great resources

For more in depth breakdowns and examples of fighting game animation, check out the links below.

Mariel Cartwright: Making Fluid and Powerful Animations for Skullgirls

Daniel Floyd: New Frame Plus- How to Animate a Smash Bros Character (series)