• Register

Cause distress in this challenging fast-paced action platformer. Experience a dark cartoon world come to life as frenetic gameplay meets comic book visuals and storytelling. Dash through beautiful arenas vanquishing vampires, rescuing hostages, disarming bombs, hacking servers and much more.

Post news Report RSS Animation process

An article about the animation processes used to create Damsels movement.

Posted by on

So in the previous animation blog post I described the process of setting up a 2D rig, but didn’t go into detail about the most important part; animating the rig! So here I’m going to write about how I approach animation in general on this project.

Step 1 Find the extremes

Before I start actually animating the character, I’ll usually add the key poses to the timeline and test how extreme I can make them. Even though I’ve already designed the rig with certain poses in mind, sometimes I’m able to produce happy accidents by exploring the limits of the rig. I also use this time to make sure the poses having clear compositional staging.

Having extreme and opposing poses is important if you’re trying to make your animations impactful. It adds contrast and clarity to actions, making them memorable and easily understood.

Step 2 Design your arcs

The animation I do in between poses always has arcs of some nature. Sometimes they’re obvious like in a sweeping sword swing, and sometimes they’re subtle like the bounce in an idle animation. If there’s an extreme difference between your key poses, then you’ll likely need to link them with an arc of some sort. Notice the arcs in Ryu's dragon punch. A small arc during the wind up, and a large one for the swing.

"Shoryuken!"

In addition to making actions more natural looking, arcs also help to make animations more readable. This is because arcs infer their motion, allowing your eyes to track and understand the path of motion even at high speeds. As long as you see movement at the start and end of an arc, you’re left with the impression of the whole arc.


"Hi!"

Note that the red dotted line indicates the gap in the arc, but your eye will make the connection regardless.

Step 3 Adjust the Timing

When thinking about the timing of an animation, I consider what information needs to be conveyed to the viewer. Animation at a constant speed doesn’t give the viewer anything to focus on and will be harder to read. Contrast proves again to be an effective method of highlighting, so my timing lingers heavily on the key poses. This essentially segments the animation into distinct moments, which makes the overall action easier to read and digest. Timing with extreme contrast suits puppet animation well, as the quick transitions help make the swapping of pieces appear seamless.

Step 4. Add follow-through animation.

If you picture a bunny with long ears stopping suddenly, those ears are going to swing forward as it stops. When Road Runner stops on a dime he wobbles like a springboard. That's follow-through. When the animation between poses is extremely brief, follow-through becomes an essential way to express what the viewer barely saw.


download 1

The bunny moves from the left to the right in 0 frames, but it doesn’t look like he teleported. That’s because 3 examples of follow-through are present. 1) The ears lag behind and continue forward. 2) His head wobbles in place as he stops suddenly. And 3) Carrot crumbs trail behind him (and his mouth is full). Okay, that last example is probably a bit creative but I think it qualifies.

That’s all for now as I’m still learning. Though I’ll likely discover even more ways to approach animation during the course of development. Thanks for reading!

Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: