Game Project: Space Hero - Beginning HTML5 Games with CreateJS - page 269

explosion.x = x - 45;
explosion.y = y - 30;
this.addChild(explosion);
explosion.on('animationend', this.explosionComplete, this, true);
explosion.play();
createjs.Sound.play(game.assets.EXPLOSION);
}
p.explosionComplete = function (e) {
var explosion = e.target;
this.removeChild(explosion);
this.explosionPool.returnSprite(explosion);
}
The single, most important feature that all of these functions share is the utilization of an object pool. When a
bullet, ship, or explosion is needed, it is pulled from the object pool it was pushed into when it was created. When an
enemy is spawned, it is placed at a random horizontal position, slightly above the screen. With the bullets, they are
placed in the center and under the ship that shot it.
When an enemy explosion is spawned during the render process, the coordinates of the ship that caused it were
passed into spawnEnemyExplosion . This is because that ship should be replaced with an explosion sprite in the exact
same position. A little position adjusting is needed because the ship and explosion bounds and shapes are different.
A listener is set on the sprite for when its animation is complete. It is then played, along with an explosion sound.
When the animation is finished, the explosionComplete function is called, which will remove it from the display list
and return it back to the object pool from which it came.
The final process of the game loop is to run some check functions. Among these checks is the evaluation of
collisions. You will be using a third party library for these collision detections. Let's look at this library, and how to
obtain it, before moving into the check functions.
Detecting Pixel-Perfect Collision
Because we are not dealing with simple rectangle shapes in this game, merely checking the rectangle bounds of each
sprite will not do. Because of the complexity that goes into this type of detection, a third party library will be used to
handle the heavy lifting of pixel-perfect collision detection.
A great collision detection library has been written by Olaf Horstmann to work with EaselJS. It's extremely easy
to use once included in your application. To use it, first go to the web site and download it from github.com at
https://github.com/olsn/Collision-Detection-for-EaselJS . Once included in your application, it is used as
follows:
var collision = ndgmr.checkPixelCollision(sprite1, sprite2);
The method will either return an object or the value of false. Checking for collision is as simple as follows:
if(collision){
//collision detected
}
Now that the library is obtained and included in the game, let's move back into the game code and examine the
check functions.