diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index fa926a7..d84965e 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -39,6 +39,14 @@ */ this.pivot = new math.Point(0, 0); + + /** + * The skew factor for the object in radians. + * + * @member {PIXI.Point} + */ + this.skew = new math.Point(0, 0); + /** * The rotation of the object in radians. * @@ -264,7 +272,6 @@ */ DisplayObject.prototype.updateTransform = function () { - // create some matrix refs for easy access var pt = this.parent.worldTransform; var wt = this.worldTransform; @@ -272,55 +279,81 @@ // temporary matrix variables var a, b, c, d, tx, ty; - // so if rotation is between 0 then we can simplify the multiplication process... - if (this.rotation % CONST.PI_2) + // looks like we are skewing + if(this.skew.x || this.skew.y) { - // check to see if the rotation is the same as the previous render. This means we only need to use sin and cos when rotation actually changes - if (this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } + // I'm assuming that skewing is not going to be very common + // With that in mind, we can do a full setTransform using the temp matrix + _tempMatrix.setTransform(this.position.x + ,this.position.y + ,this.pivot.x + ,this.pivot.y + ,this.scale.x + ,this.scale.y + ,this.rotation + ,this.skew.x + ,this.skew.y ); - // get the matrix values of the displayobject based on its transform properties.. - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; - tx = this.position.x; - ty = this.position.y; - - // check for pivot.. not often used so geared towards that fact! - if (this.pivot.x || this.pivot.y) - { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; - } - - // concat the parent matrix with the objects transform. - wt.a = a * pt.a + b * pt.c; - wt.b = a * pt.b + b * pt.d; - wt.c = c * pt.a + d * pt.c; - wt.d = c * pt.b + d * pt.d; - wt.tx = tx * pt.a + ty * pt.c + pt.tx; - wt.ty = tx * pt.b + ty * pt.d + pt.ty; + // now concat the matrix (inlined so that we can avoid using copy) + wt.a = _tempMatrix.a * pt.a + _tempMatrix.b * pt.c; + wt.b = _tempMatrix.a * pt.b + _tempMatrix.b * pt.d; + wt.c = _tempMatrix.c * pt.a + _tempMatrix.d * pt.c; + wt.d = _tempMatrix.c * pt.b + _tempMatrix.d * pt.d; + wt.tx = _tempMatrix.tx * pt.a + _tempMatrix.ty * pt.c + pt.tx; + wt.ty = _tempMatrix.tx * pt.b + _tempMatrix.ty * pt.d + pt.ty; } else { - // lets do the fast version as we know there is no rotation.. - a = this.scale.x; - d = this.scale.y; + // so if rotation is between 0 then we can simplify the multiplication process... + if (this.rotation % CONST.PI_2) + { + // check to see if the rotation is the same as the previous render. This means we only need to use sin and cos when rotation actually changes + if (this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } - tx = this.position.x - this.pivot.x * a; - ty = this.position.y - this.pivot.y * d; + // get the matrix values of the displayobject based on its transform properties.. + a = this._cr * this.scale.x; + b = this._sr * this.scale.x; + c = -this._sr * this.scale.y; + d = this._cr * this.scale.y; + tx = this.position.x; + ty = this.position.y; - wt.a = a * pt.a; - wt.b = a * pt.b; - wt.c = d * pt.c; - wt.d = d * pt.d; - wt.tx = tx * pt.a + ty * pt.c + pt.tx; - wt.ty = tx * pt.b + ty * pt.d + pt.ty; + // check for pivot.. not often used so geared towards that fact! + if (this.pivot.x || this.pivot.y) + { + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; + } + + // concat the parent matrix with the objects transform. + wt.a = a * pt.a + b * pt.c; + wt.b = a * pt.b + b * pt.d; + wt.c = c * pt.a + d * pt.c; + wt.d = c * pt.b + d * pt.d; + wt.tx = tx * pt.a + ty * pt.c + pt.tx; + wt.ty = tx * pt.b + ty * pt.d + pt.ty; + } + else + { + // lets do the fast version as we know there is no rotation.. + a = this.scale.x; + d = this.scale.y; + + tx = this.position.x - this.pivot.x * a; + ty = this.position.y - this.pivot.y * d; + + wt.a = a * pt.a; + wt.b = a * pt.b; + wt.c = d * pt.c; + wt.d = d * pt.d; + wt.tx = tx * pt.a + ty * pt.c + pt.tx; + wt.ty = tx * pt.b + ty * pt.d + pt.ty; + } } // multiply the alphas.. diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index fa926a7..d84965e 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -39,6 +39,14 @@ */ this.pivot = new math.Point(0, 0); + + /** + * The skew factor for the object in radians. + * + * @member {PIXI.Point} + */ + this.skew = new math.Point(0, 0); + /** * The rotation of the object in radians. * @@ -264,7 +272,6 @@ */ DisplayObject.prototype.updateTransform = function () { - // create some matrix refs for easy access var pt = this.parent.worldTransform; var wt = this.worldTransform; @@ -272,55 +279,81 @@ // temporary matrix variables var a, b, c, d, tx, ty; - // so if rotation is between 0 then we can simplify the multiplication process... - if (this.rotation % CONST.PI_2) + // looks like we are skewing + if(this.skew.x || this.skew.y) { - // check to see if the rotation is the same as the previous render. This means we only need to use sin and cos when rotation actually changes - if (this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } + // I'm assuming that skewing is not going to be very common + // With that in mind, we can do a full setTransform using the temp matrix + _tempMatrix.setTransform(this.position.x + ,this.position.y + ,this.pivot.x + ,this.pivot.y + ,this.scale.x + ,this.scale.y + ,this.rotation + ,this.skew.x + ,this.skew.y ); - // get the matrix values of the displayobject based on its transform properties.. - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; - tx = this.position.x; - ty = this.position.y; - - // check for pivot.. not often used so geared towards that fact! - if (this.pivot.x || this.pivot.y) - { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; - } - - // concat the parent matrix with the objects transform. - wt.a = a * pt.a + b * pt.c; - wt.b = a * pt.b + b * pt.d; - wt.c = c * pt.a + d * pt.c; - wt.d = c * pt.b + d * pt.d; - wt.tx = tx * pt.a + ty * pt.c + pt.tx; - wt.ty = tx * pt.b + ty * pt.d + pt.ty; + // now concat the matrix (inlined so that we can avoid using copy) + wt.a = _tempMatrix.a * pt.a + _tempMatrix.b * pt.c; + wt.b = _tempMatrix.a * pt.b + _tempMatrix.b * pt.d; + wt.c = _tempMatrix.c * pt.a + _tempMatrix.d * pt.c; + wt.d = _tempMatrix.c * pt.b + _tempMatrix.d * pt.d; + wt.tx = _tempMatrix.tx * pt.a + _tempMatrix.ty * pt.c + pt.tx; + wt.ty = _tempMatrix.tx * pt.b + _tempMatrix.ty * pt.d + pt.ty; } else { - // lets do the fast version as we know there is no rotation.. - a = this.scale.x; - d = this.scale.y; + // so if rotation is between 0 then we can simplify the multiplication process... + if (this.rotation % CONST.PI_2) + { + // check to see if the rotation is the same as the previous render. This means we only need to use sin and cos when rotation actually changes + if (this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } - tx = this.position.x - this.pivot.x * a; - ty = this.position.y - this.pivot.y * d; + // get the matrix values of the displayobject based on its transform properties.. + a = this._cr * this.scale.x; + b = this._sr * this.scale.x; + c = -this._sr * this.scale.y; + d = this._cr * this.scale.y; + tx = this.position.x; + ty = this.position.y; - wt.a = a * pt.a; - wt.b = a * pt.b; - wt.c = d * pt.c; - wt.d = d * pt.d; - wt.tx = tx * pt.a + ty * pt.c + pt.tx; - wt.ty = tx * pt.b + ty * pt.d + pt.ty; + // check for pivot.. not often used so geared towards that fact! + if (this.pivot.x || this.pivot.y) + { + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; + } + + // concat the parent matrix with the objects transform. + wt.a = a * pt.a + b * pt.c; + wt.b = a * pt.b + b * pt.d; + wt.c = c * pt.a + d * pt.c; + wt.d = c * pt.b + d * pt.d; + wt.tx = tx * pt.a + ty * pt.c + pt.tx; + wt.ty = tx * pt.b + ty * pt.d + pt.ty; + } + else + { + // lets do the fast version as we know there is no rotation.. + a = this.scale.x; + d = this.scale.y; + + tx = this.position.x - this.pivot.x * a; + ty = this.position.y - this.pivot.y * d; + + wt.a = a * pt.a; + wt.b = a * pt.b; + wt.c = d * pt.c; + wt.d = d * pt.d; + wt.tx = tx * pt.a + ty * pt.c + pt.tx; + wt.ty = tx * pt.b + ty * pt.d + pt.ty; + } } // multiply the alphas.. diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 7aead33..d642dce 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -74,6 +74,32 @@ this.ty = array[5]; }; + +/** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ +Matrix.prototype.set = function (a, b, c, d, tx, ty) +{ + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; + + return this +}; + + /** * Creates an array from the current Matrix object. * @@ -246,6 +272,48 @@ }; /** + * Sets the matrix based on all the available properties + * + * @param {number} x + * @param {number} y + * @param {number} pivotX + * @param {number} pivotY + * @param {number} scaleX + * @param {number} scaleY + * @param {number} rotation + * @param {number} skewX + * @param {number} skewY + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ +Matrix.prototype.setTransform = function (x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) +{ + var a, b, c, d, tx, ty, sr, cr; + + sr = Math.sin(rotation); + cr = Math.cos(rotation); + cy = Math.cos(skewY); + sy = Math.sin(skewY); + nsx = -Math.sin(skewX); + cx = Math.cos(skewX); + + a = cr * scaleX; + b = sr * scaleX; + c = -sr * scaleY; + d = cr * scaleY; + + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; + + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); + + return this; +}; + +/** * Prepends the given Matrix to this Matrix. * * @param {PIXI.Matrix} matrix