/* attempt to deal with prototype, bootstrap, jquery conflicts */ /* for dropdown menus */

Jump to content

Simple Fire Effect Simple Fire Effect

fire let' explain palette arrays size bottom
Older article using a paletted technique in DOS.

4: Adsense

In this article I'll try to explain how to do real-time fire by simulating the structure of flames. I'll explain the method for "8-Bit-Indexed-Color-Mode" or better: VGA mode 13h (320x200x256). But once you understood this, it shouldn't be hard to port this to other graphic-modes. I learned it from a book 1 a few weeks ago, but I think this effect was originally invented by JARE of Iguana in 1993. This effect is so old and well known that I think everybody should know how it works ;)

But before we're going to talk about the algorithm we have to define two 2d-arrays [x,y] with equal sizes. Let's call them Buffer1 and Buffer2. The size of those arrays depends on the size you want to have the fire at (e.g. 320x200 = 64000 bytes).

The next thing we need to define is a palette with gradient colors like black-orange-white (0-255) (but every other palette is also possible). This is IMHO the hardest part ... to create a good palette ;)

Let's take a closer look at the structure of a flame:
  • Fire is constantly moving up
  • It's hot at the bottom (white) and cools down at the top (black)
  • Fire doesn't look pixelated but smoothed
  • Sometimes we see some hot sparks/spots
Okay that should be enough ;) To create a nice fire-clone on the screen now, we need to do 3 steps in a loop:
  • Update the fire
  • Scroll fire up and smooth it
  • Visualize fire (copy to VGA) and swap arrays
I'm going to explain each step:

Step 1

Put some coal on the ground which should be burned: Fill the bottom of Buffer1 with a value between, let's say, 100-150 (white/yellow) ... play around with this!

for x <- 0 to 319
  Buffer1 [x , 198] = random_value (100-150)
  Buffer1 [x , 199] = random_value (100-150)

In this case above I painted the last two lines (198 & 199) but this could also have been 1 or ? lines. If you want to have some additional big sparks/hotspots then put some (10-50) big blocks of 9 pixels at the bottom with color 255 (bright white). It'll take more time till they fade out and so they go higher than the normal flames/sparks/spots created above:

for x <- 0 to random_value (10-50)
  Buffer1 [x-1,197] = 255
  Buffer1 [x  ,197] = 255
  Buffer1 [x+1,197] = 255
  Buffer1 [x-1,198] = 255
  Buffer1 [x  ,198] = 255
  Buffer1 [x+1,198] = 255
  Buffer1 [x-1,199] = 255
  Buffer1 [x  ,199] = 255
  Buffer1 [x+1,199] = 255

This will create a few 3x3 squares of bright white pixels. Okay, this was step one and now we know how to do the white ground of the fire and hotspots. The rest will be done in ...

Step 2

Now ... to move the fire up we will have to copy each pixel to the line above. To cool the fire down at the top we just decrement the value of each pixel before we move it up. But if we did only this two steps the fire would look very pixelated ... one couldn't even say "fire" to it ;) What we are doing to let it look more realistic is smoothing: Instead of copying the decremented value of each pixel to the line above, we copy the average value of the surrounding pixels to the line above (decremented by one of course - to cool down). Sounds confusing ?!? Okay let me explain it. If we only scrolled the fire up and cooled it down it would look like this: Attention: the value of the pixel will be read from Buffer1 but written to Buffer2! Otherwise it could look a little bit crazy (or at least it won't be the effect we want to see) %-)

for x <- 0 to 319
  for y <- 1 to 199
    Buffer2 [x,y-1] = Buffer1 [x,y] - 1

To smooth the flames, we take the average value of the 4 surrounding pixels (left, right, above, under) and decrement this value...we don't even need/want the value of the center-pixel:

Notice: you can also take the 8 surrounding pixels (upper left, upper, upper, right, left,...)

for x <- 0 to 319 {
  for y <- 1 to 199 {
    Buffer2 [x,y-1] = (Buffer1 [x-1,y] + Buffer1 [x+1,y]
                    + Buffer1 [x,y-1] + Buffer1 [x,y+1]) / 4 - 1

One bug remains if the average value is zero: if you decrement it know, you'll get the value 255! So before you decrement it, you should check for zero first ! If you don't do it, it'll look ugly !

Step 3

Know you have to copy Buffer2 to the VGA memory and then you should copy Buffer2 into Buffer1 so that this will be the destination array in the next loop ! Notice: to copy Buffer2 into Buffer1 it's sufficient to swap the memory-addresses of the 2 arrays (you should have used two virtual screens instead of normal arrays and those buffers should be accessed through direct memory access (SEGMENT : INDEX), now just swap the segment addresses... if you don't understand it or have problems with this, go and read Denthor's Tutorials in the graphics section (Virtual screens)).

I hope this article could help you!


[1] PC UNDERGROUND, Data Becker, ISBN: 3-8158-1185-6 (german)


Note: GameDev.net moderates article comments.