Simple Fire Effect
by Adam Parusel

In this article I'll try to explain how to do realtime 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 ¹ a few weeks ago, but I think this effect was originaly 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 arround 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 sourrounding 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-adresses 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 adresses... 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!

Literature

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

Discuss this article in the forums

Date this article was posted to GameDev.net: 7/16/1999
(Note that this date does not necessarily correspond to the date the article was written)

See Also:
Fire