Using Phaser.RESIZE with high pixel ratio devices

[seejay92]

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!

[seejay92]

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!

 

Thanks!