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:
5
\$\begingroup\$
\$\endgroup\$
-
\$\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\$ – PlayDeezGames Aug 1 '12 at 3:03
-
\$\begingroup\$ @Jimmy, I think he's curious about writing a particle engine \$\endgroup\$ – John McDonald Aug 1 '12 at 3:07
-
2\$\begingroup\$ @PlayDeezGames best flippin' answer I've read all week. +1 \$\endgroup\$ – Patrick Hughes 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\$ – AbstractChaos Aug 1 '12 at 9:58
16
\$\begingroup\$
\$\endgroup\$
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:
Feed the bottom line with random "hot" pixels (e.g. 200-256).
For the others lines, all the way up:
- Each pixel gets a new temperature from the pixel below
- Times a random decay factor
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.
answered Aug 1 '12 at 3:29
-
-
\$\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\$ – ramayac 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\$ – Laurent Couvidou Aug 1 '12 at 17:47
-
\$\begingroup\$ A good search keyword for approaches like this is "cellular automaton." \$\endgroup\$ – Gregory Avery-Weir Aug 8 '12 at 2:09
