Getting Animated - HTML5 Mobile Game Development - page 321

With the Canvas tag's transforms, however, this functionality can easily be added to a stage using a compon-
ent you can call viewport . The viewport component can have a few methods to allow a game to adjust the
center of the viewport as well as add a sprite to follow, which means to center on the screen at all times.
This component ties into the step event to update the viewport position and then the predraw and draw
events to wrap all the rendering calls in the appropriate saves, transforms, and restores based on the state of the
viewport.
Add the code for the viewport from Listing 16-6 to the bottom of the quintus_anim.js file before the
final closing curly brace.
Listing 16-6: The viewport component
Q.register('viewport',{
added: function() {
this.entity.bind('predraw',this,'predraw');
this.entity.bind('draw',this,'postdraw');
this.x = 0,
this.y = 0;
this.centerX = Q.width/2;
this.centerY = Q.height/2;
this.scale = 1;
},
extend: {
follow: function(sprite) {
this.unbind('step',this.viewport);
this.viewport.following = sprite;
this.bind('step',this.viewport,'follow');
this.viewport.follow();
},
unfollow: function() {
this.unbind('step',this.viewport);
},
centerOn: function(x,y) {
this.viewport.centerOn(x,y);
}
},
follow: function() {
this.centerOn(this.following.p.x + this.following.p.w/2,
this.following.p.y + this.following.p.h/2);
},
centerOn: function(x,y) {
this.centerX = x;
this.centerY = y;
this.x = this.centerX - Q.width / 2 / this.scale;