Game looks pixelated on retina devices using RESIZE ScaleMode

[TheBikingViking]

Hi everyone

 

I recently changed to use the RESIZE scale mode so I can make the game fully responsive, and that worked great.

 

However, the game now looks pixelated on retina devices, e.g. my iPhone 6.

 

Initially, I thought it was because I no longer set the game width/height as a multiplication of the pixelRatio, but even though I added that back in, the pixelation still occurs.

 

I set the game up like this:

new Phaser.Game(  window.innerWidth * window.devicePixelRatio,  window.innerHeight * window.devicePixelRatio,  Phaser.AUTO,  "renderer");

In boot function, I set the game up like this:

this.game.time.advancedTiming = true;this.game.stage.disableVisibilityChange = true;this.game.input.maxPointers = 1;this.game.scale.scaleMode = Phaser.ScaleManager.RESIZE;this.game.scale.setMinMax(  Constants.GAME_MIN_WIDTH, Constants.GAME_MIN_HEIGHT,  Constants.GAME_WIDTH, Constants.GAME_HEIGHT);this.game.scale.pageAlignHorizontally = true;this.game.scale.pageAlignVertically = true;this.game.scale.refresh();

And my resize function calls a setGameScale function, that is called at the end of create and on every resize:

var resolution = this.getGameResolution();var desiredAspectRatio = Constants.GAME_WIDTH / Constants.GAME_HEIGHT;var screenAspectRatio = resolution.width / resolution.height;if (screenAspectRatio < desiredAspectRatio) {  this.game.world.scale.setTo(parseInt(resolution.width / 16 * 9) / Constants.GAME_HEIGHT);} else {  this.game.world.scale.setTo(parseInt(resolution.height / 9 * 16) / Constants.GAME_WIDTH);}if (this.game.device.pixelRatio > 1) {  this.game.world.scale.setTo(this.game.world.scale.x / this.game.device.pixelRatio);}this.game.scale.refresh();

I really can't figure out what goes wrong :-/

[TheBikingViking]

It should be said that if I change it to SHOW_ALL - and do nothing else - the game will look sharp once again (but game will look scaled down).

[TheBikingViking]

FYI, I've made a temporary solution now, where RESIZE is only set when device is desktop, otherwise it's using SHOW_ALL

 

Is RESIZE really not compatible with devices using pixelRatio's above 1?

[Kartou]

I'm seeing this behaviour as well, it looks like a bug. Can someone confirm this and maybe if its on the roadmap to fix?

[Kartou]

I'm still seeing this in Phaser 2.3.0. Is this something you will look into in Phaser 2? Or maybe its on the roadmap for Phaser 3 with the new rendering system?

 

Cheers!