Tips for skew shaped and images?

[proyb2]

Tips or tutorials on creating a rectangle shaped with skew in y-axis as well as image would be appreciate which I think this hasn't been solve?

[wayfinder]

You can use matrix transforms to apply skew to objects. It's not straightforward, and it's not well-documented, but it's possible. Every display object has a property called "worldTransform", which is a local transformation matrix that's applied at render time. All the positioning, rotating and scaling Phaser does to objects is internally calculated into that matrix. It's possible to add skew to it, look up affine transformation matrices

[proyb2]

I'm not sure how to use worldTransform, appreciate if you could shown an example?

 

After 1 year of waiting for skew, hopefully the author will adding this to primitive, bitmapdata, sprites and images object.

[wayfinder]

I suggest you try this (it has worked for me, although it is in all probability still buggy in certain cases, and since the sin/cos aren't cached it's going to be a little slower. But hey

 

1. Extend your object that you want to skew

2. Give it skewX and skewY properties.

3. Create a function for your extended prototype called "updateTransform"

4. Go into the phaser source code and copy the content of PIXI.DisplayObject.prototype.updateTransform into your overriding updateTransform

5. Replace the following lines:

        a  =  this._cr * this.scale.x;        b  =  this._sr * this.scale.x;        c  = -this._sr * this.scale.y;        d  =  this._cr * this.scale.y;

With this:

        a  =  this.scale.x * Math.cos(this.rotation + this.skewY);        b  =  this.scale.x * Math.sin(this.rotation + this.skewY);        c  =  this.scale.y * Math.sin(-this.rotation - this.skewX);        d  =  this.scale.y * Math.cos(this.rotation + this.skewX);

6. comment out the rotation cache calculation

7. amend the if clause "if (this.rotation % PIXI.PI_2)" to say "if (this.rotation % PIXI.PI_2 || this.skewX || this.skewY)"

 

Now you have objects with Flash-compatible skewX and skewY values (ie skewX and skewY are radians values of skew angles). 

 

At least that's how it works for me (top sprite's texture is circular):

 

 

 

If you want ALL DisplayObjects to have skew, you can try and override the function you copied from (PIXI.DisplayObject.prototype.updateTransform). In that case, I suggest you add checks for whether skewX and skewY exist, or otherwise make sure they are added in the constructor. I have not tested this and I cannot guarantee it'll work.

[proyb2]

Is the step you're describing is somewhat similar to this including the rotateSpeed added in the constructor?

http://phaser.io/examples/v2/sprites/extending-sprite-demo-1#gv

[wayfinder]

Similar to the MonsterBunny.prototype.update function, in terms of structure setup (although of course a bit different in its specifics)

 

In the constructor, you would add this.skewX and this.skewY as properties

[webcaetano]

skew (x,y) should be an property on Phaser/Laser

So we can tween it  too. Like scale

 

This is very important for modular animations. 

[samme]

On 6/23/2015 at 1:46 PM, wayfinder said:

I suggest you try this (it has worked for me, although it is in all probability still buggy in certain cases, and since the sin/cos aren't cached it's going to be a little slower. But hey

 

[Kingsley Zheng]

On 2017/3/22 at 5:54 AM, samme said:

 

Hello samme , this demo is very useful for me .

 

now it's like Parallelogram with out Vanishing poin.

 

Does phaser skew can do Vanishing point ?

[samme]

9 hours ago, Kingsley Zheng said:

Does phaser skew can do Vanishing point ?

I don't think so.

[nag0121]

On 6/23/2015 at 11:13 PM, proyb2 said:

I'm not sure how to use worldTransform, appreciate if you could shown an example?

 

After 1 year of waiting for skew, hopefully the author will adding this to primitive, bitmapdata, sprites and images object.

so, you know how to skew an image that we add to phaser.? 

[nag0121]

On 6/24/2015 at 2:16 AM, wayfinder said:

I suggest you try this (it has worked for me, although it is in all probability still buggy in certain cases, and since the sin/cos aren't cached it's going to be a little slower. But hey

 

1. Extend your object that you want to skew

2. Give it skewX and skewY properties.

3. Create a function for your extended prototype called "updateTransform"

4. Go into the phaser source code and copy the content of PIXI.DisplayObject.prototype.updateTransform into your overriding updateTransform

5. Replace the following lines:

        a  =  this._cr * this.scale.x;        b  =  this._sr * this.scale.x;        c  = -this._sr * this.scale.y;        d  =  this._cr * this.scale.y;

With this:

        a  =  this.scale.x * Math.cos(this.rotation + this.skewY);        b  =  this.scale.x * Math.sin(this.rotation + this.skewY);        c  =  this.scale.y * Math.sin(-this.rotation - this.skewX);        d  =  this.scale.y * Math.cos(this.rotation + this.skewX);

6. comment out the rotation cache calculation

7. amend the if clause "if (this.rotation % PIXI.PI_2)" to say "if (this.rotation % PIXI.PI_2 || this.skewX || this.skewY)"

 

Now you have objects with Flash-compatible skewX and skewY values (ie skewX and skewY are radians values of skew angles). 

 

At least that's how it works for me (top sprite's texture is circular):

 

 

 

If you want ALL DisplayObjects to have skew, you can try and override the function you copied from (PIXI.DisplayObject.prototype.updateTransform). In that case, I suggest you add checks for whether skewX and skewY exist, or otherwise make sure they are added in the constructor. I have not tested this and I cannot guarantee it'll work.

if possible give us your source code it would be better to understand.

 

[nag0121]

On 1/25/2018 at 10:53 PM, samme said:

I don't think so.

do you know how to use the skew concept in phaser?