Jump to content

Game looks pixelated on retina devices using RESIZE ScaleMode


Recommended Posts

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 :-/

Link to comment
Share on other sites

  • 4 weeks later...
  • 3 weeks later...

  • Recently Browsing   0 members

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