HTML and CSS Reference
In-Depth Information
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
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
added: function() {
this.x = 0,
this.y = 0;
this.centerX = Q.width/2;
this.centerY = Q.height/2;
this.scale = 1;
extend: {
follow: function(sprite) {
this.viewport.following = sprite;
unfollow: function() {
centerOn: function(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;
Search WWH ::

Custom Search