Professional HTML5 Mobile Game Development

Defining SpriteSheets

Before tackling sprites, the engine is going to add support for sprite sheets. Sprite Sheets, as you’ve seen in previous chapters, allow any number of images to be stored in a single image, making your game quicker to load and animations easier to work with. The sprite sheet functionality ties into the code from Chapter 8, “Running JavaScript on the Command Line,” that generated spritesheets from the command line so you don’t need to spend your time multiplying sprite x and y positions in your head.

Creating a SpriteSheet Class

In this case, a single Sprite Sheet object refers only to a single set of like-sized frames of the same sprite. A single-loaded image asset might be compiled into a number of SpriteSheet objects.

The sprite functionality in Quintus is going to go into its own module. Open up a new file called quintus_sprites.js and place the code from Listing 11-1 into it to define the SpriteSheet class functionality.

Listing 11-1: The Q.SpriteSheet class

Quintus.Sprites = function(Q) { // Create a new sprite sheet // Options: // tilew - tile width // tileh - tile height // w - width of the sprite block // h - height of the sprite block // sx - start x // sy - start y // cols - number of columns per row Q.SpriteSheet = Class.extend({ init: function(name, asset,options) { _.extend(this,{ name: name, asset: asset, w: Q.asset(asset).width, h: Q.asset(asset).height, tilew: 64, tileh: 64, sx: 0, sy: 0 },options); this.cols = this.cols || Math.floor(this.w ...