Animating sprites

This week I’ve been churning away at animating the sprites of one of our protagonist. While I got off to a rough start, due to my inexperience in sprite animation, I caught on pretty quickly.

It is quite frustrating, though, since Photoshop handles animation in a very unorthodox way. Let’s compare it to a more conventional animation tool; Adobe Flash.

In Flash you have a timeline that also acts as your list of layers. You add frames to a layer, draw a new image, and you can pick between blank or duplicated key frames, which helps if you want to either draw a new image, or make adjustments to the last one. Then you can also add normal frames. They extend the time the previous key frame remains in view. With these tools, it is easy to keep layers separated, while remaining well sorted and organized.

In Photoshop, you create a new frame, then you either create a new layer, or duplicate a previous one, make your adjustments, then hide the layers you don’t want to be visible. This way, each layer represents a possible element to show in the frame, but you do not have multiple layers of frames. This way your layers easily get disorganized, since each frame tends to be its own layer. It is quite messy.

The issue is that I really want some of the more advanced drawing tools in Photoshop, while I want a robust animation system like that of Flash. But Photoshop lacks the animation capabilities of Flash, while Flash can not even come close to the prowess of the art tools in Photoshop.

ss+(2016-02-11+at+01.09.11)

Here is a simplified illustration of the issues I’ve been having, using already finished sprites, instead of multiple layers per element.

Despite these issues, I did manage to get into a flow when animating in Photoshop, and the animations are coming along quite well. As I do it more and more, I’m sure I will find ways to organize my layers better, as I get faster at it.

Since we chose to have our characters flying instead of running, I was able to avoid making a walk cycle. Instead I only have to make their cosmetics and hair move in the wind. Each character sprite will be made up of the same amount of sprites;

  • 3 idle pose sprites
  • 4 leaning sprites for transitions into moving in a direction
  • 3 sprites each for left and right strafing, as well as full lean back and forward tilting
  • 1 sprite for taking damage
  • 4 sprites for the death animation

That is a total of 24 sprites per character, which feels very doable, especially considering I am able to re-use elements from previous sprites, such as hip protection, bracers and scarves.

Leave a comment