Getting Animated - HTML5 Mobile Game Development - page 320

Q.compileSheets('sprites.png','sprites.json');
Q.animations('player', {
run_right: { frames: _.range(7,-1,-1), rate: 1/10},
run_left: { frames: _.range(0,8), rate:1/10 },
fire: { frames: [8,9,10,8], next: 'stand', rate: 1/30 },
stand: { frames: [8], rate: 1/5 }
});
Q.stageScene("level");
});
});
The player class matches the one from the beginning of the chapter in most ways. It defines a Q.Player
sprite controlled by the player and animated based on the actions the player takes. It also logs a few events when
animations finish. In a real game these events could be used to actually trigger a bullet firing or deplete a user's
stamina.
The block class grabs an item from the spritesheet to display a crate. Next, the scene “level” is defined to set
up a Player object and a couple of blocks for reference. Because the player should be in front of everything
else, you also need to add a sort option onto the stage.
Finally, the Q.load method loads the assets, compiles the spritesheets and then creates the animations. The
animations could easily be loaded via a .json file if you want to separate them from the game logic or generate
them automatically. (The background images will be used later in this chapter.)
If you fire up this example in a browser or mobile device, you can walk the man around a static, white-back-
ground area relative to a couple of blocks, as shown in Figure 16-1 .
Figure 16-1: The walking man.
Adding a Canvas Viewport
SVG made the engine's life easy to add in a camera; the built-in viewport attribute enables you to control the
viewport of the SVG element and act as a camera on the action.