Creating an Animated Sprite

In this post I’m going to show you the basics of animating a simple sprite, in this example a medieval knight. All of this was done in Photoshop CS4, so I’ll be referring to that in the steps outlined.

1. Create a background

It’s important when making your sprite to see how it will look in the game, so it’s worth creating it on a background very similar to the one it’s going to appear on in the finished product, as this will affect your choice of colours and let you see how visible your sprite will be.

2. Make a temporary set of frameholders

Work out beforehand what space you have to work with. In my example I drew a grid on a separate layer so that I could see exactly what space I had to work with. It’s important that your frames are each of dimensions that are a multiple of four in order for your sprites to be compatible with certain types of rendering surfaces. This way sprites can be packaged into memory (ask your coder!).

3. Basic shapes

Now we can get down to the fun stuff! In a spare frame, I drew the knight using basic shapes, until I got a basic unshaded sprite of him standing as viewed from above, as shown in the following image. I’ve enlarged it to three times normal size for the purposes of this tutorial. I made the separate shapes using anti-aliased primitives in Photoshop, and every different element is on a separate layer. This made him easier to animate later.

4. Stroking

I then applied 1px strokes of various colours to the different shapes, mainly dark colours so as to show up the relatively light colours better.

5. Shading and details

Now we can bring this guy to life! I used dodge and burn to shade the surfaces, and then applied some red to give him a Templar colour scheme.

6. Creating the animation frames

Now, we can get some movement going. The first standing image is not going to be used in the final animation, unless you need such an image in your final animation. For this tutorial I’ve gone for a simple 3-frame animation, with the standing frame shown alongside for reference. I set up the knight’s position in each frame by transforming and rotating the different elements until I was satisfied.

7. Animating

The animation itself will obviously be handled by the game engine, but I made this animated gif in Photoshop CS4 to give you an idea. For the finished in-game sprite, I would remove the frames layer and the background, and then save the whole thing as a transparent 128-bit PNG file.

That’s it! This is just a very simple example of what’s possible – with enough time, I wish you all luck with your own elaborate creations!