Ansimuz

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

Share this post


Link to post
Share on other sites

@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/

Share this post


Link to post
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);

 

Share this post


Link to post
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;
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.