Jump to content

Phaser, Canvas HighDPI Size, Input Problems


selfsx
 Share

Recommended Posts

Hey, Everyone :) I'm dying making attempts to scale canvas for high dpi mobiles and get everything work correctly.

Problem: When I start Phaser with 100% width/height for canvas it will be created according to css pixel size of device (window.innerWidth/innerHeight). So iPhone 6S for example, gets, 375x667 canvas, but in fact, of course it should be 2x bigger because devicePixelRatio is 2. Result, everything is blurry and not as expected.

Ok, I decided to set width and height with devicePixelRatio included and then set CSS size of canvas to 100% of view port.

let w = window.innerWidth * window.devicePixelRatio;
let h = window.innerHeight * window.devicePixelRatio;

let game = new Game(w, h)

// And then in style sheet:

canvas {
  width: 100vw !important;
  height: 100vh !important;
}

Now, it seems like everything looks perfect and as expected (is it correct way to do it?). But, another problem rises. Seems like after this events.onInputDown do not work correctly. When I click on sprite nothing happens, but in different location click handled. Seems like coordinates of input arena is messed up. Can someone help me this this? :)

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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