Resize image = losing quality

[Zintin1]

Hi guys,

EDIT : just found that this problem appear only on Google Chrome, on Safari/Firefox my images are downscale without problem.

I'm using Phaser 2.10 for few days and still can't find a way to not loose quality when I resize my images.

I saw some people talk about it but can't find solution. I tried to resize by using scale.setTo but the result is the same.

I load my image like this :

game.load.image('logo', 'assets/logo.png');

and make it appear like this :

logo = game.add.image(0, 0, 'logo');
logo.scale.setTo(.35);

Or :

logo = game.add.image(0, 0, 'logo');
logo.width = 100;
logo.height = 100;

The original size of my image is 300x300, 144dpi.

I need to resize my image and can't use the original size because I have to show 5 times the same image from the left to the right of the screen, so the size change if the screen is bigger or smaller.

I also tried with different images, or different format (JPG, PNG..) still have this problem.

Thanks

[in mono]

Try this:

logo.smoothed = false;

By the way, it doesn't matter which way you use to resize an image - scale changes the image's size and size changes its scale; they're internally tied to each other. DPI doesn't matter unless you print. If you're showing the image on a display, it's all pixels.

[Zintin1]

Thanks for your answer but it doesn't fix my problem.

logo = game.add.image(100, 20, 'logo');
logo.width = 150;
logo.height = 69;
logo.smoothed = false;

Should I set something when I create my Phaser.game ?

var game = new Phaser.Game('100%', '100%', Phaser.CANVAS, 'phaser-game', this, false, false, { preload: preload, create: create, update: update });

 

 

[in mono]

Care to post the original image itself? What are the dimensions of the game? Did you try with numbers instead of percentages inside of strings when calling new Phaser.Game()?

[Zintin1]

Yes I tried with numbers, this is my code :

var game = new Phaser.Game(375, 667, Phaser.CANVAS, 'phaser-game', { preload: preload, create: create });

function preload () {
	game.load.image('logo', 'assets/logo.png');
}

function create() {
	logo = game.add.image(0, 0, 'logo'); // original size : 300x138
	logo.width = 220;
	logo.height = 101;
	logo.smoothed = false;
}

 

When I resize with Phaser :

 

When I resize with HTML/CSS :

We can see that on Phaser the logo is blurred (especially the first square with linear gradient) and not in html/css.

I tried with that : (in the preload function, but it doesn't change anything on my image quality)

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.stage.smoothed = false;
game.stage.antialiasing = false;

 

 

[Zintin1]

Yes I tried with numbers, this is my code :

var game = new Phaser.Game(375, 667, Phaser.CANVAS, 'phaser-game', { preload: preload, create: create });

function preload () {
	game.load.image('logo', 'assets/logo.png');
}

function create() {
	logo = game.add.image(0, 0, 'logo'); // original size : 300x138
	logo.width = 220;
	logo.height = 101;
	logo.smoothed = false;
}

and this is the result : https://imgur.com/GzVSX5t

If we compare with html/css : https://imgur.com/BjEGH8a

We can see that on Phaser the logo is blurred and not in html/css.

 

I tried with that : (in the preload function, but it doesn't change anything on my image quality)

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.stage.smoothed = false;
game.stage.antialiasing = false;

 

 

I found where is the problem !

I tested my game on safari and firefox and images look great ! Only on Chrome images are blurred....

Losing so much times to figure out it..

But someone can explain me why ? And if its possible to fix it ?

 

[PsichiX]

do you use canvas or webgl renderer?

[Zintin1]

I used canvas, now I tried webGL and my images not look blurred anymore  thanks !

But now they look pixelated ... so I guess it's about the resize. If I do more than .scale(.5) the image become pixelated. scale .5 still look good but I want to reduce more it becomes pixelated. So it's not big deal I will load different size images for different size resolution.

If you think there are an easier solution I will be glad to hear it

Anyway I tried this to change the quality of my resize image :

logo.smoothed = true;
logo.antialiasing = true;

and I also changed true to false, just to see the result, but still pixelated.

[PsichiX]

show me how "pixelated" logo looks. screenshoot, please.

also: make sure that smoothing is enabled (smooth makes webgl textures sampled linear way, instead of nearest pixels).

[Zintin1]

This is my original image (200x200)

 

When I resize (72x72) :

 

This is my code :

var game = new Phaser.Game(375, 667, Phaser.WEBGL, 'phaser-game', this, false, true, { preload: preload, create: create });

function preload () {
	game.load.image('player', 'assets/hero.png');
}

function create() {
	player = game.add.image(20, 20, 'player');
	player.width = 72;
	player.height = 72;
}

 

"also: make sure that smoothing is enabled (smooth makes webgl textures sampled linear way, instead of nearest pixels)."

I guess it's this one ? : var game = new Phaser.Game(375, 667, Phaser.WEBGL, 'phaser-game', this, false, true, 

[PsichiX]

oh, i know what the problem is!

it is made by linear interpolation (smoothing), when texture uses linear sampling instead of trilinear sampling -  somehow you have to make sure that engine uses gl.LINEAR_MIPMAP_LINEAR and generate mipmaps so it will uses these mipmaps to properly interpolate scaled down texture.

[Zintin1]

Thanks for your help PischiX !

I'm looking for phaser LINEAR_MIPMAP_LINEAR on google but don't see lot of articles about it. Can you help me for using it ?

[PsichiX]

unfortunately this is engine internal problem and the only way to solve it is by asking @rich to make that. otherwise you will have to hack engine itself and probably make it's rendering pipeline unoptimized. only he can fix that problem right now. or use different engine, but i guess this is not your option.

[Zintin1]

Alright, I will try my previous method : load different size image from different mobile screen, it's not perfect but the images look already better

Thank you for your time