diff --git a/examples/camera3.php b/examples/camera3.php index 8ae529a2..e2d2daf1 100644 --- a/examples/camera3.php +++ b/examples/camera3.php @@ -26,10 +26,15 @@ s = game.add.sprite(game.world.centerX, game.world.centerY, 'card'); s2 = game.add.sprite(100, 100, 'mushroom'); - s2.name = 'm'; s.addChild(s2); + // s.angle = 45; + s.scale.x = 0.5; + s.scale.y = 0.5; + // s2.scale.x = 2; + // s2.scale.y = 2; + s.anchor.setTo(0.5, 0.5); s2.anchor.setTo(0.5, 0.5); @@ -50,8 +55,16 @@ function render() { - game.debug.renderSpriteInfo(s, 32, 32); - game.debug.renderSpriteInfo(s2, 32, 320); + var scale1X = Math.sqrt((s2.worldTransform[0] * s2.worldTransform[0]) + (s2.worldTransform[1] * s2.worldTransform[1])); + var scale1Y = Math.sqrt((s2.worldTransform[3] * s2.worldTransform[3]) + (s2.worldTransform[4] * s2.worldTransform[4])); + + game.debug.renderText('scaleX: ' + scale1X + ' scaleY: ' + scale1Y, 500, 32); + + game.debug.renderWorldTransformInfo(s, 32, 32); + game.debug.renderLocalTransformInfo(s, 300, 32); + + game.debug.renderWorldTransformInfo(s2, 32, 450); + game.debug.renderLocalTransformInfo(s2, 300, 450); game.debug.renderPoint(s.topLeft, 'rgb(255,0,0)'); game.debug.renderPoint(s.topRight, 'rgb(0,255,0)'); diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js index 1bf11102..b6686481 100644 --- a/src/gameobjects/Sprite.js +++ b/src/gameobjects/Sprite.js @@ -122,6 +122,10 @@ Phaser.Sprite = function (game, x, y, key, frame) { this._a11 = 0; this._a12 = 0; this._id = 0; + this._sx = 0; + this._sy = 0; + this._sw = 0; + this._sh = 0; }; @@ -140,8 +144,30 @@ Phaser.Sprite.prototype.update = function() { this.position.x = this._x - (this.game.world.camera.x * this.scrollFactor.x); this.position.y = this._y - (this.game.world.camera.y * this.scrollFactor.y); + // |a c tx| + // |b d ty| + // |0 0 1| + + // Cache our transform values + this._a00 = this.worldTransform[0]; // scaleX a + this._a01 = this.worldTransform[1]; // skewY c + this._a02 = this.worldTransform[2]; // translateX tx + this._a10 = this.worldTransform[3]; // skewX b + this._a11 = this.worldTransform[4]; // scaleY d + this._a12 = this.worldTransform[5]; // translateY ty + + this._sx = Math.sqrt((this._a00 * this._a00) + (this._a01 * this._a01)); + this._sy = Math.sqrt((this._a10 * this._a10) + (this._a11 * this._a11)); + this._sw = this.width * this._sx; + this._sh = this.height * this._sy; + + this._a01 *= -1; + this._a10 *= -1; + + this._id = 1 / (this._a00 * this._a11 + this._a01 * -this._a10); + // Update the edge points - this.offset.setTo(this._x - (this.anchor.x * this.width), this._y - (this.anchor.y * this.height)); + this.offset.setTo(this._a02 - (this.anchor.x * this.width), this._a12 - (this.anchor.y * this.height)); this.getLocalPosition(this.topLeft, this.offset.x, this.offset.y); this.getLocalPosition(this.topRight, this.offset.x + this.width, this.offset.y); @@ -154,20 +180,8 @@ Phaser.Sprite.prototype.update = function() { Phaser.Sprite.prototype.getLocalPosition = function(p, x, y) { - this._a00 = this.worldTransform[0]; // scaleX - this._a01 = this.worldTransform[1]; // skewY - this._a02 = this.worldTransform[2]; // translateX - this._a10 = this.worldTransform[3]; // skewX - this._a11 = this.worldTransform[4]; // scaleY - this._a12 = this.worldTransform[5]; // translateY - - this._a01 *= -1; - this._a10 *= -1; - - this._id = 1 / (this._a00 * this._a11 + this._a01 * -this._a10); - - p.x = ((this._a11 * this._id * x + -this._a01 * this._id * y + (this._a12 * this._a01 - this._a02 * this._a11) * this._id) * this.scale.x) + this.x; - p.y = ((this._a00 * this._id * y + -this._a10 * this._id * x + (-this._a12 * this._a00 + this._a02 * this._a10) * this._id) * this.scale.y) + this.y; + p.x = ((this._a11 * this._id * x + -this._a01 * this._id * y + (this._a12 * this._a01 - this._a02 * this._a11) * this._id) * this._sx) + this._a02; + p.y = ((this._a00 * this._id * y + -this._a10 * this._id * x + (-this._a12 * this._a00 + this._a02 * this._a10) * this._id) * this._sy) + this._a12; return p; diff --git a/src/utils/Debug.js b/src/utils/Debug.js index eb7aeadf..df64528a 100644 --- a/src/utils/Debug.js +++ b/src/utils/Debug.js @@ -284,6 +284,7 @@ Phaser.Utils.Debug.prototype = { // 5 = translateY + this.line('id: ' + sprite._id); this.line('scale x: ' + sprite.worldTransform[0]); this.line('scale y: ' + sprite.worldTransform[4]); this.line('tx: ' + sprite.worldTransform[2]); @@ -298,6 +299,64 @@ Phaser.Utils.Debug.prototype = { }, + renderWorldTransformInfo: function (sprite, x, y, color) { + + if (this.context == null) + { + return; + } + + color = color || 'rgb(255, 255, 255)'; + + this.start(x, y, color); + + this.line('World Transform'); + this.line('skewX: ' + sprite.worldTransform[3]); + this.line('skewY: ' + sprite.worldTransform[1]); + this.line('scaleX: ' + sprite.worldTransform[0]); + this.line('scaleY: ' + sprite.worldTransform[4]); + this.line('transX: ' + sprite.worldTransform[2]); + this.line('transY: ' + sprite.worldTransform[5]); + + }, + + renderLocalTransformInfo: function (sprite, x, y, color) { + + if (this.context == null) + { + return; + } + + color = color || 'rgb(255, 255, 255)'; + + this.start(x, y, color); + + this.line('Local Transform'); + // this.line('testX: ' + Math.floor(sprite.localTransform[3] + sprite.localTransform[0])); + this.line('skewX: ' + sprite.localTransform[3]); + this.line('skewY: ' + sprite.localTransform[1]); + this.line('scaleX: ' + sprite.localTransform[0]); + this.line('scaleY: ' + sprite.localTransform[4]); + this.line('transX: ' + sprite.localTransform[2]); + this.line('transY: ' + sprite.localTransform[5]); + + }, + + renderPointInfo: function (point, x, y, color) { + + if (this.context == null) + { + return; + } + + color = color || 'rgb(255, 255, 255)'; + + this.start(x, y, color); + this.line('px: ' + point.x.toFixed(1) + ' py: ' + point.y.toFixed(1)); + this.stop(); + + }, + renderSpriteBounds: function (sprite, color) { if (this.context == null)