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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.