Getting Animated - HTML5 Mobile Game Development - page 323

Going Parallax
Parallax scrolling is a technique used to give the appearance of depth in a 2-D scrolling game by having dif-
ferent 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 % p.repeatW);
if(curX > 0) { curX -= p.repeatW; }
} else {
curX = p.x - viewX;
}
if(p.repeatY) {
curY = Math.floor(-offsetY % p.repeatH);
if(curY > 0) { curY -= p.repeatH; }
} else {