Overview

This tutorial will dive into the basics of animating a stylized, pixelated fire!

The concept of ‘fire’ gets very complex, especially when overlooked variables such as fuel source, intensity, wind, style, etc… are considered. So this tutorial will briefly go over the general concepts to help you get started & practicing right away.

Before we start, you can download the .ase files (Aseprite) and .gif files to follow along the tutorial. Lets goo

Basic shading and coloring


1. Choosing colors

  • 3 Colors will be primary core colors that have distinct hue and luminosity values.
  • The other 2 colors will act as an intermediary for the 3 core colors. 

2. Drawing the silhouette

  • Draw the silhouette starting with the darkest tone.
  • When drawing the shapes, experiment with rounded inside shapes mixed with pointy, jagged exterior shapes. (The topic of fire shapes is deep in itself. A link to it will be here once it’s out.)

3. Coloring using Core colors

  • Once you’re satisfied with the overall shape, start shading the interior using the 3 core colors. I like to pretend I’m drawing a topography map when shading. Pretend the brighter colors are the peaks of the mountains of your map. This means the surface area of the color will diminish as it gets brighter.


4. Rendering final image

  • Render the final sprite using the remaining 2 colors. In the example image above, the 4th box has arrows pointing to the remaining 2 colors. This step is primarily up to interpretation since it requires alot of detailed work. Just make sure to avoid using parallel patterns because they make the sprite look flat & boring. Mix in random curves, gaps and edges when shading.. have fun with it!

Animating the silhouette

1. Randomized Squashed & Stretch

  • Fire wavers in a staccato like rhythm. (A song with notes separated from the others). This pattern is what gives fire its aggressive, raging feel. Without it, the animation feels more like a fluid than a flame.


2. Gravity

  • Fire is pushed upwards by its own intense heat. The hotter it is, the quicker it travels. So as the flame travels further away from its base, it slows down. Imagining the slow down as a force of gravity rather than the actual heat makes it easier to animate (imo). 
  • As the flame particles rise up, make sure to shrink the size proportional to its speed. This correlation makes the animation feel more uniform. But as always, try out different styles to see what works for you!

3. Alternating Pattern

  • Animations that loop smoothly follow patterns. Boring. Animations that are fun to look at have overlapping patterns that coincide with one another. 
  • In our example, we move our flames upward in an alternating pattern. This creates an interesting pattern that gives our flame some personality. If both sides of the flame were to move in parallel, the animation would look too simple, aka boring! 

4. Floaty Particles (Embers)

  • Particles help convey secondary motion to an animation- they are often the byproduct of an effect.
  • You can get creative here by experimenting with the particle’s acceleration, dissipation, change in color, and glow. Find a style that best suits your animation. Go wild with it.

Conclusion

Animation can get tedious but seeing your images come to life makes it all worth it.

Please have fun experimenting with different styles & methods because progress will be PAINFULLY SLOWWW. I’m rooting for you!

Thank you for reading. Hope to see you on the next one!

Categories: FIREGIF tutorialTutorial

jasontomlee

jasontomlee

I'm an indie-gamedev specializing in 2d Animation & VFX. I work on LearnIndie to help other creatives create & learn awesome things.

0 Comments

Leave a Reply