Having just finished a basic particle engine I thought I would quickly use this as a basis to make a smoke / fog effect.

How?

Step 1 – Make your sprite

A computer graphs the smoke effect image which is used along with the particle is commonly known as a sprite. I made the sprite using GIMP which is free to use. I created a transparent png and then used a few brushes and the airbrush with a grey colour, nice and easy. The most important thing here is to not draw all the way to the edges, remember there are no straight lines in nature and we wnat this to look natural. If you do this will cause a straight line on the sprite down the edge, no matter how feint it is generally quite noticeable when they are blended together.


Step 2 – Load the sprite and render it

Ultimately there is not much too it, I used the basic particle engine as the start point for this. Finished code here

Notable differences

  • In the particle draw function if the image has been set I draw that instead of the circle as before
  • The image is loaded asynchronously so before setting the source, the instructions of what to do when loaded need to be specified. In this scenario we are just going to go through all the particles and set the image on them.

Notes

Quite a log can be achieved using images in particle engines, these are more commonly known as sprites in this context. Also when using sprites you can get away with using fewer particles to create more complex visual effects. Here is a version of the smoke effect while also drawing the centre point of the particle so show how many particles are on screen.

That’s it

As usual feel free to make requests for what you would like to see on the backlog.