how to use transform in displayobject

[vaibhavsilar]

Hello,

 

I want to use setTransform method of canvas in pixijs.

Is there any interface in pixijs to apply this concept.

 

I have tried implementing like this:

 

displayObj.localTransform = [1, 1, 1, 1, 0, 0];

 

but its not working. Please suggest.

 

Thanks

vbh

 

 

[xerver]

What are you trying to accomplish? More than likely you can use our properties instead of setting the transform directly.

[vaibhavsilar]

Thanks for you reply. I am just trying to skew image. I have not found tutorial for skewing.

May you please help

[Mat Groves]

hello!

Best to override the updateTransform - as at the moment the skews are not taken into account with pixi..

SkewableSprite.updateTransform = function(){	// TODO OPTIMIZE THIS!! with dirty		this.localTransform[0] = this.scale.x//this._cr * this.scale.x;	this.localTransform[1] = Math.tan(this.skew) * this.scale.y;// -this._sr * this.scale.y	this.localTransform[3] = 0//Math.tan(0.5);//this._sr * this.scale.x;	this.localTransform[4] = this.scale.y//this._cr * this.scale.y;			///AAARR GETTER SETTTER!		this.localTransform[2] = this.position.x;	this.localTransform[5] = this.position.y;		// TODO optimize?	mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform);	this.worldAlpha = this.alpha * this.parent.worldAlpha;		}

hope this helps!

[Chen Ling Xue]

@Mat Groves

can you show me how an example on how to skew a image using phaser.js/pixi.js
 

using your example

SkewableSprite.updateTransform = function()
{
    // TODO OPTIMIZE THIS!! with dirty
    
    this.localTransform[0] = this.scale.x//this._cr * this.scale.x;
    this.localTransform[1] = Math.tan(this.skew) * this.scale.y;// -this._sr * this.scale.y
    this.localTransform[3] = 0//Math.tan(0.5);//this._sr * this.scale.x;
    this.localTransform[4] = this.scale.y//this._cr * this.scale.y;
    
        ///AAARR GETTER SETTTER!
    
    this.localTransform[2] = this.position.x;
    this.localTransform[5] = this.position.y;
    
    // TODO optimize?
    mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform);
    this.worldAlpha = this.alpha * this.parent.worldAlpha;        
}

[xerver]

We ended up not keeping it in the core lib, but here was how I implemented skew a while ago:

https://github.com/GoodBoyDigital/pixi.js/commit/9ae248c5564bfa0f1c607957de5217c0b2ca26d1