Game Project: Fakezee - Beginning HTML5 Games with CreateJS - page 140

Setting Up the Stage and Preloader
The init function is used to set up the stage. Unlike other examples, you won't be initializing the game itself at this
point. The game initialization will begin after a few setup functions are first complete, and are kicked off by the init
function (see Listing 7-6).
Listing 7-6. Stage and Preload Setup
function init() {
canvas = document.getElementById('canvas');
stage = new createjs.Stage(canvas);
createjs.Ticker.setFPS(60);
createjs.Ticker.on('tick', stage);
preload();
}
function preload() {
queue = new createjs.LoadQueue();
queue.addEventListener('complete', setupSpritesheet);
queue.loadManifest([
{id:"fakezeeSpritesheet", src:"img/fakezee.png"},
{id:"fakezeeSpritesheetData", src:"js/fakezee.json "}
]);
}
The canvas element is stored away so you can access the stage's size when positioning game elements. The stage
is then created using this value, and the ticker is set up to run 60 frames per second.
The nature of Fakezee is low action and turn-based, so there is no need to set up an update/render cycle. Because
of this, the shortcut for the ticker can be used to update the stage.
createjs.Ticker.on('tick', stage);
Finally, the preload function is called. Once all files are loaded the SpriteSheet object is set up in the
setUpSpritesheet function.
Setting Up the Sprite Sheet
As you saw earlier, there are quite a few sprites contained in the sprite sheet that was created for Fakezee. This one and
only SpriteSheet object will be used for all graphics, and is created next in the setUpSpritesheet function, shown
in Listing 7-7.
Listing 7-7. The Game's Single Sprite Sheet Created from Loaded Data
function setupSpritesheet() {
spritesheet = new createjs.SpriteSheetqueue.getResult('fakezeeSpritesheetData');
initGame();
}
The spritesheet game variable is created and will be available for creating all sprites throughout the game.
Finally, the initGame function is called and will initialize the game.