Retina screen ugly graphics in Phaser

[slingchilders]

I can't get Phaser to display graphics nicely.

Here is my setup:

this.game = new Phaser.Game(this.settings.windowWidth, this.settings.windowHeight, Phaser.WEBGL, 'area', this, true, false);

 

this.sprite = Engine.instance.game.add.sprite(x, y, key);

 

this.sprite.update = this.update.bind(this);

 

this.sprite.anchor.setTo(0.5, 0.5);

this.sprite.smoothed = true;

 

var scale = (1.0/window.devicePixelRatio);

 

this.sprite.scale.setTo(scale, scale);

this.sprite.smoothed = false;

The graphics loaded here are 2x larger for pixelRatio 2.

The first screenshot is in desktop, and looks really nice.

Why is phaser so ugly on iOS? It's iphone SE.

 

[samme]

I think you need to either set GameConfig.resolution (although that seems buggy) or enlarge the game canvas and then scale down.

Also, if you use GameConfig.antialias=true, there's no need to set smoothed=true on any objects.