From the Archives: Ephemeral Dice and Fire Effects

I was going over my archives, and stumbled on a couple of video games I was working on around 2002. There were two visual effects that I liked in particular, and the genesis of each of them had an interesting element of chance, so I thought I would bring them back. The original code was written in a mixture of C and assembly on Windows 95, so it took a little porting, but the concepts in computer graphics haven't changed all that much in the past decade, so the port wasn't that complicated.

 

Dice

I used this effect in an implementation of the game Risk. I wanted to illustrate a roll of dice. The whole game had a kind of ephemeral feel to it, and I wanted the dice to feel that way too. At first, I wanted to cycle through random faces, which would fade out before a new face appeared, but I accidentally committed an off-by-one error, which made the effect look much better.

The way I faded the dice was to cycle through each pixel of the display, read the color value of each pixel, fade the color a little (by making it get a little closer to black – in the original version of the game – or white in this port) and then draw the pixel back on the display, this time with the right color. By mistake, I drew the color one pixel higher than I should have. As a result, the dice not only faded, but also shifted up, which made them look like they were evaporating:

Fire

Another time I wanted to simulate fire in a platform game that I was designing. The fire would come from a torch attached to a cave. The torch was pretty small, but I wanted the fire to look elaborate. And so, I wanted to model three aspects of it:

  • The flame, which has a generally upward shape, broad at the bottom and narrowing towards the top, and which follows a color spectrum consistent with fire (from red to yellow)
  • Sparks, which are visible separately from the flame, also changing in color as they move away from the fire source
  • The fact that the fire make the surrounding portion of the cave brighter

I decided to simulate the motion of 80 light particles, which had a position and a temperature (which defined their color and presence – if a particular got too cool, it would disappear and a new one would appear at the source of the light). In addition to this, I would lighten the cave within a particular radius of the center of the light source. It took me a while to create the flame, but then, quite by chance, I decided to blur each light particle, and realized that doing that pretty much created the flame for me. Come to think about it, it makes sense – the complete flame is just an averaging of the individual light particles.

 

References

  • To see the dice effect on a new page, click here.
  • To see the fire effect on a new page, click here.
  • The source code for the dice effect can be found here.
  • The source code for the fire effect can be found here.