How would you code a simple "8 bit fire torch" (just one, nothing else to worry about on screen), without using any sprites?

For instance, how would you "animate" a torch that looks like this one:

retro fire place

  • \$\begingroup\$ any particular reason sprites are out of the question? \$\endgroup\$
    – Jimmy
    Aug 1, 2012 at 1:56
  • 10
    \$\begingroup\$ flip the image horizontally over and over. poof. animated. \$\endgroup\$ Aug 1, 2012 at 3:03
  • \$\begingroup\$ @Jimmy, I think he's curious about writing a particle engine \$\endgroup\$ Aug 1, 2012 at 3:07
  • 2
    \$\begingroup\$ @PlayDeezGames best flippin' answer I've read all week. +1 \$\endgroup\$ Aug 1, 2012 at 3:44
  • \$\begingroup\$ @JohnMcDonald I thought even particle systems used sprites? I would say limiting yourself to not using sprites only means you will be drawing "sprites" at runtime \$\endgroup\$ Aug 1, 2012 at 9:58

1 Answer 1


You could try the old school fire effect.

Let's say you store an 8-bit temperature value for each of your pixels. At each update:

  1. Feed the bottom line with random "hot" pixels (e.g. 200-256).

  2. For the others lines, all the way up:

    • Each pixel gets a new temperature from the pixel below
    • Times a random decay factor
  3. Pick your pixel colors from an 8-bit palette with:

    • 256 = hot, white pixels
    • 0 = cold, black pixels
    • Shades of yellow, orange and red in between

See this blog post for a Javascript implementation. And this for a Processing demo.

Some variants:

  • Make the middle values hotter on the bottom line (e.g. with a Gauss curve)
  • Get a mean of the pixels below instead of just one of them
  • Play around with this pixel lookup, try to balance it with some "wind" factor, etc.
  • \$\begingroup\$ Great old-skool approach! \$\endgroup\$
    – teodron
    Aug 1, 2012 at 7:37
  • \$\begingroup\$ The "problem" with this approach is that it makes a smooth fire, and I want it to be like it's coming from the same "8bit flame" (pixelated). But thank you for your answer, I'll see what I can come up with :) \$\endgroup\$
    – ràmäyác
    Aug 1, 2012 at 17:40
  • 2
    \$\begingroup\$ You could reduce the color space compared to the temperature space. E.g. 256 temperatures mapped to only 8 colors. Also, you could render 1 "real pixel" for an area of NxN "simulation pixels". \$\endgroup\$ Aug 1, 2012 at 17:47
  • \$\begingroup\$ A good search keyword for approaches like this is "cellular automaton." \$\endgroup\$ Aug 8, 2012 at 2:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .