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 '12 at 1:56
  • 10
    \$\begingroup\$ flip the image horizontally over and over. poof. animated. \$\endgroup\$ Aug 1 '12 at 3:03
  • \$\begingroup\$ @Jimmy, I think he's curious about writing a particle engine \$\endgroup\$ Aug 1 '12 at 3:07
  • 2
    \$\begingroup\$ @PlayDeezGames best flippin' answer I've read all week. +1 \$\endgroup\$ Aug 1 '12 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 '12 at 9:58

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 '12 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\$ Aug 1 '12 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 '12 at 17:47
  • \$\begingroup\$ A good search keyword for approaches like this is "cellular automaton." \$\endgroup\$ Aug 8 '12 at 2:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.