Professional HTML5 Mobile Game Development

Going Parallax

Parallax scrolling is a technique used to give the appearance of depth in a 2-D scrolling game by having different background layers scrolling at different speeds. For example, if you have a sky layer scrolling at a slower speed than a mountain layer, it can give the appearance, at a simplistic level, that the sky is farther away than the mountains.

To put this into the engine, a new sprite called the Repeater must be added. This sprite works hand-in-hand with the just-defined viewport component to allow some extra background elements. It works by repeating itself in either the x and y direction or in one individual direction, and stays in a consistent spot on the screen. Repeating in one direction is useful for side-scrolling or top-scrolling games that have a background that repeats only in a single direction.

Add the Repeater sprite in Listing 16-7 to the bottom of quintus_anim.js.

Listing 16-7: The repeater sprite

 Q.Repeater = Q.Sprite.extend({ init: function(props) { this._super(_(props).defaults({ speedX: 1, speedY: 1, repeatY: true, repeatX: true })); this.p.repeatW = this.p.repeatW || this.p.w; this.p.repeatH = this.p.repeatH || this.p.h; }, draw: function(ctx) { var p = this.p, asset = this.asset(), sheet = this.sheet(), scale = this.parent.viewport.scale, viewX = this.parent.viewport.x, viewY = this.parent.viewport.y, offsetX = p.x + viewX * this.p.speedX, offsetY = p.y + viewY * this.p.speedY, curX, curY, startX; if(p.repeatX) { curX = Math.floor(-offsetX ...