2D Character Animation Part 3: Photoshop Frame Animation
This is Part 3 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 animated the side view of a character by animating its skeleton first, then traced the positions with the character art. In part 2, I animated the front and back views using Photoshop’s puppet and perspective warps. In both parts, I ended up with 15 Photoshop files, which made it very tedious to make changes and to test how the animations look: I had to export 15 images and then combine them into an animation.
In this part 3, I am writing about a way that I found to combine these 15 files into one, using Photoshop’s Frame Animation and layer groups.
The character I will be animating is sweet Elia, our heroine in The Last Crystal game. In addition to similar side, front and back views as Ezio, she wears a cape, which requires a different animation treatment than the arms or legs due to it being light and billowy.
Sprite prep
Similar to Ezio, the first thing I needed to do was to clean up and prepare the sprite for animation. It is the same drill of merging the original file, then cutting by body parts and filling in the overlapping parts, as I’m familiar with doing by now. Since most of the body had been covered by the cape though, I needed a bit more work here in filling in the body.
Animating the body without the cape — Putting every frame in a new Layer Group
First, I started with Elia’s body under the cape, using the Puppet Warp tool and Liquify, as explained in Part 1 and 2 of this series. Animating the body only first would allow me to focus on the cape later on without worrying what would show under the cape.
There is a tweak in the workflow this time though, instead of saving every frame as a new file, I grouped the body parts of each frame into a folder, and duplicated the folder for each frame. This allowed me to lower the transparency of the previous frame and use it as a reference for the next frame.
Using the different layer groups to make a Frame Animation
With all 15 frames created as layer groups in the same file, making and testing the animation is trivial. I opened the Timeline Panel (Window > Timeline), and set a shortcut to add a new frame using my F2 button. (To add shortcuts, go to Edit > Keyboard Shortcuts.) Then, all I had to do was to keep adding new frames and show and hide the relevant layer groups for each frame. This is shown in the video below. (Video speed is unaltered; this is literally how fast it is.)
Animating the cape
With the body done, I put the cape back on. We wanted the cape to have a subtle flutter when she walked. I did this through the Liquify tool to change the shape of the cape. Because the cape is attached at the neck, the movement is more exaggerated near the hem, and less at the neck. Duplicating the layer, lowering its transparency and then modifying the next frame helped in making sure that the movement was smooth from one frame to the next.
Since the cape was lighter, its movement would look slower than the movement of the limbs. Thus, I chose to make the cape move at half the speed of the rest of the sprite, i.e. Frames 1 and 2 of the sprite will have the same cape position, Frames 3 and 4 have the next cape position etc.
The final animation is below. (Please pardon the limited colours of the gif!)
Front and Back view animations
Putting together all the things I have learnt, using Layer Groups, Frame Animation, Liquify, Puppet Warp and Perspective Warp, I made Elia’s front and back animations as well. The back animation was done in a relatively short amount of time, since it was mostly all cape.
And finally, this is how the characters look like in-game. Unfortunately, my screen recorder doesn’t play well with Unity running at the same time, so there’s some lag.
In my animation journey so far, I have learnt how much work it takes: 8 sprite sheets and 6 different views just for the two characters! I definitely have a better appreciation of the work of animators now.
The workflow I have shared is just what I have discovered. There might be better and more efficient ways of working, if you know of them, do share them in the comments!
To get updates on when the game will be released, follow The Last Crystal on Facebook, and sign up for early bird discounts on our website at lastcrystalgame.com. It is a two-player cooperative puzzle game, which will be sure to bring hours of challenge and fun. I’ll be back for more updates on the game’s animation work!
