Disable antialiasing

[mariogarranz]

Does anybody know how can I scale a game while keeping the pixel art look intact?

The game constructor recieves a parameter called "antialias". I set it to false:

var game = new Phaser.Game(400,240,Phaser.AUTO, '', {preload: preload, create: create, update: update},false,false);

Then set the game stage to scale for exactly twice its size:

 

game.stage.scale.minWidth = 800;game.stage.scale.minHeight = 480;game.stage.scale.refresh();

 

But it still looks antialiased and a little blurry.

Am I missing something?

[Alvin]

Hi,

If by "looking intact" you mean still being able to sort of "counting the pixels", we've got this feature implemented in Phaser :

Phaser.Canvas.setSmoothingEnabled(game.context, false);

However, please note that this can only work if you set Phaser.CANVAS as your renderer.

 

See this example : http://gametest.mobi/phaser/examples/display/render%20crisp.php

 

 

[rich]

Also just to add that most mobile browsers don't support this either Desktop for now really.

[mariogarranz]

Hi,

If by "looking intact" you mean still being able to sort of "counting the pixels", we've got this feature implemented in Phaser :

Phaser.Canvas.setSmoothingEnabled(game.context, false);

However, please note that this can only work if you set Phaser.CANVAS as your renderer.

 

See this example : http://gametest.mobi/phaser/examples/display/render%20crisp.php

 

Thanks for your answer, Alvin.

I had already tried that, but it doesn't seem to be working with a whole stage scaling (in the example its only scaling a single sprite, not the whole stage).

 

I'm making some scaling performance tests using Rich's Nutmeg sprites, this is what I mean (first one is Phaser, second one is Impact JS):

 

 

[Andre]

How can i use with Phaser-v2.0.7?

[mariogarranz]

Since Phaser uses CSS for scaling, there is no solution for this. Antialias on CSS scaling depends on the browser, and for most browsers you can't disable it.


ImpactJS uses a different system for scaling, that's why it works there.

[rich]

Yes impact works by pre-scaling every single asset into hidden canvases and then rendering from those. Which is great when you don't use WebGL, but we do I'm afraid.

[c023-dev]

A way to trick it would be to double size your pixel art... but I had better performance with smaller images but it may work.

 

So WebGL has no nearest neighbor resampling?

[rich]

Yes it does and you can activate it using the smoothing false method, but it's not cross-browser (and if the game canvas itself is scaled with CSS, it goes to pot anyway)