Creating a Simple Fire Effect

I would like to share with all Z-Games.es enthusiasts this mini tutorial, about a popular visual effect that you can use in your applications. I’m talking about a 2D fire effect; you can find implement itin a lot of language, and one simple Google search return a lot of results.

Create a fire effect is easy and the main idea is very simple, select one pixel (starting in the bottom row) get the average of the pixel color from the left, right, upper and lower pixels of the current pixel and changing the color of each pixel above it. Nevertheless there are other variations of this algorithm, but this is the common

​

​To make our version, I create a form that implements the “IRunnable” interface and the “Run” method (then we launch it using a threat object in the entry class, see the method “OnForeground” in “FireEffect” class file). In this method we put all the logic to perform all the color operations, the above figure is translate basically to this code (see “Run” method”) :

The fire[][] table is the buffer used to calculate all fire positions that later you draw in your canvas (I use two canvas object _pCanvas and pCanvas, for implement double buffer technique), and the size of this table is assigned in two constants “screenWidth” and “screenHeight”. And important consideration for my implementation is this: to get a better performance, we don´t draw individual points but we use rectangles of 5 x 5 pixels (constant “pixelization”), any case the logic for calculate the color is the same but in this case we use these groups and any group of 5 x5 has the same color. You can change this and test with other values to adjust performance and pixelization.

Very important is the “Initialize” method, in which we create the color palette that we will use for our effect. The palette is an array of 256 (int) colors (in RGB format), and to get the int value for a specific color, we use the “GetRGB32” method.

We divide our palette in five steps: from black to white passing for red, orange and yellow. If you change all these values, the palette for your fire will be different and you get blue, green, etc. fire.

If you see the above image, you have to buttons to control the intensity of the fire, with “+” button you put more power to your fire and with “-“you quit this power. The intensity of the fire is controlled with a private attribute called “_intensity”, the default value for this is 160 and I think that the best result are if you play with values around 135 and 220.

The code is attach to this article and has a lot of comments and is easy to follow. Enjoy and modify it and let me know your advances.

Bye.

.