2D Character Animation Part 1: Animating Using a Skeleton
This is Part 1 of the series on 2D Character Animation. The parts are linked here.
Part 1: Animating Using a Skeleton
Part 2: Exploring Methods of 2D Animation
Part 3: Photoshop Frame Animation
Introduction
My interest in animation was sparked by a good friend Tom, whose enthusiasm for learning everything and anything new is a constant source of inspiration for me. He got me started on character animation by introducing me to The Animator’s Survival Kit by Richard Williams.
The book details the principles behind traditional animation, including thinking about animation in terms of extreme positions, passing positions and in-betweens. In particular, Tom gave me a half-day After Effects tutorial on his own adaptation of these principles to the digital space. Cheeky as I am, I didn’t just make a walk cycle as he demonstrated, I made this:
I was excited to have the opportunity to apply my learnings to my work for The Last Crystal, a 2-player co-op puzzle game that will be released this year. Here’s a work-in-progress video of the game:
My task is to animate the two characters, Elia and Ezio. As can be seen, they are 2D sprites, and they each need animations on four directions: left, right, front and back.
As a beginner to animation, I am still finding my way about the most efficient way of working. I explored several ways, and will be discussing about what I found out about when to use of each of them, and my chosen workflow for this particular character animation.
Method 1: Animating the skeleton first before matching the character to the skeleton
I started with what I knew: the stick-figure animation that Tom had taught me. I worked on the side view of Ezio first, as it was closest to what I did, and without the added complexity of Elia’s cape.
First, I used Illustrator to draw the skeleton of Ezio’s body. It was just a simple figure with geometric shapes, and then using the pen tool, I added curved anchor points to the elbows, knees and feet so that I would be able to bend them naturally in After Effects. A tip: give the left and right arms and feet different colours so as not to be confused by overlapping shapes while animating.
Importing the skeleton into After Effects, I turned these layers into shape layers so that I could move each anchor point to position them for the extremes, passing positions and in-betweens. After Effects did the rest of the job in interpolating between these points.
With the skeleton done, I needed to match the art provided by our artist, Helen, to the frames of the animation. I first did this in Photoshop by cutting out each body part of the character into different layers so that they can be rotated separately.
The next step was to match the different parts of the body to the skeleton. I did this using the Liquify tool in Photoshop, and there were a total of 15 frames, which meant I repeated this process 15 times, to produce 15 images. It was definitely the most tedious part of the process.
When all the frames were done, I combined them into a sprite sheet using the layersToSprites script, which I have written about in the last part of my Omino Snake post here.
The animation was tested out against the background of our game. Interestingly, the ‘bounce’ in the step that was encouraged in The Animator’s Survival Kit didn’t really work well within the game environment, so I removed that, and it produced a smoother animation.
For Ezio’s left walk cycle, all that was needed was to flip the images of the 15 frames to face the left, then combine those into a sprite sheet. Note that just flipping the sprite sheet doesn’t work, because then the frames would not be in order.
In Part 2 of this series, I will explore other methods of 2D animation, and how they apply (or not) to the front view of Ezio’s animation. Some of the findings were unexpected!
