2D Character Animation Part 2: Exploring Methods of 2D Animation
This is Part 2 of the series on 2D Character Animation. The parts are linked here.
Part 1: Animating Using a Skeleton
In part 1 of this series, I used a skeleton to animate the side walk cycle of a 2D character. Our developer of The Last Crystal game, Marc-Antoine, suggested that there might be other ways of animating a 2D character, that didn’t involve making 15 Photoshop files for 15 frames. Thus, for my next bit of animation, which is the front view of Ezio, I did a bit of research on ways people have done animations, and I’ll share the findings here. (Spoiler: I went back to using Photoshop in the end, and I will explain why. I’m still a beginner at animation, so if you have a better method [which doesn’t involve modelling in 3D and rigging that], please let me know in the comments! I would appreciate learning about it!)
For reference, this is the front view of Ezio. My task is to make him walk.
Method 1: Using the Liquify effect in After Effects
After Effects is the tool of choice for many animators. Since I had been using the Liquify effect in Photoshop, I was excited to find that I could use Liquify in After Effects too. I found this tutorial on how to liquify a fish. Seeing the distortion of the grid and setting keyframes for the different distortions excited me. Potentially, this could reduce my 15 Photoshop files to just 1 After Effects file, I thought.
Unfortunately, when I tried it out, the liquify tool in AE was not as responsive as the liquify tool in Photoshop. Below is an example. I didn’t change the speed of the video, that is the speed of it on my Macbook Pro. You can see a bit of lag, and the loading bar whenever I apply the brush.
Disadvantage: It is not as responsive as the Liquify tool in Photoshop.
The lag doesn’t look like much, but it significantly hinders my ability to apply precise strokes of the brush, so I’m a lot more prone to errors. It just wasn’t a very good experience, and prompted me to discard this way of working, for this particular instance of animation, at least.
Method 2: 2D Character Rig in Unity
The Last Crystal is built in Unity, and I found this great and easy-to-follow tutorial for 2D character rigging in Unity. The tutorial is made of 4 parts:
- Part 1 talks about how to prep a sprite and explode its parts for animation in Unity.
- Part 2 is about how to put the parts together, naming them and making sure the different body parts are in the correct order (i.e. which part is in front of which).
- Part 3 shows how to parent the different parts to each other so that, for example, when you rotate the shoulder joint, the whole arm moves. It also goes into animating using the timeline.
- Part 4 is where the cool stuff happens — You can connect your animations to each other as different states, such as having walking and attacking cycles, so that pressing buttons will trigger the correct animation and flow smoothly between the different states.
I highly recommend watching all 4 parts of the tutorial if you are making a 2D game with a character that only requires the side view.
Disadvantage: Only usable for side view animations
Unfortunately, great though it is, this is the limitation of this rig: the movement of the body parts is done through purely rotation. The front walk cycle of Ezio involves scaling in perspective when the arms and legs move front and back, so this setup would not work for my purposes.
Method 3: Frame Animations in Photoshop
I went back to Photoshop after that. I remembered that Photoshop could create frame animations, and I thought that perhaps that could help me in reducing my 15 Photoshop files to just 1 file. It didn’t work the way I expected it to, however.
Disadvantage: Frames are not completely separate from each other
I expected each frame to be separate from each other, like what I was familiar with in Animate CC (or Flash as it was known), but when I tried it out, rotating or scaling an element in one frame affected the same element in all other frames. The video below shows what I mean.
I dismissed the feature as unsuitable for my needs at this moment, and I thought it was more suitable for simpler animations that only needed elements to be repositioned between the different frames. (Note that however, I went back to it later on by using different layer groups for each frame — it will be elaborated on in Part 3 of this series).
Method 4: Back to Separate Images in Photoshop
Having exhausted my means, I went back to Photoshop, this time using a few more tools than just Liquify.
Front walk cycle references
First, though, I found a few references for front walk cycles, since I wasn’t as familiar with them as with side walk cycles. In particular, I referenced these two videos, the first for a more standard walk, the second for a character with a short body, similar to Ezio.
Prepping the body parts
Although I really don’t consider myself being good at drawing at all, I do use paper and pen a lot in order to plan, even if I may be the only one who understands what I’m writing, haha. Here’s one of my more decent sketches, kind of labeling the moving parts so that I know how to split up Ezio’s art.
From the high-res flat image of the sprite, this is how I split it up. Because this game was first made for a game design module in our Masters of Digital Media course, the sprite was never planned for animation. Thus, from the painted layers in the original Photoshop file, I had merge some parts, split other parts, and use the brush to fill in parts that overlapped. I had to replicate the shading on those parts as well.
Photoshop’s Puppet Warp for moving the limbs
Around this time that I started working on the front animation, my friend Tom (who, as mentioned in Part 1, had introduced me to character animation) informed me, on as completely unrelated note, that Illustrator had just introduced puppet warp. Which reminded me that there was such a feature in Photoshop too. Feeling slightly dumb that I forgot about it earlier, I tested it out on Ezio’s limbs. Definitely much faster than using Liquify alone.
Note though, that although I bent Ezio’s arm in this example, I removed the bending later on and opted for just a front-back swing as it looks more natural that way.
Photoshop’s Perspective Warp for giving limbs a front-back swing effect
In Photoshop’s menu, right below Puppet Warp was Perspective Warp. I had never heard of the tool before, but it sounded like what I needed, so took it for a spin. Surprisingly, it was exactly what I wanted! The little sample video given within Photoshop used it to place a building into an existing image, but it also works perfectly well in making Ezio’s limbs look like they were moving front and back.
‘Spritifying’ the Animation
Using a combination of rotation, liquify, puppet warp and perspective warp, I produced the 15 frames, and put them into a sprite sheet as usual.
Back walk cycle
Using a very similar method to the front cycle, and matching the timing of the movement to the frontal walk, I created the back walk cycle with the same tools.
Ezio’s full animation on all sides looks like this in the game:
In Part 3 of this series, I will be writing about how I combined my 15 Photoshop files into 1 file using Photoshop’s Frame Animation, and how I handled the movement of cloth that is used for Elia, the girl sprite in the game.
