Problem with sharp textures using RESIZE ScaleMode

[Kartou]

Hi!

 

First of all, i'd like to thank you guys for this awesome tool 

I am in the process of adopting to Phaser from Kinetic. I've previously used Kinetic for creating responsive micro games targeted mobile devices and so far I'm blown away by Phaser.

 

Anyways, I'm having some trouble figuring out how to use the ScaleManager RESIZE property. I want the canvas to fill the entire screen and resize the different elements manually. I've therefore setup a resize callback where I based on the target dimension calculate a scale factor i apply to the sprites. Eg, I have a sprite that should be anchored to the top center, so I resize it using the scale property and translates it to the center. This works very well and gives me the responsive design I want. However, the sprite loses its crispyness/sharpness when rendered on a retina display. If i instead use the SHOW_ALL scalemode with no manual scaling it will look as sharp as it should. I did not have this behavior with Kinetic, so i guess i'm doing something wrong? 

 

So I guess my question is; how should I use RESIZE scale mode, together with manual scaling and still maintain sharpness of sprites?

 

Below is an example of how I scale a header that should always be centered at the top of the screen using the resize callback:

GameController.prototype.resize = function (width, height) {    var scaleX = width / this.targetWidth;    var scaleY = height / this.targetHeight;    this.uniformScale = Math.min(scaleX, scaleY);    this.headerImage.position.x = this.game.world.centerX;    this.headerImage.scale.set(this.uniformScale, this.uniformScale);}

Cheers,

Klaus