# Advancing Frames

This page is for principles on the changes from one frame to the next, like when you're adding in-between frames to smooth the animation.

# How Many Frames?

As many as it needs.

There's no fixed framerate that is "good enough" when animating, the goal is to find a middle ground between looking choppy, and taking too long to animate.

A good way to find that point is by starting with few frames, and gradually adding in-betweens as needed to make the animation look smooth. If in doubt, look at the vanilla rivals animations.

Most attacks in rivals can get away with very few total frames. A simple punch can have as few as 5 or even 4 animation frames.

You should try to optimize your development by using as few frames as possible to [smoothly] convey a motion.

This may actually end up making your character look better.

Here is the jab animation of a character I'm working on, as an example:

This loop of 2 punches uses only 8 frames, because the attack is fast, cancellable and repeatable. This is all that's necessary to make it look smooth and clear in-game.

~ Trail Mix (paraphrased)

# Redrawing or Adjusting

Communicating with the keyframes is critical, and you should draw each keyframe more-or-less from scratch for maximum impact and readability.

When you add in-between frames, you can save time by copy-pasting the neighboring frames and adjusting to show the movement. Adjustments might start with stretching or rotating the sprite and then repolishing.

Keeping body parts on separate layers is very important to this approach, so that you can adjust each body part separately without messing up the rest of the image.

Be careful of making the character look stiff, static, or robotic.

You can look at the animations of character's you like for reference of how much they move between each frame.

caption/
'Yes, I know' - Iguanadont

# Using an Asset Library

As a more advanced technique, some artists make a sketchbook of body parts in different orientations, such as the character's head, drawn tilted in different directions.

They can then copy-paste the right image for the frame they're drawing only need minor adjustments to smoothly integrate it with the animation.

This is probably not worthwhile for a first character, but may be worth looking into when you want to increase your speed.

# Follow Through and Overlapping action

Soft parts of the character drag behind a character's movements, and keep moving after the character stops.

This is most visible with details like hair or clothes.

Long soft things, like scarves or tentacles, often create wavy "S" shapes as they're pulled back and forth.

Short Video Guide (opens new window)

caption/
Follow through on scarf - by Mr Nart
caption/
By Bar-Kun

# Subpixel animation

caption/
Tutorial by saint11

For subtle animations like an idle, moving a full pixel may be too big a movement, looking jumpy.

While you can't change a fraction of a pixel, you can use tricks to make the change less jarring.

caption/
By NyazureDreams
caption/
from Metal Slug
caption/
by doa687



caption/
No subpixel animation
caption/
With subpixel animation - By tinywarriorgames.com