Jump to content

Transform Sprite like a trapezoid (trapezium)


Recommended Posts

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  :D),
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 



Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 4 weeks later...


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 !

Link to comment
Share on other sites

  • 10 months later...

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...