HTML5 Canvas [174]
switchGameState(GAME_STATE_TITLE)
}
}
In this function, we first remove the event listener from each loaded item, then add the sounds to our sound pool. Finally, we call the switchGameState() to send the game to the title screen.
Playing sounds
Sounds will be played using the playSound() function from Chapter 7. We will not reprint that function here, but it will be in Example 9-1 where we give the entire set of code for the game. We will call the playSound() function at various instances in our code to play the needed sounds. For example, the createExplode() function presented earlier in this chapter included this line:
playSound(SOUND_EXPLODE,.5);
When we want to play a sound instance from the pool, we call the playSound() function and pass in the constants representing the sound and the volume for the sound. If an instance of the sound is available in the pool, it will be used and the sound will play.
Now, let’s move on to another type of application pool—the object pool.
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, as 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 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 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 than 0. If a particle is available, it will be added to the particles array after its attributes are set. If no particle is available, none will be used. NOTE This functionality can be extended to add a particle as needed to the pool when none