Jump to content

Using Phaser.RESIZE with high pixel ratio devices


Recommended Posts

Hi guys,


I'm having a slight problem getting my head round using the Phaser.RESIZE scale mode with devices which have a higher pixel ratio than 1. The game resizes fine, but on modern iOS and android devices, the game loses its 'crispness', and objects become blurry, particularly smaller text.


I know this is down to higher pixel densities of these devices, but I've not managed to find a solution for the canvas to utilise these extra pixels, as resize mode seems to be bound to the physical document dimension (I'm creating a responsive game which will fill the device/webpage window on either orientation, so sadly the SHOW_ALL approach won't work).


Just wondering if anyone had uncovered any solution, or had any advice, as there doesn't seem to have been any conclusion on other similar posts.


Thanks as always!

Link to comment
Share on other sites

Would just like to update you all on a potential solution to this, I will need to give it some further testing but it seems to be working well on desktop and iOS.


The solution is to use the Phaser.USER_SCALE scale mode instead. By calling the custom resize callback, you can multiply the game width and height by the extra pixel factor, and then scale down back down inversely using the custom user scale - this allows you to make the most of devices with higher pixel ratios, and keeps assets crisp whilst responsive. One downside, however, is that these devices could suffer from slight lag due to the increased game dimension - i've not suffered this yet, but in any case i've added a multiplier which you can adjust to find the right balance between quality and speed.


(apologies for the code - I'm using typescript)

// Located within boot statecreate() {this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;this.game.scale.pageAlignHorizontally = true;this.game.scale.pageAlignVertically = true;this.game.scale.windowConstraints.right = "layout";this.game.scale.windowConstraints.bottom = "visual";this.game.scale.setResizeCallback(this.resizeCallback,this);this.game.scale.onSizeChange.add(this.onSizeChange, this);}resizeCallback(manager){var userRatio = 1;if (this.game.device.pixelRatio>1){userRatio = this.game.device.pixelRatio * 1;//If you are finding you game is lagging on high density displays then change the value to a low number (0.75 for example)}if(manager.width !== window.innerWidth*userRatio || manager.height !== window.innerHeight*userRatio){manager.setGameSize(window.innerWidth*userRatio,window.innerHeight*userRatio);manager.setUserScale(1/userRatio, 1/userRatio);}}onSizeChange(){this.game.state.callbackContext.resize();//Calls the resize method in current state (make sure each state has this)}

Let me know if this solution helps and works for you, or any improvements you can suggest!



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.

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.


  • Recently Browsing   0 members

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