Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Resize image = losing quality


Zintin1
 Share

Recommended Posts

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

screen.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 });

 

 

Link to comment
Share on other sites

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 :

phaser.png.1aeadb1e6275db68bd24325b51ea20fc.png

 

When I resize with HTML/CSS :

html.png.450c2d4baf3f6ccb78bb93f1f304e6c4.png

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;

 

 

Link to comment
Share on other sites

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 ?

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This is my original image (200x200)

hero.png.f92ca0428218856697ba608be0cb8bd8.png

 

When I resize (72x72) :

screen.png.f4dd2ffa6ab65c03532b5e0b91786841.png

 

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, 

Link to comment
Share on other sites

oh, i know what the problem is! :D

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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