Sahil Posted April 29, 2018 Share Posted April 29, 2018 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? Shahdee and ivan.popelyshev 2 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted April 29, 2018 Share Posted April 29, 2018 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. Sahil 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted April 29, 2018 Share Posted April 29, 2018 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 1 Quote Link to comment Share on other sites More sharing options...
Sahil Posted April 29, 2018 Author Share Posted April 29, 2018 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 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted April 29, 2018 Share Posted April 29, 2018 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 !!!) Sahil and Shahdee 2 Quote Link to comment Share on other sites More sharing options...
OSUblake Posted April 30, 2018 Share Posted April 30, 2018 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 Sahil and jojomasala 2 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted April 30, 2018 Share Posted April 30, 2018 @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? Quote Link to comment Share on other sites More sharing options...
OSUblake Posted May 1, 2018 Share Posted May 1, 2018 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 2, 2018 Share Posted May 2, 2018 > value is stored in degrees Exactly. https://github.com/pixijs/pixi.js/pull/4579 - store in degrees, read in deg/rad Quote Link to comment Share on other sites More sharing options...
haseeb Posted December 1, 2020 Share Posted December 1, 2020 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 1 Quote Link to comment Share on other sites More sharing options...
jojomasala Posted March 8, 2022 Share Posted March 8, 2022 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.