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:
\$\begingroup\$
\$\endgroup\$
7
-
\$\begingroup\$ any particular reason sprites are out of the question? \$\endgroup\$– JimmyAug 1, 2012 at 1:56
-
10\$\begingroup\$ flip the image horizontally over and over. poof. animated. \$\endgroup\$– PlayDeezGamesAug 1, 2012 at 3:03
-
\$\begingroup\$ @Jimmy, I think he's curious about writing a particle engine \$\endgroup\$– John McDonaldAug 1, 2012 at 3:07
-
2\$\begingroup\$ @PlayDeezGames best flippin' answer I've read all week. +1 \$\endgroup\$– Patrick HughesAug 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\$– AbstractChaosAug 1, 2012 at 9:58
|
Show 2 more comments
1 Answer
\$\begingroup\$
\$\endgroup\$
4
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, 2012 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\$– ràmäyácAug 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