diff --git a/examples/physics/ship trail.js b/examples/physics/ship trail.js index 7e048a6d..96f26c82 100644 --- a/examples/physics/ship trail.js +++ b/examples/physics/ship trail.js @@ -22,7 +22,7 @@ function create() { var bg = game.add.sprite(0, 0, bmd); bg.body.moves = false; - game.enableStep(); + // game.enableStep(); game.physics.gravity.y = 100; diff --git a/examples/wip/pixi1.js b/examples/wip/pixi1.js index cf625586..a426e891 100644 --- a/examples/wip/pixi1.js +++ b/examples/wip/pixi1.js @@ -1,5 +1,5 @@ -var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }, false); function preload() { @@ -16,22 +16,20 @@ function create() { // game.stage.backgroundColor = '#ff5500'; - game.stage._stage.setBackgroundColor(0xff5500); + sprite = game.add.sprite(0.5, 0, 'pic'); - sprite = game.add.sprite(0, 0, 'pic'); + // g = game.add.group(null, 'billy'); - g = game.add.group(null, 'billy'); + // sprite2 = g.create(0, 0, 'pic'); - sprite2 = g.create(0, 0, 'pic'); + // g.y = 200; + // g.rotation = 0.1; - g.y = 200; - g.rotation = 0.1; + sprite2 = game.add.sprite(0, 300, 'pic'); - // sprite2 = game.add.sprite(0, 300, 'pic'); + // game.input.onDown.add(tint, this); - game.input.onDown.add(tint, this); - - game.add.tween(sprite).to({y: 500}, 3000, Phaser.Easing.Linear.None, true); + // game.add.tween(sprite).to({y: 500}, 3000, Phaser.Easing.Linear.None, true); p = new PIXI.Point(43, 45); @@ -39,7 +37,7 @@ function create() { function tint() { - sprite.tint = Math.random() * 0xFFFFFF; + // sprite.tint = Math.random() * 0xFFFFFF; // sprite2.tint = Math.random() * 0xFFFFFF; } @@ -51,6 +49,6 @@ function update() { function render() { - game.debug.renderText(sprite.position.y, 32, 32); + // game.debug.renderText(sprite.position.y, 32, 32); } diff --git a/src/PixiPatch.js b/src/PixiPatch.js deleted file mode 100644 index a71923ca..00000000 --- a/src/PixiPatch.js +++ /dev/null @@ -1,280 +0,0 @@ -/** -* We're replacing a couple of Pixi's methods here to fix or add some vital functionality: -* -* 1) Added support for Trimmed sprite sheets -* 2) Skip display objects with an alpha of zero -* 3) Avoid Style Recalculation from the incorrect bgcolor value -* 4) Added support for Canvas unit rounding via Phaser.CANVAS_PX_ROUND boolean (disabled by default). -* -* Hopefully we can remove this once Pixi has been updated to support these things. -*/ - -/** - * Renders the stage to its canvas view - * - * @method render - * @param stage {Stage} the Stage element to be rendered - */ -PIXI.CanvasRenderer.prototype.render = function(stage) -{ - PIXI.texturesToUpdate.length = 0; - PIXI.texturesToDestroy.length = 0; - - PIXI.visibleCount++; - stage.updateTransform(); - - this.context.setTransform(1, 0, 0, 1, 0, 0); - - if (Phaser.CANVAS_CLEAR_RECT) - { - this.context.clearRect(0, 0, this.width, this.height) - } - - this.renderDisplayObject(stage, false); - - // Remove frame updates - if (PIXI.Texture.frameUpdates.length > 0) - { - PIXI.Texture.frameUpdates.length = 0; - } - -} - -// @param {boolean} [renderHidden=false] - If true displayObjects that have their visible property set to false will still be rendered. - -PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, renderHidden) -{ - // Once the display object hits this we can break the loop - var testObject = displayObject.last._iNext; - displayObject = displayObject.first; - - do - { - if (!displayObject.visible && !renderHidden) - { - displayObject = displayObject.last._iNext; - continue; - } - - if (!displayObject.renderable || displayObject.alpha === 0) - { - displayObject = displayObject._iNext; - continue; - } - - if (displayObject instanceof PIXI.Sprite) - { - if (displayObject.texture.frame) - { - this.context.globalAlpha = displayObject.worldAlpha; - - if (Phaser.CANVAS_PX_ROUND) - { - this.context.setTransform( - displayObject.worldTransform[0], - displayObject.worldTransform[3], - displayObject.worldTransform[1], - displayObject.worldTransform[4], - Math.floor(displayObject.worldTransform[2]), - Math.floor(displayObject.worldTransform[5])); - } - else - { - this.context.setTransform( - displayObject.worldTransform[0], - displayObject.worldTransform[3], - displayObject.worldTransform[1], - displayObject.worldTransform[4], - displayObject.worldTransform[2], - displayObject.worldTransform[5]); - } - - if (displayObject.texture.trimmed) - { - this.context.transform(1, 0, 0, 1, displayObject.texture.trim.x, displayObject.texture.trim.y); - } - - //if smoothingEnabled is supported and we need to change the smoothing property for this texture - if (this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) - { - this.scaleMode = displayObject.texture.baseTexture.scaleMode; - this.context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR); - } - - this.context.drawImage( - displayObject.texture.baseTexture.source, - displayObject.texture.frame.x, - displayObject.texture.frame.y, - displayObject.texture.frame.width, - displayObject.texture.frame.height, - Math.floor((displayObject.anchor.x) * -displayObject.texture.frame.width), - Math.floor((displayObject.anchor.y) * -displayObject.texture.frame.height), - displayObject.texture.frame.width, - displayObject.texture.frame.height); - } - } - else if (displayObject instanceof PIXI.Strip) - { - this.context.setTransform(displayObject.worldTransform[0], displayObject.worldTransform[3], displayObject.worldTransform[1], displayObject.worldTransform[4], displayObject.worldTransform[2], displayObject.worldTransform[5]) - this.renderStrip(displayObject); - } - else if (displayObject instanceof PIXI.TilingSprite) - { - this.context.setTransform(displayObject.worldTransform[0], displayObject.worldTransform[3], displayObject.worldTransform[1], displayObject.worldTransform[4], displayObject.worldTransform[2], displayObject.worldTransform[5]) - this.renderTilingSprite(displayObject); - } - else if (displayObject instanceof PIXI.CustomRenderable) - { - displayObject.renderCanvas(this); - } - else if (displayObject instanceof PIXI.Graphics) - { - this.context.setTransform(displayObject.worldTransform[0], displayObject.worldTransform[3], displayObject.worldTransform[1], displayObject.worldTransform[4], displayObject.worldTransform[2], displayObject.worldTransform[5]) - PIXI.CanvasGraphics.renderGraphics(displayObject, this.context); - } - else if (displayObject instanceof PIXI.FilterBlock) - { - if (displayObject.open) - { - this.context.save(); - - var cacheAlpha = displayObject.mask.alpha; - var maskTransform = displayObject.mask.worldTransform; - - this.context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - - displayObject.mask.worldAlpha = 0.5; - - this.context.worldAlpha = 0; - - PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, this.context); - this.context.clip(); - - displayObject.mask.worldAlpha = cacheAlpha; - } - else - { - this.context.restore(); - } - } - // count++ - displayObject = displayObject._iNext; - } - while(displayObject != testObject) - -} - -PIXI.WebGLBatch.prototype.update = function() -{ - // var gl = this.gl; - // var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 - - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - - var a, b, c, d, tx, ty; - - var indexRun = 0; - - var displayObject = this.head; - - while(displayObject) - { - if(displayObject.vcount === PIXI.visibleCount) - { - width = displayObject.texture.frame.width; - height = displayObject.texture.frame.height; - - // TODO trim?? - aX = displayObject.anchor.x;// - displayObject.texture.trim.x - aY = displayObject.anchor.y; //- displayObject.texture.trim.y - w0 = width * (1-aX); - w1 = width * -aX; - - h0 = height * (1-aY); - h1 = height * -aY; - - index = indexRun * 8; - - worldTransform = displayObject.worldTransform; - - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; - - if (displayObject.texture.trimmed) - { - tx += displayObject.texture.trim.x; - ty += displayObject.texture.trim.y; - } - - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; - this.verticies[index + 1 ] = d * h1 + b * w1 + ty; - - this.verticies[index + 2 ] = a * w0 + c * h1 + tx; - this.verticies[index + 3 ] = d * h1 + b * w0 + ty; - - this.verticies[index + 4 ] = a * w0 + c * h0 + tx; - this.verticies[index + 5 ] = d * h0 + b * w0 + ty; - - this.verticies[index + 6] = a * w1 + c * h0 + tx; - this.verticies[index + 7] = d * h0 + b * w1 + ty; - - if(displayObject.updateFrame || displayObject.texture.updateFrame) - { - this.dirtyUVS = true; - - var texture = displayObject.texture; - - var frame = texture.frame; - var tw = texture.baseTexture.width; - var th = texture.baseTexture.height; - - this.uvs[index + 0] = frame.x / tw; - this.uvs[index +1] = frame.y / th; - - this.uvs[index +2] = (frame.x + frame.width) / tw; - this.uvs[index +3] = frame.y / th; - - this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; - - this.uvs[index +6] = frame.x / tw; - this.uvs[index +7] = (frame.y + frame.height) / th; - - displayObject.updateFrame = false; - } - - // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) - { - displayObject.cacheAlpha = displayObject.worldAlpha; - - var colorIndex = indexRun * 4; - this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha; - this.dirtyColors = true; - } - } - else - { - index = indexRun * 8; - - this.verticies[index + 0 ] = 0; - this.verticies[index + 1 ] = 0; - - this.verticies[index + 2 ] = 0; - this.verticies[index + 3 ] = 0; - - this.verticies[index + 4 ] = 0; - this.verticies[index + 5 ] = 0; - - this.verticies[index + 6] = 0; - this.verticies[index + 7] = 0; - } - - indexRun++; - displayObject = displayObject.__next; - } -} diff --git a/src/core/Camera.js b/src/core/Camera.js index d87d65ba..da95dd59 100644 --- a/src/core/Camera.js +++ b/src/core/Camera.js @@ -340,8 +340,8 @@ Phaser.Camera.prototype = { reset: function () { this.target = null; - this.camera.x = 0; - this.camera.y = 0; + this.view.x = 0; + this.view.y = 0; } diff --git a/src/core/Stage.js b/src/core/Stage.js index ce3fa01f..3312f78b 100644 --- a/src/core/Stage.js +++ b/src/core/Stage.js @@ -175,7 +175,7 @@ Phaser.Stage.prototype = { Phaser.Canvas.setUserSelect(this.canvas, 'none'); Phaser.Canvas.setTouchAction(this.canvas, 'none'); - this.backgroundColor = '#000'; + this.backgroundColor = '#000000'; document.addEventListener('visibilitychange', this._onChange, false); document.addEventListener('webkitvisibilitychange', this._onChange, false); diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js index 83b22fb1..9c35196d 100644 --- a/src/gameobjects/Sprite.js +++ b/src/gameobjects/Sprite.js @@ -130,11 +130,20 @@ Phaser.Sprite = function (game, x, y, key, frame) { this.lifespan = 0; /** - * @property {boolean} outOfBoundsKill - If true the Sprite is killed as soon as Sprite.inWorld is false. + * If true the Sprite checks if it is still within the world each frame, when it leaves the world it dispatches Sprite.events.onOutOfBounds + * and optionally kills the sprite (if Sprite.outOfBoundsKill is true). By default this is disabled because the Sprite has to calculate its + * bounds every frame to support it, and not all games need it. Enable it by setting the value to true. + * @property {boolean} checkWorldBounds + * @default + */ + this.checkWorldBounds = false; + + /** + * @property {boolean} outOfBoundsKill - If true Sprite.kill is called as soon as Sprite.inWorld returns false, as long as Sprite.checkWorldBounds is true. * @default */ this.outOfBoundsKill = false; - + /** * @property {boolean} debug - Handy flag to use with Game.enableStep * @default @@ -142,16 +151,23 @@ Phaser.Sprite = function (game, x, y, key, frame) { this.debug = false; /** - * @property {boolean} _outOfBoundsFired - Internal flag. + * A small internal cache: + * 0 = previous position.x + * 1 = previous position.y + * 2 = previous rotation + * 3 = renderID + * 4 = fresh? (0 = no, 1 = yes) + * 5 = outOfBoundsFired (0 = no, 1 = yes) + * @property {array} _cache * @private */ - this._outOfBoundsFired = false; + this._cache = [0, 0, 0, 0, 1, 0]; /** - * @property {array} _cache - A small cache for previous step values. 0 = x, 1 = y, 2 = rotation, 3 = renderID, 4 = fresh? (0 = no, 1 = yes) + * @property {Phaser.Rectangle} _bounds - Internal cache var. * @private */ - this._cache = [0, 0, 0, 0, 1]; + this._bounds = new Phaser.Rectangle(); }; @@ -163,19 +179,18 @@ Phaser.Sprite.prototype.constructor = Phaser.Sprite; * * @method Phaser.Sprite#preUpdate * @memberof Phaser.Sprite +* @return {boolean} True if the Sprite was rendered, otherwise false. */ Phaser.Sprite.prototype.preUpdate = function() { - /* if (this._cache[4] === 1) { - console.log('sprite cache fresh'); this.world.setTo(this.parent.position.x + this.position.x, this.parent.position.y + this.position.y); - this.worldTransform[2] = this.world.x; - this.worldTransform[5] = this.world.y; - // this._cache[0] = this.world.x; - // this._cache[1] = this.world.y; - // this._cache[2] = this.rotation; + this.worldTransform.tx = this.world.x; + this.worldTransform.ty = this.world.y; + this._cache[0] = this.world.x; + this._cache[1] = this.world.y; + this._cache[2] = this.rotation; this._cache[4] = 0; if (this.body) @@ -186,9 +201,8 @@ Phaser.Sprite.prototype.preUpdate = function() { this.body.preY = this.body.y; } - return; + return false; } - */ this._cache[0] = this.world.x; this._cache[1] = this.world.y; @@ -196,7 +210,8 @@ Phaser.Sprite.prototype.preUpdate = function() { if (!this.exists || !this.parent.exists) { - this.renderOrderID = -1; + // Reset the renderOrderID + this._cache[3] = -1; return false; } @@ -211,13 +226,40 @@ Phaser.Sprite.prototype.preUpdate = function() { } } + // Cache the bounds if we need it + if (this.autoCull || this.checkWorldBounds) + { + this._bounds.copyFrom(this.getBounds()); + } + if (this.autoCull) { // Won't get rendered but will still get its transform updated - this.renderable = this.game.world.camera.screenView.intersects(this.getBounds()); + this.renderable = this.game.world.camera.screenView.intersects(this._bounds); } - this.world.setTo(this.game.camera.x + this.worldTransform[2], this.game.camera.y + this.worldTransform[5]); + if (this.checkWorldBounds) + { + // The Sprite is already out of the world bounds, so let's check to see if it has come back again + if (this._cache[5] === 1 && this.game.world.bounds.intersects(this._bounds)) + { + this._cache[5] = 0; + } + else if (this._cache[5] === 0 && !this.game.world.bounds.intersects(this._bounds)) + { + // The Sprite WAS in the screen, but has now left. + this._cache[5] = 1; + this.events.onOutOfBounds.dispatch(this); + + if (this.outOfBoundsKill) + { + this.kill(); + return false; + } + } + } + + this.world.setTo(this.game.camera.x + this.worldTransform.tx, this.game.camera.y + this.worldTransform.ty); if (this.visible) { @@ -226,36 +268,6 @@ Phaser.Sprite.prototype.preUpdate = function() { this.animations.update(); - if (!this.inWorld && Phaser.Rectangle.intersects(this.getBounds(), this.game.world.bounds, this.inWorldThreshold)) - { - // It's back again, reset the OOB check - this._outOfBoundsFired = false; - } - else - { - // Sprite WAS in the screen, has it now left? - this.inWorld = Phaser.Rectangle.intersects(this.getBounds(), this.game.world.bounds, this.inWorldThreshold); - - if (this.inWorld === false) - { - this.events.onOutOfBounds.dispatch(this); - this._outOfBoundsFired = true; - - if (this.outOfBoundsKill) - { - this.kill(); - } - } - } - - this._cache.cameraVisible = Phaser.Rectangle.intersects(this.game.world.camera.screenView, this.getBounds(), 0); - - if (this.autoCull) - { - // Won't get rendered but will still get its transform updated - this.renderable = this._cache.cameraVisible; - } - if (this.body) { this.body.preUpdate(); diff --git a/src/physics/arcade/Body.js b/src/physics/arcade/Body.js index 57c23358..e3c782fd 100644 --- a/src/physics/arcade/Body.js +++ b/src/physics/arcade/Body.js @@ -73,7 +73,7 @@ Phaser.Physics.Arcade.Body = function (sprite) { * @property {number} deltaCap - The maximum a delta is allowed to reach before its capped. * @default */ - this.deltaCap = 2; + this.deltaCap = 10; /** * @property {Phaser.Point} gravity - The gravity applied to the motion of the Body. This works in addition to any gravity set on the world. @@ -387,8 +387,6 @@ Phaser.Physics.Arcade.Body.prototype = { this.x = (this.sprite.world.x - (this.sprite.anchor.x * this.sprite.width)) + this.offset.x; this.y = (this.sprite.world.y - (this.sprite.anchor.y * this.sprite.height)) + this.offset.y; - // console.log('body pre', this.preX, this.preY, 'now', this.x, this.y); - // This covers any motion that happens during this frame, not since the last frame this.preX = this.x; this.preY = this.y; diff --git a/src/pixi/Pixi.js b/src/pixi/Pixi.js index 3a4ebf3d..79b8c715 100644 --- a/src/pixi/Pixi.js +++ b/src/pixi/Pixi.js @@ -44,15 +44,15 @@ PIXI.scaleModes = { // Canvas specific controls PIXI.canvas = { - // If the Stage is transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color. - // Setting this to false forces Pixi to update the view.style.backgroundColor instead. + // 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 unless you set this to false. - // You often don't need clearRect if you've got a large background image fully covering your canvas. + // 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 round all x/y values for rendering only, stopping pixel interpolation. Handy for crisp pixel art. + // 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 } diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index c1c82429..523ec4bf 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -196,8 +196,6 @@ PIXI.DisplayObject = function() */ this._mask = null; - this.x = this.position.x; - this.y = this.position.y; /* * MOUSE Callbacks @@ -395,8 +393,6 @@ PIXI.DisplayObject.prototype.updateTransform = function() // TODO OPTIMIZE THIS!! with dirty if(this.rotation !== this.rotationCache) { - if(isNaN(parseFloat(this.rotation))) - throw new Error('DisplayObject rotation values must be numeric.'); this.rotationCache = this.rotation; this._sr = Math.sin(this.rotation); diff --git a/src/pixi/display/Sprite.js b/src/pixi/display/Sprite.js index 35b4235b..1d065377 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 7271cf16..ed3b9211 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/display/Stage.js b/src/pixi/display/Stage.js index 8871806e..50cea165 100644 --- a/src/pixi/display/Stage.js +++ b/src/pixi/display/Stage.js @@ -63,8 +63,6 @@ PIXI.Stage = function(backgroundColor) //optimize hit detection a bit this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); - this.resetBackgroundColor = false; - this.setBackgroundColor(backgroundColor); }; @@ -123,7 +121,6 @@ PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor) var hex = this.backgroundColor.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; this.backgroundColorString = '#' + hex; - this.resetBackgroundColor = true; }; /** diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index 5ec8ce48..9c93ee6f 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -165,27 +165,16 @@ PIXI.CanvasRenderer.prototype.render = function(stage) this.context.setTransform(1,0,0,1,0,0); this.context.globalAlpha = 1; - // Update the background color / cls - if (!this.transparent) + if (!this.transparent && PIXI.canvas.FILL_RECT) { - if (PIXI.canvas.FILL_RECT) - { - this.context.fillStyle = stage.backgroundColorString; - this.context.fillRect(0, 0, this.width, this.height); - } - else if (stage.resetBackgroundColor) - { - this.view.style.backgroundColor = stage.backgroundColorString; - stage.resetBackgroundColor = false; - console.log('bgcolor reset', this.view.style.backgroundColor); - } + this.context.fillStyle = stage.backgroundColorString; + this.context.fillRect(0, 0, this.width, this.height); } - - if (PIXI.canvas.CLEAR_RECT && !PIXI.canvas.FILL_RECT) + else if (this.transparent && PIXI.canvas.CLEAR_RECT) { this.context.clearRect(0, 0, this.width, this.height); } - + this.renderDisplayObject(stage); // run interaction!