Game Development Reference
In-Depth Information
Renderer
The job of the renderer is to visualize all the particles in a system. There can be different renderers for
different targets and rendering techniques. The following are examples of rendering targets:
canvas image
canvas pixel
WebGL
HTML
Different particles might require different renderer implementations to handle additional properties, like
rotation or alpha values. The following is an example of a very simple renderer is the canvas image
renderer:
function renderCanvasImage(ctx, particles, fade){
for(var i = 0; i < particles.length; i++) {
var particle = particles[i];
ctx.save();
ctx.translate(particle.position.x, particle.position.y);
ctx.drawImage(particle.image, -particle.image.width/2, -particle.image.height/2);
ctx.restore();
}
}
System
The ParticleSystem contains all the particles and the forces acting on them. The emitter and renderer are
not part of the ParticleSystem because they are often more tightly-integrated into other parts of the
applications. Particles are often emitted as a result of events in the application. Also, most games already
have some kind of rendering system that can be used. This makes the code for the particle system very
simple, as follows:
function ParticleSystem(){
this.particles = [];
this.forces = [];
}
ParticleSystem.prototype = {
update: function(td) {
var alive = [];
for(var i = 0; i < this.particles.length; i++) {
var particle = this.particles[i];
for(var j = 0; j < this.forces.length; j++) {
var force = this.forces[j];
force(particle, td);
}
if(particle.update(td)){
alive.push(particle);
}
}
 
Search WWH ::




Custom Search