Using and Managing Bitmap Images - Beginning HTML5 Games with CreateJS - page 81

Listing 5-8. Creating an Interactive Mask to Create an X-ray Effect
var stage;
// onload
function init() {
stage = new createjs.Stage('canvas');
buildBears();
startGame();
}
function buildBears() {
var bear = new createjs.Bitmap('img/bear.png');
var bearUnder = new createjs.Bitmap('img/bearUnder.png');
var mask = new createjs.Shape(new createjs.Graphics().drawCircle(0, 0, 50));
bearUnder.mask = mask;
stage.addChild(mask,bear, bearUnder);
mask.addEventListener('tick', function (e) {
e.currentTarget.x = stage.mouseX;
e.currentTarget.y = stage.mouseY;
})
}
function startGame() {
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", function (e) {
stage.update();
});
}
In this example, two bear graphics are stacked directly on top of each other. The skeleton version is laid on top so
it can be masked, which will reveal a small portion and give it the illusion of an x-ray feature. The event tick can be
used on any display object to tap into the game's ticker. In this example, it is being used to update the position of the
mask to match the mouse pointer. Figure 5-7 shows this feature in action.