Scaling rectangle from center and transform Origin

[Sahil]

Hi,

I was just getting started with PIXI js and had couple of questions regarding transform origin. Both questions are related to transform origin and positioning so I thought I will ask them in same question.

 

In first example I want to scale rectangle from center but when I scale it it scales from top left corner. As I was writing this question I realized that the graphics object is getting scaled and it makes sense that rectangle gets scaled to top left corner. In demo I have code commented out where my approach is to transform graphics object to center so scaling will be from the center. Is there another approach to scale shapes from center?

Basically I want to animate multiple rectangles and I would rather create single graphics object to scale all rectangles from their center instead of using one graphics object per rectangle. (that is if my commented approach is correct);

https://codepen.io/Sahil89/pen/rvjwwP?editors=0010

 

In second example, I wanted to give my text object a fixed position and translate it using mouse coordinates. But it seems like there isn't a way to give a fixed position to sprites and translate them from that position. So lets say I have multiple sprites I have to do additional calculation to translate them relative to their original position.

https://codepen.io/Sahil89/pen/QrdgBx?editors=0010

If I had to do it using 2d Canvas I would have created my object with left and top property as following example,

https://codepen.io/Sahil89/pen/OZWjPZ?editors=1010

can I do something similar with PIXI sprites?

[ivan.popelyshev]

You have to study the way pixi transforms work. Each container has Position, Scale, Rotation, Pivot.

Container transform affects its children. Position+pivot combo allows to "pin" world coords (position) to local (pivot) in a certain point. Pixi does not have origin point, to emulate it you can add certain value both to position and pivot.

I would like to explain more, but its better if you just search through the forum and pixijs issues https://github.com/pixijs/pixi.js/issues , and I accumulate saved time to make an article to help people.

> Basically I want to animate multiple rectangles and I would rather create single graphics object to scale all rectangles from their center instead of using one graphics object per rectangle. (that is if my commented approach is correct)

Use graphics "position", "scale" and "pivot" fields. Experiment. Make friends with them. You cannot scale individual rectangle because its a shape inside graphics and not a child of pixi stage tree.

Your goal also can be achieved with Container and multiple Sprites with PIXI.Texture.WHITE and colored tint inside.

[ivan.popelyshev]

By the way, that's good first question. Transform fields are first-class citizens in renderer libraries, they are much more important than anything else (layout,width,height,stuff). You should also search for threads related to "camera", how to emulate it through pixi transforms.

[Sahil]

Ya I still need to experiment with pivot and few other properties. Thanks a lot for the response, would have been great if there was fixed origin but I can work around it.

[ivan.popelyshev]

Yep, that's an old issue

https://github.com/pixijs/pixi.js/issues?utf8=✓&q=is%3Aissue+origin+rotation - search

https://github.com/pixijs/pixi.js/issues/3961

https://github.com/pixijs/pixi.js/issues/1061

https://github.com/pixijs/pixi.js/issues/583 ( 2014 !!!)

 

[OSUblake]

Pivot works like the registration/reference point in graphic editing software. Both of these boxes are positioned at 0, 0. The second box will transform around its center.

 

 

 @ivan.popelyshev Is there any word on Chad's proposal for adding an origin property to transforms in v5?

https://github.com/pixijs/pixi.js/issues/4138

https://github.com/pixijs/pixi.js/issues/997

If there was an option to do a smooth origin like GreenSock does with SVG, that would be icing on the cake. ?

https://codepen.io/GreenSock/pen/PqbWmZ

 

 

[ivan.popelyshev]

@OSUblake 

I think its a good time to do that, add one extra object inside Transform, we may do it for V5.

Currently there's other talk about Transforms, im trying to add degrees as an option instead of radians.

Also, I published this thing 2 days ago: http://pixijs.io/examples/#/projection/runner.js , it has extra props: position3d, euler, scale3d, pivot3d.

Smooth origin requires a place where we accumulate offset, do you have an idea where to store it?

 

[OSUblake]

Love the demo! And degrees would be nice. I don't think a lot of people are going to care if the value is stored in degrees as long as there is a way to get and set it in radians.

 

GreenSock stores the value in an offset property. You can see the some of the transform values here.

https://codepen.io/osublake/pen/BxWayz

The origin is stored in global coordinates, allowing you to switch between a local and global origin.

https://codepen.io/GreenSock/pen/waKrNj

 

[ivan.popelyshev]

> value is stored in degrees 

Exactly. https://github.com/pixijs/pixi.js/pull/4579 - store in degrees, read in deg/rad 

[haseeb]

On 4/30/2018 at 2:50 PM, OSUblake said:

Pivot works like the registration/reference point in graphic editing software. Both of these boxes are positioned at 0, 0. The second box will transform around its center.

 

 

 @ivan.popelyshev Is there any word on Chad's proposal for adding an origin property to transforms in v5?

https://github.com/pixijs/pixi.js/issues/4138

https://github.com/pixijs/pixi.js/issues/997

If there was an option to do a smooth origin like GreenSock does with SVG, that would be icing on the cake. ?

https://codepen.io/GreenSock/pen/PqbWmZ

 

 

Hi, had you impliment this with pixi?
i want to add this transform points to sprite.

 

[jojomasala]

On 12/1/2020 at 8:29 AM, haseeb said:

Hi, had you impliment this with pixi?
i want to add this transform points to sprite.

 

Did you do this yourself? I'm looking to do something similar