Simple Fire Effect

Older article using a paletted technique in DOS.

July 16, 1999 21.2k views

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 [sup]1[/sup] 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:
1. Update the fire
2. Scroll fire up and smooth it
3. Visualize fire (copy to VGA) and swap arrays
I'm going to explain each step:

[size="5"]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 ...

[size="5"]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 !

[size="5"]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!

[size="3"]Literature

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