Extending EaselJS Display Objects - Beginning HTML5 Games with CreateJS - page 194

You've seen this setup before; however, notice that false is passed in as the second parameter for loadManifest .
This is done so it will not immediately start loading. The init method is then called to set up the stage and start the
load (see Listing 8-21).
Listing 8-21. init Function Creates Preloader and Sets Up Stage
function init(){
stage = new createjs.Stage(document.getElementById('canvas'));
createjs.Ticker.on('tick', stage);
stage.enableMouseOver();
preloader = new ui.Preloader('#FFF','#000');
preloader.x = (stage.canvas.width / 2) - (preloader.width / 2);
preloader.y = (stage.canvas.height / 2) - (preloader.height / 2);
stage.addChild(preloader);
queue.addEventListener("complete", initGame);
queue.addEventListener('fileprogress', onFileProgress);
queue.load();
}
function onFileProgress(e) {
preloader.update(e.progress);
}
The stage is created and an instance of Preloader is added to it and positioned. With the stage and
preloader ready, the load is started by calling load on queue , and will call onFileProgress when the overall load
progress changes. This method will update the preloader display object. When all files are loaded, initGame is
called (see Listing 8-22).
Listing 8-22. initGame Function Sets Up Sprite Sheet
function initGame() {
stage.removeChild(preloader);
preloader = null;
spritesheet = new createjs.SpriteSheet({
"images":[queue.getResult("runner")],
"frames":{"regX":0, "height":292, "count":64, "regY":0,
"width":165},
"animations":{"idle":[60], "run":[0, 25], "jump":[31, 60, 'idle']}
});
buildRunner();
buildButtons();
}
Setting Up the Sprite Sheet and Buttons
In initGame , the preloader is removed from the stage and set to null. Next, the sprite sheet object is built. All of the
frames in the sprite sheet image are the same size, so you can take advantage of some of the shortcuts available
when creating your data. The data will be built using the runningMan . png file, located in your Chapter 8 exercise files.
Figure 8-7 displays this sprite sheet image file.