Creating a Sprite

Creating an animated sprite involves creating the sprite itself (either from a sprite-sheet or a series of images) for simulating movement (e.g., walking) and then creating the code that will move the sprite within the game space according to the player's instructions (via input such as the keyboard).

The sprites I will be using in this demo (and for the most part my game engine) are from Reiner's Tilesets. He has a large collection of tilesets for characters, monsters, buildings, etc., and they are free. Unlike sprite sheets, these are individual bitmaps portraying the sprite in successive positions of locomotion that I layer on top of each other using GIMP.

Serial Sprite Images

Here are the series of sprite images. The originals were in BMP format and had a brownish background color. I changed the images to GIF format (for quicker loading) and changed the background color to RGB(255, 0, 255) (the color I use for transparifying).

Creating the Animation

The next step is animating the sequence of frames using GIMP. Since the originals were in the BMP format, you'd be using those. I simply open the first BMP image and then successively use File->Open as Layer. After all the frames have been layered, you save as a GIF, select "Save as Animation" and then set the frame interval (e.g., 100ms). This can vary depending on the action. For walk or talking I usually set the interval to about 200ms. For running or attack I usually set it to about 50ms.

Since I am not an GIMP expert and I usually botch up this part, I upload the animation to GIF Works. They have free editing tool which I use to transparify the animated GIF. You simply select the animation you want to upload. Select "replace color" from the Edit drop-down box. Select the color you want to use as the replacement. Then select "transparify" from the Edit drop-down box and select that color in the background. Then you can just right-click and "save image as".

Here is the finished sprite. It is a Black Mage in the motion of casting a spell. The actually spell will be a separate GIF animation and Javascript object.

Tip: If you want to save yourself time, instead of going through all the above steps for creating the same animated sprite facing the opposite direction you can simply select Edit->Flip Horizontal and save that animation as well. The drawback is that if the sprite is holding a sword in their right hand while facing right, they will be holding the sword in their left hand when facing left.