Sign in to follow this  

Phaser, Canvas HighDPI Size, Input Problems

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? :)


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.