This demonstrates parallax scrolling using image clip rectangle. Move cursor left/right.
// define our game object triangleActor = gamvas.Actor.extend({ init: function() { var s = gamvas.state.getCurrentState(); this.setFile(s.resource.getImage('triangle.png')); this.setCenter(32, 32); this.rotSpeed = Math.random() * Math.PI - 0.5 * Math.PI; }, draw: function(t) { this._super(t); this.rotate(this.rotSpeed*t); } }); parallaxState = gamvas.State.extend({ init: function() { // load images this.bg = new gamvas.Image(this.resource.getImage('background.jpeg')); this.fg = new gamvas.Image(this.resource.getImage('foreground.png')); // add random game objects for (var i = 0; i < 20; i++) { var act = new triangleActor('actor'+i, Math.random()*1000, Math.random()*480 - 240); this.addActor(act); } this.dim = gamvas.getCanvasDimension(); }, preDraw: function(t) { // draw our background before camera is applied this.bg.draw(t); }, postDraw: function(t) { if (!gamvas.isSet(this.worldSize)) { // our wold is set between our background and foreground image, so our wold size // is the background image width + the half of the difference of foreground - background width this.worldSize = this.bg.image.width + 0.5 * (this.fg.image.width-this.bg.image.width); // calculate camera limits this.lowerLimit = Math.floor(this.dim.w/2); this.upperLimit = Math.floor(this.worldSize-(this.dim.w/2)); this.camera.setPosition(this.lowerLimit, 0); } this.fg.draw(t); // move camera within its limits if (gamvas.key.isPressed(gamvas.key.LEFT)) { this.camera.move( -150*t, 0); if (this.camera.position.x < this.lowerLimit) { this.camera.position.x = this.lowerLimit; } } if (gamvas.key.isPressed(gamvas.key.RIGHT)) { this.camera.move( 150*t, 0); if (this.camera.position.x > this.upperLimit) { this.camera.position.x = this.upperLimit; } } // get the camera position (we limit movement to x) var cx = this.camera.position.x; // get a factor of your current position, so 0 would be fully left and 1 would be fully right var posfact = (this.camera.position.x-this.lowerLimit)/(this.upperLimit-this.lowerLimit); // calculate our foreground position by adding the difference of screen width and foreground // width multiplied with the position factor var fgpos = (this.fg.image.width-this.dim.w)*posfact; // set the clip rectangle, so only screen width from the current position is drawn this.fg.setClipRect(fgpos, 0, this.dim.w, this.fg.image.height); // move the image so it starts left of the screen this.fg.position.x = -fgpos; // do the same for the background var bgpos = (this.bg.image.width-this.dim.w)*posfact; this.bg.setClipRect(bgpos, 0, this.dim.w, this.bg.image.height); this.bg.position.x = -bgpos; } }); // prevent the browser from scrolling on keyboard input gamvas.config.preventKeyEvents = true; gamvas.event.addOnLoad(function() { gamvas.state.addState(new parallaxState('parallaxState')); gamvas.start('gameCanvas'); });