Blog: Making a sprite animation

Hiya! 

This week, I'm going to show you how I make sprites for DID Quest (working title). Do note that this should not be considered a tutorial, because I'm far from experienced and there is still a lot I can learn.

Before I even start drawing anything, I have to establish a number of things. I knew the game would be viewed from the top-down, as it was first conceived as a Zelda-style action RPG. However, looking at classic top-down games, the sprites are often too small to make out a lot of detail when it comes to displaying emotions and bondage, which are important in a DID-themed game.

(Above: A DID scene in Final Fantasy VI for SNES.)

On the other hand, the bigger the sprites are, the more needs to be stipulated on, and everything else in the game needs to be sized up accordingly, including background tiles, which would be prohibitive in an RPG-sized game.

I decided that the sprites would at least be big enough for me to start with a hand-drawn base, so with the help of old game screenshots and 3D reference material provided by my fellow developer HazyFlame, I made this sketch:

We knew that Rain should look badass but also display sex appeal, so by giving her a one-handed sword stance we could have her torso facing the screen and put emphasis on her chest. There's science in being a pervert!

This hand-drawn sketch was shrunk down and imported into Aseprite, a graphics editor specially designed for pixel art. I traced over the picture with colored outlines and then filled in and shaded the entire thing much like I would do with a regular picture:

The biggest difference with drawing a regular picture is that at this size, every pixel has massive consequences for the final result. On top of that, you often don't have the space to show every little detail, so a lot of things have to be implied with very careful use of color. 

This first attempt was okay, but the face and hair weren't quite the right shape. Additionally, Aseprite doesn't have an easy way to flip a drawing, so I had no idea that there were symmetry issues until I saw the sprite in-game. As I was working on other animations in Rain's sprite set, I tweaked this base sprite:

The hair and face weren't changed that much if you compare the pixels, but the resulting shapes are very different. Her hair looks fuller, and her face was rounded out--although she no longer has a prominent nose, she gets a much better jaw in return.

Her chest was also altered for better symmetry, and of course her leg was redrawn. This is one of those things that looks okay until you see it flipped, and since you will see it flipped every time you press left on your controller, it really needed adjusting.

But so far, this is all static. We're here to talk about animation, so let's get to it!

When I start a new animation, I usually go back to the hand-drawn file and draw keyframes on top of the original pose. These are the really important parts of the movement. In the case of this stabbing animation, the most important parts are the moment Rain has the sword pulled back as far as it will go, and the resulting stab. Once again, these drawings were shrunk down and traced over in Aseprite:

At this stage, it's not necessary to have perfectly cleaned sprites--the movement is what's important, so the traced lines are very rough. Next, I started figuring out the timing by duplicating these frames a few times. I also drew in a little indicator of which frame we're on at the moment so that I can see exactly what's going on when the result is played back:

We start on the base sprite (which is not technically part of this animation, but that is always where we start and end in the game). Rain takes one frame to start pulling back before ending up in the first keyframe pose, which she holds for 3 frames. Then she pushes forward for one frame and ends up in the second keyframe pose, which she holds for another 3 frames. Finally, she transitions back to the base sprite with one frame.

Now, those "in-between" poses don't exist yet and need to be drawn next to create a smoother animation. And yes, they really are called in-between frames.

I sketch these out really roughly with the aid of an Aseprite feature called "onion skin", which layers translucent versions of the previous and next frame under the current one, so you can see the transition. When animators used to work on paper, they would have each frame on a separate sheet and flip back and forth a lot to do this.

This is the animation with the rough in-betweens added. We've also upgraded to the better base sprite and let the stab pose linger for an extra frame to give a bit more weight to the attack.

Now it's time for clean-up. All of the frames need to be nicely outlined and shaded, on top of making sure the shapes of everything that makes up Rain stay consistent. It's easy for parts of her hair to change length or thickness from frame to frame, or for her baggy pants to make strange movements that look okay in a single frame but create jittery movement.

Eventually, we end up with this result:

This is pretty good, but not quite right yet. For one, Rain's side-ponytail makes a rather abrupt fall once the stab keyframe goes away. On top of that, all these fancy in-between frames have made the animation lose a little power, since Rain makes more of a visible motion from holding the sword back to holding it forward.

The ponytail is a simple matter of adjusting the shape for the last frame. Thinking about the physics, the top of the ponytail is attached to her head and doesn't really move, while the bottom is very light. Therefore, the middle of the ponytail will sway first with the bottom trailing behind. This is how the frame was adjusted:

As for the perceived reduction in power, one technique that can be used to add a sense of speed and power back is to create motion blur. 

On two of the frames, I added a smear effect to the arm and sword by taking the colors of the pixels near the front and drawing horizontal lines backwards from there. I also reduced the visibility of the outlines. This is actually the first time I've ever drawn an effect like this, so it's probably not perfect... but let's see the result, shall we?

Looks pretty weighty, doesn't it? I'm sure I'll be adjusting this a bit more throughout the development process, but I'm very proud of how it's come out.

I hope you enjoyed this look into my animation process! I'm not sure yet what next week's blog will be about, but I'll do my best to come up with something interesting. ^.^

That's all for now. Rosie rollin' out!