Layered animation in Pixel Art

One of my goals with the project was to have smooth, efficient animation. I wanted it to look good and transition smoothly but I also wanted to approach it efficiently. One of the key steps in accomplishing this was separating the character sprites into independent layers.

Let's give an example, say I wanted a version of the walking animation with the character holding an umbrella. That change is simple enough, then I’d have two animations, walking with an umbrella and walking without one. But then, what if I want them to also be able to independently pull out their phone with their other hand and look at it. Then I need a variation for holding the umbrella and looking at the phone, looking at the phone with no umbrella, pulling out the phone with no umbrella, pulling out the phone but halfway through pulling out the umbrella. As these dynamic events stack, there’s just more and more situations that need to be accounted for.

The solution for this is to put each body part on their own layer that can animate independently. We’re taking a bit more inspiration from 3D. There, you can blend animations by having different parts of the skeleton perform independent animations. The idea here is similar.

We create a new layer for each body part and then stack them all on top of each other.

That way, for future animations where only some body parts are involved, I only need to draw those layers. For example, when holding the umbrella, only the left arm needs to be animated differently, meaning it is the only one I have to draw and animate.

But we need some way to keep them all in sync and some way to navigate each part’s logic tree independently. That will be expanded upon more in the following post.

Overall, layers were a vital step in creating dynamic multi-layered animations and the project overall would have been a lot more stilted and tedious without them.