DubMan

PIXI.Projection Transform problem

Recommended Posts

PIXI.Projection problem

Hello, I am battling with PIXI.Projection

 

I want to get the Transform of one object and use its world transform to add it to another container with the same dimesions.

Basically I want to copy the exact object and pasting it on the other container should then match.

 

So all is fine if I get the worldTransform of one object, and prepend the world transformation of the container, then creating an object by decomposing into a Transform.

 

 

Stack 1 is the object i am copying from

 

let cont = new PIXI.projection.Container3d();
let cont1 = new PIXI.projection.Container3d();
cont.addChild(cont1);
let stack1Obj = new TableGame.Widget.ChipStack({amount:10});
let stack1 =stack1Obj.view;

stack1.y -= 200;
cont1.addChild(stack1);
cont1.scale.set(3);

cont1.x = 0;
tableCont.addChild(cont);
cont.x = 500;
cont.y = 800;
cont.alpha = 0.5;
let m = new PIXI.projection.Matrix3d();
stack1.worldTransform.copyTo(m);
let wt = new PIXI.projection.Matrix3d();
tableCont.worldTransform.copyTo(wt);
wt = wt.invert();

m.prepend(wt);
let m2 = new PIXI.Matrix();
m.copyTo(m2);

let t = new PIXI.Transform();
m2.decompose(t);
let stack3Obj = new TableGame.Widget.ChipStack({amount: 10});
let stack3 = stack3Obj.view;
stack3.setTransform(t.position.x, t.position.y, t.scale.x, t.scale.y, t.rotation, t.skew.x, t.skew.y, t.pivot.x, t.pivot.y);
tableCont.addChild(stack3);

 

This code all works above to create a replica of an object and copy it to the table container.

The moment I add in a camera with a euler on the x, the above doesn't work anymore.

let camera = new PIXI.projection.Camera3d();
camera.setPlanes(800, 10, 10000, false); // true if you want orthographics projection
camera.position.set(gameWidth / 2, gameHeight / 2 - 200);
camera.euler.x = Sys.MathUtils.degToRad(deg); // Works with this commented out 
//camera.position3d.z = 0;
//camera.y = 220;
camera.addChild(tableCont);

I know it has do with the current camera not being taking into account with all the previous matrix calculations.

image.png.952cda59b177f38446084d1989855394.png

 

Lines up,

There are no real docs on PIXI.projection so I'm a bit stuck.

With a camera and euler angle I get this:

image.png.0b6c06604acac104b0566cab05ea04a9.png

 

Can anyone help, or knows what else I need to do here.

 

 

 

Share this post


Link to post
Share on other sites

pixi projection has some special hacks that allow it to copy its matrices to usual 3x2 format, which is not good in your case :)

instead "copyTo" you can use "copyTo2dOr3d"

IF that's not enough, please make minimal demo for me at codepen, jsfiddle or somewhere else, i'll help you to find what works there (i didnt have that task before). You can reference "pixijs.io/examples/pixi-plugins/pixi-projection.js" in those demos.

Share this post


Link to post
Share on other sites

Thanks for the help.

No problems, I realized if I add the item at 0,0 position, it looks like an exact copy. But then as soon as I try to move it somewhere on screen, the camera projection gets added to it.

So if there was a way to an object to the screen and stop it from applying the camera projections that would work.

I also noticed there is no decompose method for Matrix3D/Matrix2D which isn't nice, because then I need to first copy it to a  PIXI.Matrix before getting a transform.

Edited by DubMan

Share this post


Link to post
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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.