diff --git a/examples/dirtyRect/main.js b/examples/dirtyRect/main.js index 45a31b0200..0d189e794d 100755 --- a/examples/dirtyRect/main.js +++ b/examples/dirtyRect/main.js @@ -43,7 +43,7 @@ var jsApp = me.sys.dirtyRegion = true; // some debug (draw the dirty area, if true) - me.debug.renderDirty = false; + me.debug.renderDirty = true; // init the video diff --git a/examples/dirtyRect/screenObj.js b/examples/dirtyRect/screenObj.js index 5a9d90db04..d745bda0d4 100755 --- a/examples/dirtyRect/screenObj.js +++ b/examples/dirtyRect/screenObj.js @@ -21,11 +21,11 @@ var TitleScreen = me.ScreenObject.extend( this.title = null; this.font = null; - //this.scrollerfont = null; - //this.scrollertween = null; + this.scrollerfont = null; + this.scrollertween = null; - //this.scroller = "A SMALL STEP BY STEP TUTORIAL FOR GAME CREATION WITH MELONJS "; - //this.scrollerpos = 600; + this.scroller = "A SMALL STEP BY STEP TUTORIAL FOR GAME CREATION WITH MELONJS "; + this.scrollerpos = 600; }, /* --- diff --git a/examples/drumbox/index.html b/examples/drumbox/index.html index ef65f1523e..2a33d3b2f8 100644 --- a/examples/drumbox/index.html +++ b/examples/drumbox/index.html @@ -26,7 +26,7 @@

A lightweight HTML5 game engine

drumbox

a basic demo showing the usage of audio in melonJS

- + diff --git a/src/entity/entity.js b/src/entity/entity.js index d805cc2cf0..deef6700de 100644 --- a/src/entity/entity.js +++ b/src/entity/entity.js @@ -195,8 +195,9 @@ // call the parent constructor this.parent(new me.Vector2d(0, 0), this.image.width, this.image.height); - // base x offset within the image - this.baseOffset = 0; + // base x & y offset within the image + this.baseXOffset = 0; + this.baseYOffset = 0; // z Index this.z = zOrder || 0; @@ -206,6 +207,7 @@ // link to the gameviewport width this.vp_width = me.game.viewport.width; + this.vp_height= me.game.viewport.height; }, /*-- @@ -217,15 +219,28 @@ draw : function(context, x, y) { // all this part should redone ! var xpos = 0; + var ypos = 0; var new_width = MIN(this.width - x, this.vp_width); + var new_height = MIN(this.height - y, this.vp_height); + var origX = x; do { - context.drawImage(this.image, x, 0, new_width, this.height, - xpos, y, new_width, this.height); + context.drawImage(this.image, x, y, new_width, new_height, + xpos, ypos, new_width, new_height); xpos += new_width; x = 0; // x_offset new_width = MIN(this.width, this.vp_width - xpos); - } while ((xpos < this.vp_width)); + + if (xpos >= this.vp_width) + { + ypos += new_height; + y = 0; + new_height = MIN(this.height, this.vp_height - ypos); + x = origX; + xpos = 0; + var new_width = MIN(this.width - x, this.vp_width); + } + } while ((ypos < this.vp_height)); } }); @@ -258,8 +273,9 @@ // link to the gameviewport this.vp = me.game.viewport.pos; - // hold the last x position (to track viewport change) + // hold the last x & y positions (to track viewport change) this.lastx = this.vp.x; + this.lasty = this.vp.y; // hold all defined animation this.parallaxLayers = []; @@ -320,56 +336,45 @@ * @protected */ draw : function(context) { - // last x pos of the viewport + // last x & y pos of the viewport var x = this.vp.x; + var y = this.vp.y; + this.updated = false; - if (x > this.lastx) { - // going right - for ( var i = 0, layer; layer = this.parallaxLayers[i++];) { - // calculate the new basoffset - layer.baseOffset = (layer.baseOffset + layer.scrollspeed + for (var i = 0, layer; layer = this.parallaxLayers[i++];) { + if (x > this.lastx) { + layer.baseXOffset = (layer.baseXOffset + layer.scrollspeed * me.timer.tick) % layer.width; - // draw the layer - layer.draw(context, ~~layer.baseOffset, 0); - // save the last x pos - this.lastx = x; - // flag as updated this.updated = true; } - return; - } else if (x < this.lastx) { - // going left - for ( var i = 0, layer; layer = this.parallaxLayers[i++];) { - // calculate the new basoffset - layer.baseOffset = (layer.width + (layer.baseOffset - layer.scrollspeed + else if (x < this.lastx) { + layer.baseXOffset = (layer.width + (layer.baseXOffset - layer.scrollspeed * me.timer.tick)) % layer.width; - // draw the layer - layer.draw(context, ~~layer.baseOffset, 0); - // save the last x pos - this.lastx = x; - // flag as updated this.updated = true; } - return; + if (y > this.lasty) { + layer.baseYOffset = (layer.baseYOffset + layer.scrollspeed + * me.timer.tick) + % layer.height; + this.updated = true; + } + else if (y < this.lasty) { + layer.baseYOffset = (layer.height + (layer.baseYOffset - layer.scrollspeed + * me.timer.tick)) + % layer.height; + this.updated = true; + } + layer.draw(context, ~~layer.baseXOffset, ~~layer.baseYOffset); } - // else nothing changes - for ( var i = 0, layer; layer = this.parallaxLayers[i++];) { - // draw the layer - layer.draw(context, ~~layer.baseOffset, 0); - // save the last x pos - this.lastx = x; - // flag as not updated - this.updated = false; - } + this.lastx = x; + this.lasty = y; } - }); - /** * A Simple object to display a sprite on screen. * @class