arttutorialsanimated fire

This tutorial is a simple step-by-step guide and describes the process used to create the animated fire sprite seen below.

Step 1 : Start with a basic layout showing the 6 frames ready for animating.

I tend to colour the background of each alternate frame with a different colour to help with pixel positions.

Step 2 : In our example, the fire will be made from 3 main flames which will rise upwards. So, within each frame create 3 vertical guidelines; these will be used to help the alignment of the flames of the fire.

Step 3 : Next, take time to create 'marker' dots which will form the basis of the animation. These dots will be used to align the tips of the flames of the fire. Make sure these animate upwards in each frame.

Step 4 : Draw the flames of the fire using the marker dots as a guide. Add a bit of variety to the movement of the flames.

Step 5 : Remove the guides, as they will no longer be needed. The fire now looks basic, but the hard part of actually animating it has already been done.

Step 6 : Use a simple 'gradient fill' to add colour variation to the flames.

Step 7 : Add more flames at the base of the fire. These can be fairly random shapes, but keep the movement between frames down to a minimum (to allow for a smoother animation).

Step 8 : Continue to add more layers of flames to the base of the fire...

Final image

I've also added a few pixels to represent the hot embers rising in the heat. It's a very simple looping animation but I think it's very effective.

animated fire

I don't use any complex animation packages to animate my sprites; I prefer to use the old school approach using Photoshop to draw the frames by hand.

The final animated sprite is 32x64 pixels in size and animates over 6 frames.

To create animated sprites, I favour creating the sequence of animated frames as a 'strip'. This way I can see all the frames in one image.

Good luck.