From b757e652e9827c2c2de7c5ed66bdb7b7d39e46b3 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Sun, 9 Feb 2014 02:24:02 +0000 Subject: [PATCH 1/3] Added PIXI.canvas global object which allows for tighter configuration of the canvas renderer. Allows the dev to control if fillRect / clearRect is called (as it's not needed for lots of games and can help perf slightly on legacy devices). Also added PX_ROUND boolean. If true (default is false) it will Math.floor the x/y values on the transform, this stops interpolation when Sprites are rendered at non-pixel values, keeping pixel art crisp. Also helps performance on older mobiles. I removed the view.style.backgroundColor as it was never set, mostly commented-out and is unreliable as hell on Android anyway :( (which I guess is why it had been replaced with the fillRect instead). --- src/pixi/Pixi.js | 15 +++++++++++ src/pixi/display/Sprite.js | 10 +++++++- src/pixi/display/SpriteBatch.js | 10 +++++++- src/pixi/renderers/canvas/CanvasRenderer.js | 28 ++++++--------------- 4 files changed, 41 insertions(+), 22 deletions(-) diff --git a/src/pixi/Pixi.js b/src/pixi/Pixi.js index 768ef4e..79b8c71 100644 --- a/src/pixi/Pixi.js +++ b/src/pixi/Pixi.js @@ -41,6 +41,21 @@ PIXI.scaleModes = { NEAREST:1 }; +// Canvas specific controls +PIXI.canvas = { + + // If the Stage is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color. + // Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set. + FILL_RECT: true, + + // If the Stage is transparent Pixi will use clearRect to clear the canvas every frame. + // Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set. + CLEAR_RECT: true, + + // If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. Handy for crisp pixel art and speed on legacy devices. + PX_ROUND: false +} + // interaction frequency PIXI.INTERACTION_FREQUENCY = 30; PIXI.AUTO_PREVENT_DEFAULT = true; \ No newline at end of file diff --git a/src/pixi/display/Sprite.js b/src/pixi/display/Sprite.js index 35b4235..1d06537 100644 --- a/src/pixi/display/Sprite.js +++ b/src/pixi/display/Sprite.js @@ -345,7 +345,15 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession) // allow for trimming - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty); + if (PIXI.canvas.PX_ROUND) + { + context.setTransform(transform.a, transform.c, transform.b, transform.d, Math.floor(transform.tx), Math.floor(transform.ty)); + } + else + { + context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty); + } + //if smoothingEnabled is supported and we need to change the smoothing property for this texture if(renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { diff --git a/src/pixi/display/SpriteBatch.js b/src/pixi/display/SpriteBatch.js index 7271cf1..ed3b921 100644 --- a/src/pixi/display/SpriteBatch.js +++ b/src/pixi/display/SpriteBatch.js @@ -91,7 +91,15 @@ PIXI.SpriteBatch.prototype._renderCanvas = function(renderSession) // alow for trimming - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty); + if (PIXI.canvas.PX_ROUND) + { + context.setTransform(transform.a, transform.c, transform.b, transform.d, Math.floor(transform.tx), Math.floor(transform.ty)); + } + else + { + context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty); + } + context.save(); for (var i = 0; i < this.children.length; i++) { diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index 267ad36..9c93ee6 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -156,37 +156,25 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; - //stage.__childrenRemoved = []; - // update textures if need be PIXI.texturesToUpdate.length = 0; PIXI.texturesToDestroy.length = 0; stage.updateTransform(); - // update the background color - /* if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) - this.view.style.backgroundColor = stage.backgroundColorString; */ - this.context.setTransform(1,0,0,1,0,0); + this.context.globalAlpha = 1; - if(this.view.style.backgroundColor !== stage.backgroundColorString ) + if (!this.transparent && PIXI.canvas.FILL_RECT) { - if(!this.transparent) - { - this.context.globalAlpha = 1; - this.context.fillStyle = stage.backgroundColorString; - this.context.fillRect(0, 0, this.width, this.height); - } - else - { - this.context.clearRect(0, 0, this.width, this.height); - } + this.context.fillStyle = stage.backgroundColorString; + this.context.fillRect(0, 0, this.width, this.height); + } + else if (this.transparent && PIXI.canvas.CLEAR_RECT) + { + this.context.clearRect(0, 0, this.width, this.height); } - //console.log(this.view.style.backgroundColor) - this.renderDisplayObject(stage); // run interaction! From 723c5ca5257766aeba23032e9b58d493284936d4 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Sun, 9 Feb 2014 11:04:54 +0000 Subject: [PATCH 2/3] Hoisted the fillRect/canvasRect/pxRound flags to the CanvasRenderer. --- src/pixi/Pixi.js | 15 ---------- src/pixi/display/Sprite.js | 2 +- src/pixi/display/SpriteBatch.js | 2 +- src/pixi/renderers/canvas/CanvasRenderer.js | 33 +++++++++++++++++++-- 4 files changed, 33 insertions(+), 19 deletions(-) diff --git a/src/pixi/Pixi.js b/src/pixi/Pixi.js index 79b8c71..768ef4e 100644 --- a/src/pixi/Pixi.js +++ b/src/pixi/Pixi.js @@ -41,21 +41,6 @@ PIXI.scaleModes = { NEAREST:1 }; -// Canvas specific controls -PIXI.canvas = { - - // If the Stage is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color. - // Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set. - FILL_RECT: true, - - // If the Stage is transparent Pixi will use clearRect to clear the canvas every frame. - // Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set. - CLEAR_RECT: true, - - // If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. Handy for crisp pixel art and speed on legacy devices. - PX_ROUND: false -} - // interaction frequency PIXI.INTERACTION_FREQUENCY = 30; PIXI.AUTO_PREVENT_DEFAULT = true; \ No newline at end of file diff --git a/src/pixi/display/Sprite.js b/src/pixi/display/Sprite.js index 1d06537..c95e127 100644 --- a/src/pixi/display/Sprite.js +++ b/src/pixi/display/Sprite.js @@ -345,7 +345,7 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession) // allow for trimming - if (PIXI.canvas.PX_ROUND) + if (renderSession.roundPixels) { context.setTransform(transform.a, transform.c, transform.b, transform.d, Math.floor(transform.tx), Math.floor(transform.ty)); } diff --git a/src/pixi/display/SpriteBatch.js b/src/pixi/display/SpriteBatch.js index ed3b921..d23013f 100644 --- a/src/pixi/display/SpriteBatch.js +++ b/src/pixi/display/SpriteBatch.js @@ -91,7 +91,7 @@ PIXI.SpriteBatch.prototype._renderCanvas = function(renderSession) // alow for trimming - if (PIXI.canvas.PX_ROUND) + if (renderSession.roundPixels) { context.setTransform(transform.a, transform.c, transform.b, transform.d, Math.floor(transform.tx), Math.floor(transform.ty)); } diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index 9c93ee6..cfaac27 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -19,6 +19,35 @@ PIXI.CanvasRenderer = function(width, height, view, transparent) this.type = PIXI.CANVAS_RENDERER; + /** + * If the Stage is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color. + * Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set. + * + * @property useFillRect + * @type Boolean + * @default + */ + this.useFillRect = true; + + /** + * If the Stage is transparent Pixi will use clearRect to clear the canvas every frame. + * Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set. + * + * @property useClearRect + * @type Boolean + * @default + */ + this.useClearRect = true; + + /** + * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Handy for crisp pixel art and speed on legacy devices. + * + * @property roundPixels + * @type Boolean + * @default + */ + this.roundPixels = false; /** * Whether the render view is transparent @@ -165,12 +194,12 @@ PIXI.CanvasRenderer.prototype.render = function(stage) this.context.setTransform(1,0,0,1,0,0); this.context.globalAlpha = 1; - if (!this.transparent && PIXI.canvas.FILL_RECT) + if (!this.transparent && this.useFillRect) { this.context.fillStyle = stage.backgroundColorString; this.context.fillRect(0, 0, this.width, this.height); } - else if (this.transparent && PIXI.canvas.CLEAR_RECT) + else if (this.transparent && this.useClearRect) { this.context.clearRect(0, 0, this.width, this.height); } From b4eb4034228a673f3c51a51a74b7f1b7327b632c Mon Sep 17 00:00:00 2001 From: photonstorm Date: Sun, 9 Feb 2014 11:13:12 +0000 Subject: [PATCH 3/3] Merged fillRect and clearRect to single clearBeforeRender boolean. --- src/pixi/renderers/canvas/CanvasRenderer.js | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index cfaac27..d2e64d9 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -20,24 +20,16 @@ PIXI.CanvasRenderer = function(width, height, view, transparent) this.type = PIXI.CANVAS_RENDERER; /** + * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. * If the Stage is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color. - * Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set. - * - * @property useFillRect - * @type Boolean - * @default - */ - this.useFillRect = true; - - /** * If the Stage is transparent Pixi will use clearRect to clear the canvas every frame. * Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set. * - * @property useClearRect + * @property clearBeforeRender * @type Boolean * @default */ - this.useClearRect = true; + this.clearBeforeRender = true; /** * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. @@ -194,12 +186,12 @@ PIXI.CanvasRenderer.prototype.render = function(stage) this.context.setTransform(1,0,0,1,0,0); this.context.globalAlpha = 1; - if (!this.transparent && this.useFillRect) + if (!this.transparent && this.clearBeforeRender) { this.context.fillStyle = stage.backgroundColorString; this.context.fillRect(0, 0, this.width, this.height); } - else if (this.transparent && this.useClearRect) + else if (this.transparent && this.clearBeforeRender) { this.context.clearRect(0, 0, this.width, this.height); }