Css transform rotation on canvas leads to coordinates bug. Workaround needed.

[Tymski]

I change rotation of my game canvas with css when I rotate my device:

gameCanvas.style.transform = rotate(-90deg)

And when I click on my sprites they don't work (other sprites get their action instead) (It clicks as if the gameCancas was not rotated)
There is a problem with pixi's coordinate system I suspect.
How to make a workaround around this bug?

[Taz]

Have you tried rotating the stage instead of the canvas? You can rotate the stage 90 degrees like this:

app.stage.pivot.set(app.stage.width / 2, app.stage.height / 2);
app.stage.rotation = Math.PI / 2;

 

[Tymski]

@Taz My stage width and height is variable.

[Taz]

1 hour ago, Tymski said:

@Taz My stage width and height is variable.

Ah, overlooked that part. This should work if you do it at start and on window resize:

app.stage.width = app.renderer.width;
app.stage.height = app.renderer.height;
app.stage.pivot.set(app.stage.width / 2, app.stage.height / 2);
app.stage.rotation = Math.PI / 2;

 

[Tymski]

6 hours ago, Taz said:

Ah, overlooked that part. This should work if you do it at start and on window resize:

app.stage.width = app.renderer.width;
app.stage.height = app.renderer.height;
app.stage.pivot.set(app.stage.width / 2, app.stage.height / 2);
app.stage.rotation = Math.PI / 2;

 

I don't understand what you are trying to do. Clearly changing the stage width and height will scale it... I don't want to give weird scale to my game, just want to rotate it LOL.

[Taz]

3 hours ago, Tymski said:

I don't understand what you are trying to do. Clearly changing the stage width and height will scale it... I don't want to give weird scale to my game, just want to rotate it LOL.

LOL, good point, I forget that setting container dimensions adjusts the scale too, rather than just setting the size of the container (not sure if I'll ever get used to that).

Hmm, I guess I'm stumped then. It looks like the pivot point would need to be updated every time you add or remove from stage. It sure seems like there would be an easierl way to rotate the stage but I don't know.

[Tymski]

Anyone?

[ivan.popelyshev]

Please dont use CSS transform on canvas. Just change canvas width/height and rotate/translate the stage container.

[Taz]

2 hours ago, ivan.popelyshev said:

Please dont use CSS transform on canvas. Just change canvas width/height and rotate/translate the stage container.

How do you recommend to rotate the stage 90 degrees around its center?

[ivan.popelyshev]

var screen = renderer.screen;

stage.position.set(screen.width/2, screen.height/2); // center of the screen
state.rotation = Math.PI/2;
stage.pivot.set(screen.width/2, screen.height/2); // camera coords, but i think in that case its same as screen center