Transform Sprite like a trapezoid (trapezium)

[bongo]

Hi,

 

i would like to transform a sprite or its texture so that i get a trapezoid form.

I don't really know how to achieve this.

My current approach would be to make a class which is derived from Sprite and alter there the the "updateTransform" function (Until now i only get a kind of skewed image  ),

but I guess there is a simpler way to transform the sprite which i can't figure out  .

Hopefully anybody here has an answer to this question which is bothering me since 2 days.

 

Thanks in advance 

 

 

 

[xerver]

You pretty much nailed it, override updateTransform and use the skew element of the projection matrix. We don't have a way to easily skew sprites besides that right now, just because it is so uncommon for someone to need that feature. Feel free to open an issue on our github!

[bongo]

Okay so its possible to skew it but to form it like a trapezoid isn't possible right ?

[xerver]

I'm not sure what you mean? Are you trying to mask off and clip it to look like a trapezoid? You can do that by creating a Graphics object, drawing the shape and using that as the mask of the sprite.

[bongo]

I have attached two files to demonstrate what i mean  .

[jhenzone]

@bongo, are you able to solve this? I'm trying to do the same thing. 

[TheTrope]

Trying to do the same, there is some information here too : http://www.html5gamedevs.com/topic/1300-how-to-use-transform-in-displayobject/

 

But mat3 don't exsist anymore so...

[jhenzone]

I found this and it's very helpful, it worked for me  

http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html

[TheTrope]

Thanks !

But how did you implement it in pixi? (For the click hitboxes for examples)?

[jhenzone]

I'm very new to phaser and pixi, but basically, what I did is,

I instantiated a separate canvas and do all those trapezoid transformation stuff there

to avoid messing with the main game canvas,

and from there, you can use that canvas' content as a sprite

You can also check this: http://www.html5gamedevs.com/topic/4183-mixing-in-3d-elements/?p=27315

[TheTrope]

Thanks

It seems to work but it works too with overriding this:

mySprite.updateTransform = function()	{		// TODO OPTIMIZE THIS!! with dirty			if(this.rotation !== this.rotationCache)			{				this.rotationCache = this.rotation;				this._sr =  Math.sin(this.rotation);				this._cr =  Math.cos(this.rotation);			}	   // var localTransform = this.localTransform//.toArray();		var parentTransform = this.parent.worldTransform;//.toArray();		var worldTransform = this.worldTransform;//.toArray();		var px = this.pivot.x;		var py = this.pivot.y;		var a00 = this._cr * this.scale.x,			a01 = Math.tan(1) * this.scale.y;//-this._sr * this.scale.y,			a10 = Math.tan(3);//this._sr * this.scale.x,			a11 = this._cr * this.scale.y,			a02 = this.position.x - a00 * px - py * a01,			a12 = this.position.y - a11 * py - px * a10,			b00 = parentTransform.a, b01 = parentTransform.b,			b10 = parentTransform.c, b11 = parentTransform.d;		worldTransform.a = b00 * a00 + b01 * a10;		worldTransform.b = b00 * a01 + b01 * a11;		worldTransform.tx = b00 * a02 + b01 * a12 + parentTransform.tx;		worldTransform.c = b10 * a00 + b11 * a10;		worldTransform.d = b10 * a01 + b11 * a11;		worldTransform.ty = b10 * a02 + b11 * a12 + parentTransform.ty;		this.worldAlpha = this.alpha * this.parent.worldAlpha;	};

I changed a01 and a10. And i had a skew of my sprite.

But it's just mathematics, and i'm bad with matrix projections. But it seems we can't do anything else than skew sprites.

 

If you understand it, maybe you will be able to find the solution

 

Thank you !

[palazzol]

I think this is possible, using a dedicated parent DisplayObjectContainer for your Sprite.  I am very new to PIXI, but I have managed to stretch sprites along an arbitrary access way, and it works really well.  I know that's not exactly the same transformation, but the technique is very clean because it doesn't require any overrides of updateTransform.  If you're interested, I'll see if I can update my test code to do this and post it here.