2D Transform

[Levelleor]

Because Pixi is built on JS I expected it to have all or most CSS properties. I started developing assuming something like Matrix3D already exists. I am having difficulties understanding how this plugin works, I don't understand most of the examples. It would be awesome if examples instead showed simple transformations.

I need to rotate a container in my game vertically a little back, meaning I need something like this in CSS:

transform: perspective(600px) rotateX(45deg);

Or this:

 transform: matrix3d(2.1, -0, 0, 0, 
                    -0.68, 1.81, 0, -0.003, 
                    0, 0, 1, 0, 
                    138, 99, 0, 1);

Both result into a trapezoid (thought I messed up the second one).

How would I go with achieving the same in Pixi Projection?

Another question: If I alter the parent container, will it alter the projection of all children? That would be awesome if I could alter the whole container with a single line.

[ivanpopelyshev]

If I alter the parent container, will it alter the projection of all children? yes :)

transform: perspective(600px) rotateX(45deg);

i dont remember whats perspective 600px in css. If you know how pixi transforms work (position,rotation,scale,pivot), 3d are the same , just (position3d, euler3d, scale3d, pivot3d), applied after 2d transform of element. In css you can change order, in pixi - you cant.

You need a camera that changes perspective, and dont forget that camera props are in reverse, because that's a camera for gamedev projects. That's because camera position and object position should negate each other, as well as other fields of transform.

position,rotation,scale,pivot
projection
pivot3d^-1, scale3d^-1, euler3d^-1  position3d^-1

that's the order for camera.

as for assigning that matrix - well, its possible, but in which coords is this matrix? :) i dont know, and I dont want to look in the code before i move projection to pixi-v6, so you are on your own.

camera projection is easy - you specify the distance in pixels between monitor and user. It does not transform z=0 at all, so 2d elements dont move anywhere.

[Levelleor]

@ivanpopelyshev Thank you for prompt reply but I still understood quite little about how to use the plugin. I am stuggling with the basics.

How do I apply a transform? I went through all the examples and the 2D example "One-point with return to affine" actually provides something I need. It renders the plane as a trapezoid, but I don't understand the code. What exactly makes it appear like that? What are the inputs?

[ivanpopelyshev]

ok, 2d projection works two ways:

1. you specify point where X-axis lines converge, or Y-axis
2. you specify four points and map a quad on it. It uses unique approach based on 3x3 matrices. Its bad for panning/scrolling, because it does not follow usual 3d rules, not enough info

3d projection is the usual 3d stuff, when you want to scale/rotate objects according to 3d projection. However, it has some features of 2d proejction: it can override X-axis or Y-axis to make billboard objects or something like that )

[Levelleor]

@ivanpopelyshev That sounds useful to me. I need this transform only once in the whole game.

I got the first part about the axis. I still do not understand what are the 4 points and how do I map them.

From the example it looks like this is where the transform appers, so setAxisY is the method I'm looking for). The position parameter, I assume, is the convergence point, then the factor is supposed to be that quad object which I don't understand.

container.proj.setAxisY(pos, -squareFar.factor);

Again, all I am looking for is the following effect:

I feel like it should not be difficult here, especially with an external plugin but somehow I am still struggling to understand how to use it. What am I missing?

[ivanpopelyshev]

I still do not understand what are the 4 points and how do I map them.

corners.

https://pixijs.io/examples/#/plugin-projection/quad-homo.js https://github.com/pixijs/pixi-projection/blob/master/src/proj2d/Projection2d.ts#L53

That's the solution of "i want corners of this sprites to be in those 4 points"

Do it for single sprite, and everything that is inside will follow the same transform.

[Levelleor]

Alright, I think I got it working based on the linked example.

Thank you.

[ivanpopelyshev]

Good. Thank you for the idea to add CSS transforms to this lib!

[skizzo]

Hello, is it somehow possible to apply the transform (matrix3d) and transformOrigin of this example in Pixi? Thank you for any hints!