THE JUICE

Ok so we’ve got this punch. Arm goes out, arm comes back in. Basic punch. Looks bad! How do we fix it?

This is an archived presentation I gave at work.

In addition to following the 12 principles of animation, we need to embrace our restrictions. This is a 12 FPS animation since we probably don’t want to draw hundreds of spritesheets, but we can add a frame of anticipation, some followthrough, and some exaggerated posing.

How can we make it better?

You embrace your medium more, and diverge further from real life. At 12 FPS, it’s hard to tell where things are going, but by adding a motion line, it’s easier to tell where things have been. You can get pretty creative with the actual design of your motion line.

So now we’ve got some basic animations. Unfortunately, the impact itself needs work. There’s no weight/juice/etc associated with it, and it doesn’t convey much information to the viewer about what’s going on.

What else can we add?

A white flash! Now we’re delving into the realm of VFX trickery. We’re not mimicking or trying to elaborate on anything parallel to the real world; instead we’re trying to quickly and decisively convey information to the player. The victim of the impact flashes white to highlight what’s getting hurt, and returns to normal fairly quickly.

What else can we add?

Camera shake is another trick. Self-explanatory. You can play with the shake intensity and shake duration for impacts of different strengths, but this also depends on the rest of your game’s art style.

What else can we add?

Hitmarkers are another industry-standard tool. These can also get really cartoony like I’ve done here. They’re multi-component in this case: stars and planets for impact sparks, and a small line to illustrate the knockback vector. I recommend finding a game you like and looking at it frame-by-frame to see the tricks they use.

What else can we add?

Hitstop is a subtle but fairly powerful tool to highlight an impact. On hit, stop game time for a few tenths of a second, excluding the hit particles, camera shake, and white flash. The two punches and the kick have 0.1, 0.2, and 0.3 seconds of hitstop, respectively.

Hitstop is not to be confused with hitstun, which is when a character (usually in multiplayer fighting games) can’t move for a short period after being hit.

What else can we add?

The final thing I’ve included here is damage numbers. They follow the art design of the rest of the game (solid color fields, no fading, decisive movement) but are a way to convey explicit (as opposed to the previous effects’ implicit) information about the impact.

Here’s a an early build of Vapor Trails using all of these effects, minus the damage numbers.