Jump to content

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


Tymski
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 weeks later...
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?

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...