Professional HTML5 Mobile Game Development

Adding Sprites

With sprite sheets defined, the next task is to create the sprite object. Because sprites are important to Quintus and games in general, the actual sprite class is most likely going to come as a bit of a surprise: It clocks in at fewer than 40 lines and doesn’t have a lot of built-in functionality. The reason it doesn’t have all that much going on is that most of the important functionality has already been built and resides elsewhere: Events are handled by Evented, components are handled by GameObject, and graphics are handled by assets and SpriteSheet.

This means that all that’s left for the sprite class to do is tie all these pieces together into a single package. The sprite class built in this chapter will be called Sprite. Chapter 13, “Crafting a CSS3 RPG,” discusses a DomSprite class which inherits from Sprite that you’ll use when you build a game with HTML and CSS3.

Writing the Sprite Class

Add the sprite code from Listing 11-4 into the quintus_sprites.js file before the final closing curly brace.

Listing 11-4: The Sprite class

 // Properties: // x // y // z - sort order // sheet or asset // frame Q.Sprite = Q.GameObject.extend({ init: function(props) { this.p = _({ x: 0, y: 0, z: 0, frame: 0, type: 0 }).extend(props||{}); if((!this.p.w || !this.p.h)) { if(this.asset()) { this.p.w = this.p.w || this.asset().width; this.p.h = this.p.h || this.asset().height; } else if(this.sheet()) { this.p.w = this.p.w || this.sheet().tilew; this.p.h = this.p.h || this.sheet().tileh; ...