Jump to content

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


Recommended Posts

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

Link to comment
Share on other sites


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/

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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;

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

Link to comment
Share on other sites


  • Recently Browsing   0 members

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