Game Development Reference
In-Depth Information
queue.addEventListener("complete", loadComplete);
queue.loadManifest([
{id:"butterfly", src:"images/butterfly.png"},
{id:"woosh", src:"sounds/woosh.mp3"},
{id:"chime", src:"sounds/chime.mp3"}
]);
}
function loadComplete() {
setupStage();
buildButterflies();
}
function setupStage() {
stage = new createjs.Stage(document.getElementById('canvas'));
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", function(){
stage.update();
});
}
function buildButterflies() {
var img = queue.getResult("butterfly");
var i, sound, butterfly;
for (i = 0; i < 3; i++) {
butterfly = new createjs.Bitmap(img);
butterfly.x = i * 200;
stage.addChild(butterfly);
createjs.Tween.get(butterfly).wait(i * 1000).to({y:100}, 1000,
createjs.Ease.quadOut).call(butterflyComplete);
sound = createjs.Sound.play('woosh',createjs.Sound.INTERRUPT_NONE,i * 1000);
}
}
function butterflyComplete(){
stage.removeChild(this);
if(!stage.getNumChildren()){
createjs.Sound.play('chime');
}
}
</script>
</html>
This code calls a function named
init
when the body loads. This begins your preload process, which will then
fire the function
loadComplete
when everything is loaded and ready to go. Before you can start using your assets, your
stage is set up in the
setupStage
function. This process, along with creating a
ticker
to constantly update your stage, is
an important procedure, and will be the first thing I cover in the next chapter.
After the stage is set up, you animate each butterfly, which will then call the
butterflyComplete
function to
remove itself from the stage when its tween is complete. Lastly, when all children have been removed from the stage,
you play a
chime
sound effect.
