Anti-alias when scaled. How to get crisp Pixels?

[Ansimuz]

Hi,

What's the best approach to avoid anti-alias (blurred pixels) when i scale my game?

Thanks.

[imerso]

EDIT: I just noticed that the question is specific to Phaser, while I answered in regards to generic Canvas2D or WebGL, so my answer is a bit out of context and probably not the best one. =) Anyway, some games will have higher-res assets for higher-res screens, others will resort to blocky pixels (8bits style), and some will just live with bilinear or use a post-process.

On a 2D Canvas Context, you can use imageSmoothingEnabled to disable filtering:

ctx.imageSmoothingEnabled       = false;

// for safe compatibility, you can add these as well:
ctx.mozImageSmoothingEnabled    = false;
ctx.oImageSmoothingEnabled      = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled     = false;

On WebGL you can use gl.NEAREST filtering instead of gl.LINEAR when creating textures.

The image will become pixelated (which might be what you want). If with "crisp" you mean that you want better than bilinear quality up-scaling, then you will either need higher-res bitmaps or some sort of up-scaling post-process filter like HQ shader for example (but even HQ is not perfect).

[Ansimuz]

@Imerso

Thank you. I couldn't make it work, I'm really new to phaser and didn't know how to implement it. But...

I found a solution rather easy. I just added a css rule to the canvas element like this:

 

canvas {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
}

 

 

Heres the original source: https://belenalbeza.com/retro-crisp-pixel-art-in-html-5-games/

[Legomite]

I'm not sure if all those extra lines does something different than my method, but there is a property that you can set to false while doing Phaser.Game.

Where the seventh variable is set to false to prevent the smoothing of pixels. It works 100% for me. I tried it in Safari, and Chrome.

var game = new Phaser.Game(1000, 600, Phaser.AUTO, 'game', null, false, false);

 

[tywang2006]

watch out viewport setting if you want to scale or using devicepixelRatio for your resolution in the mobile device.

[jpdev]

I am having good success with these settings so far:

this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
this.game.scale.setUserScale(3, 3);
this.game.renderer.renderSession.roundPixels = true;
Phaser.Canvas.setImageRenderingCrisp(this.game.canvas);

This scales the game by 3 and so far everything is scaled pixel perfect and moves one pixel at a time.