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 @@ 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/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 @@ 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 @@ // 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/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 @@ 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 @@ // 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 @@ // 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/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 @@ 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 @@ // 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 @@ // 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.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!