Rotate sprite in PIXI Projection

[codingjoe]

Hello,

I´m trying to rotate a sprite within a pixi.projection. Do i use rotate for that?

It looks like the image warped incorrectly.

What needs to be done?

[jonforum]

use `ObservableEuler` 
https://github.com/pixijs/pixi-projection/blob/a33e4e7117694436d45705d544a0dd87663ae175/dist/pixi-projection.js#L2935

it in your sprite 3d
sprite.euler[props] = value

Edited September 13, 2020 by jonforum

[codingjoe]

As far as i can tell from reading the docs i can`t use this with the 2d projection I use (need a 3d camera)

How do i create a projection with 3d Sprites?

Would It help to provide a codepen example?

 

Thanks for the help.

[jonforum]

You have some basics official demo provide by ivan ( Autor )
https://pixijs.io/examples/#/plugin-projection/iso-basic.js
and i have some customs experimental  playgrounds

https://www.pixiplayground.com/#/edit/gqBdNMjJxm_eVh2ag87CH

https://www.pixiplayground.com/#/edit/CRHMfHMsaM82X5EfCtNYe

https://www.pixiplayground.com/#/edit/ziTqfWG24v3A2ROJm6Y0o
 

and no, rotation should work both in 2d and 3d 
try look for proj.affine in 2d demo

forget euler is in 3d proj only, sorry for this.

https://pixijs.io/examples/#/plugin-projection/plane.js

3d + camera is maybe overkill for your need. 

 

Edited September 14, 2020 by jonforum

[codingjoe]

@jonforum   I created an example: https://codepen.io/webdev-ux/pen/XWdYzvG

When the image is rotated, the width and height seem to be warped. I want to keep the ratio and height, width.

Do you understand understand what I mean ? The affine property doesn`t solve the problem because I want a normal rotation, without x or y axis. 

[jonforum]

42 minutes ago, codingjoe said:

@jonforum   I created an example: https://codepen.io/webdev-ux/pen/XWdYzvG

When the image is rotated, the width and height seem to be warped. I want to keep the ratio and height, width.

Do you understand understand what I mean ? The affine property doesn`t solve the problem because I want a normal rotation, without x or y axis. 

at line 46 try add 
 

bunny.proj.affine = 2; // or = PIXI.projection.AFFINE.AXIS_X 



console.log(bunny.proj); // show current setup for your sprite
console.log(PIXI.projection.AFFINE); // will show you all mode avaible (by no mutable key number)

is the type of rotation your search ?

  

42 minutes ago, codingjoe said:

When the image is rotated, the width and height seem to be warped. I want to keep the ratio and height, width.

Do you understand understand what I mean ? The affine property doesn`t solve the problem because I want a normal rotation, without x or y axis. 

I you want to keep the ratio and height, width.

Also try ` bunny.proj.scaleAfterAffine = false` to fix deformation if is what you need.
note that proj2d is limited, you will have to switch to proj3d for more possibilities and avoid some strange artifacts in some cases.

from my point of view.
Proj2d is more efficient and perfect for application engine. (with some limited transform behavior)
And proj3d is heavier and need a more complex ecosystem but great for games engine. (fix all transforms issu in proj2d)

Edited September 14, 2020 by jonforum