O'Reilly logo

Professional HTML5 Mobile Game Development by Pascal Rettig

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required