Particle Systems - HTML5 Games Most Wanted - page 122

You can see the result of this change in fire.1.html . It is already looking much better. There is still a
noticeable popping of the flames as they reach their end of life. We can improve this by slowly fading
them out.
Fading out of existence
To make the particles fade out smoothly, we will increase their transparency as they get older. To do this,
we add an optional parameter called fade to the renderer. The value of the fade parameter is the time it
takes to fade out the particles. Usually this is equal to maxAge .
function renderCanvasImage(ctx, particles , fade ){
for(var i = 0; i < particles.length; i++) {
var particle = particles[i];
ctx.save();
if(fade){
ctx.globalAlpha *= (fade-particle.age)/fade;
}
ctx.translate(particle.position.x, particle.position.y);
ctx.rotate(particle.angle);
ctx.drawImage(particle.image, -particle.image.width/2, -particle.image.height/2);
ctx.restore();
}
}
When we now define the fade parameter in our fire main loop, we will get a nice and cosy fire.
renderCanvasImage(ctx, system.particles, 5);
You can see, the final result in fire.2.html . Now it's your turn to tweak the fire. How about changing the
color of the flames or creating a fireball by removing the lift? Note that the fire effect we have created in
this section is very high fidelity. It could make a nice prop for a menu screen or a demo but it would
probably use up too much of the precious computing and drawing resources in a real game. You can scale
this fire down for a game by using fewer and smaller particles.
Smoke
Smoke is very similar to fire. In fact, the forces we use to simulate smoke are the same. We just need to
tweak the values a bit and create some new textures (see Figure 6-6). To make this a bit more interesting,
we will emit the smoke at the cursor location.