Combining Bitmaps and Sound - HTML5 Canvas - page 464

On a lower-powered platform, such as a handheld device, object pooling can help
increase frame rate.
Object pooling in Geo Blaster Extended
In our game, we will apply the pooling concept to the explosion particles. Of course,
we can extend this concept to rocks, projectiles, saucers, and any other type of object
that requires multiple instances. For this example, though, let's focus on the particles.
As we will see, adding pooling in JavaScript is a relatively simple but powerful
technique.
Adding pooling variables to our game
We will need to add four application scope variables to our game to make use of pooling
for our game particle:
var particlePool = [];
var maxParticles = 200;
var newParticle;
var tempParticle;
The particlePool array will hold the list of particle object instances that are waiting
to be used. When createExplode() needs to use a particle, it will first look to see whether
any are available in this array. If one is available, it will be “popped” off the top of the
particlePool stack and placed in the application scope newParticle variable—which
is a reference to the pooled particle. The createExplode() function will set the properties
of the newParticle , and then “push” it to the end of the existing particles array.
Once a particle's life has been exhausted, the updateParticles() function will splice
the particle from the particles array and push it back into the particlePool array. We
have created the tempParticle reference to alleviate the updateParticles() function's
need to create this instance on each frame tick.
The maxParticles value will be used in a new function called createObjectPools() . We
will call this function in the gameStateInit() state function before we create the sound
and tile sheet loading events.
Let's take a look at the createObjectPools() function now:
function createObjectPools(){
for (var ctr=0;ctr<maxParticles;ctr++){
var newParticle = {};
particlePool.push(newParticle)
}
console.log("particlePool=" + particlePool.length)
}
As you can see, we simply iterate from 0 to 1 less than the maxParticles value, and place
a generic object instance at each element in the pool. When a particle is needed, the
createExplode() function will look to see whether particlePool.length is greater