HTML5 Canvas, 2nd Edition

Pooling Object Instances

We have looked at object pools as they relate to sounds, but we have not applied this concept to our game objects. Object pooling is a technique designed to save processing time, so it is very applicable to an arcade game application such as the one we are building. By pooling object instances, we avoid the sometimes processor-intensive task of creating object instances on the fly during game execution. This is especially applicable to our particle explosions because we create multiple objects on the same frame tick. 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 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 need to add four application scope variables to our game to use pooling for our game particle:

 var particlePool = [];
 var maxParticles = 200;
 var newParticle;
 var tempParticle;

The particlePool array holds the list of particle object instances that are waiting to be used. When createExplode() needs to use a particle, it first sees whether any are available in this array. If one is available, it is popped off the top of the