Disabling Antialiasing/Smoothing

[STVR]

I've seen a few tips on how to disable anitaliasing and smoothing, but nothing seems to work, and many of the posts are quite outdated.  Right now I'm doing this:

if (this.game.context) {	this.game.renderer.setSmoothingEnabled(game.context, false);} else {	this.game.renderer.options.antialias = false;}	this.game.antialias = false;this.game.stage.smoothed = false;this.game.scale.width = gameWidth * zoom;this.game.scale.height = gameHeight * zoom;this.game.scale.refresh();

Where zoom is 2, so it scales nicely, but the antialiasing is still destroying the pixel art, suggesting that nothing I've done is working. Any ideas?

[SeemsIndie]

Hey man, i just created this account to answer you. I am doing LD29 and i have been stuck on this problem, because i need to scale my map layer.

The way i solved this problem is:

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

The last parameter is for antialiasing, so i just set it to false.

Take a look at game docs: http://docs.phaser.io/Phaser.Game.html#Game

[STVR]

Hey man, i just created this account to answer you. I am doing LD29 and i have been stuck on this problem, because i need to scale my map layer.

The way i solved this problem is:

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

The last parameter is for antialiasing, so i just set it to false.

Take a look at game docs: http://docs.phaser.io/Phaser.Game.html#Game

 

I did this as well, and it's not helping. I figured it would work, but it did not seem to.

[STVR]

Well, at this point I guess I'll just scale everything up individually and set smoothing to false. Thanks anyway.

[drhayes]

I had the same problem as you and it's very, very frustrating.

 

A couple of things to check: do you have CSS that resizes your canvas (don't do that)? Are you setting the canvas' size in your HTML (don't do that either)?

 

Here's a snippet from my boot state's preload function:

game.scale.minWidth = 640;game.scale.minHeight = 480;game.scale.maxWidth = 1280;game.scale.maxHeight = 960;game.scale.pageAlignHorizontally = true;game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

Here's my boot state's create method:

game.stage.smoothed = false;

That fixed my smoothing problem. Can you post similar code from your game?

[Zielak]

I had the same problem as you and it's very, very frustrating.

 

A couple of things to check: do you have CSS that resizes your canvas (don't do that)? Are you setting the canvas' size in your HTML (don't do that either)?

 

Here's a snippet from my boot state's preload function:

game.scale.minWidth = 640;game.scale.minHeight = 480;game.scale.maxWidth = 1280;game.scale.maxHeight = 960;game.scale.pageAlignHorizontally = true;game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

Here's my boot state's create method:

game.stage.smoothed = false;

That fixed my smoothing problem. Can you post similar code from your game?

Hey, this worked for me. Thanks!

[Andre]

All works fine expect this:

game.stage.smoothed = false;

anyone have a solution for v2.0.7 of phaser?

[lastnightsparty]

Hi, I've run into this same problem where there seems to be no solution to making the smoothed=false actually work. Is there a new implementation in phaser 2.1?

 

This should do it, but it doesn't:  

 

var game = new Phaser.Game(284, 160, Phaser.AUTO, 'Stage', null, false, false);

[garek]

I experience the same problem. I am making a pixel art game and my pixels are smoothed no matter what!

 

I read this thread through and noticed that my canvas has width and height set via css (style property). 

I removed these css props in chrome dev tools in run time, and my pixels become as sharp as japanese knife!

 

So, i thought, who the *** is playing with my canvas css? 

It turned out that the Phaser.ScaleManager sets canvas.style.width and canvas.style.height properties while doing the "scale magic"!

 

So, does it mean that i cannot use Phaser.ScaleManager if i want my pixels being sharp (no antialiasing)? 

________________

phaser version 2.3.0

[garek]

For now i ended up with this approach in solving my "smoothed pixel" problem:

 

1. First of all, ScaleManager has scale mode RESIZE, which changes a canvas size instead of modifying canvas.style.

But keep in mind, that in this mode ScaleManager changes the game size. (ofc you can read code and comments of ScaleManager,

but i better write it down here to keep the picture complete)

Keep in mind one more thing, ScaleManager honors canvas`s parent element size, so you may want to set you canvas`s parent 'height: 100vh'

to make your game fill the whole document.

 

2. Then i create and manage my root Phaser.Group and create all game entities within this group.

 

3. Now i can change position of the whole game using root group, and most important i can manipulate the whole game scale using root group scale.

And leave all game work with its designed logical dimensions. (in my case 320x480)

 

For now it is the only way i managed to make my pixel sharp and scale for large devices.

 

UPDATE: 

• Fixed code errors calculating and using zoom. Read code comments for the details.

 

Here is some code samples:

function preload() {  // Set scale mode in preload method of Boot state  this.scale.scaleMode = Phaser.ScaleManager.RESIZE;  // ...}

// SAFE_ZONE_HEIGHT and SAFE_ZONE_WIDTH// are constants representing logical dimensions// of the game. In my case 320x480.function _updateRootGroupOnResize () {  // You may want to keep zoom integer to avoid rendering artefacts  // UPDATE:   // It is unlikely but possible that canvas size will be smaller then the safe zone width  // so make sure that zoom is greater or equal 1  var zoom = Math.max(1, ~~(this.game.height / SAFE_ZONE_HEIGHT));  // Floor group position to avoid 'floating' pixels. Pixel art is sensitive to it.  // UPDATE:   // Multiply only SAFE_ZONE_WIDTH by zoom to make it in the same space with canvas width.  // The code aligns root group horizontally within the canvas.  this._rootGroup.position.x = ~~(this.game.width/2 - zoom*SAFE_ZONE_WIDTH/2);  this._rootGroup.scale.set(zoom, zoom);}function create() {  // Create group to contain all game entities  this._rootGroup = this.game.add.group();  // Layout root group as you may want  this._updateRootGroupOnResize();  // Hook resize to update root group layout  this.scale.setResizeCallback(this._updateRootGroupOnResize, this);}

I will post here furhter experience if i will come up with better solution. Current is not satisfactory =(

[derloopkat]

All the above didn't work. Animations are still blurry. Was this bug corrected in Phaser?

[ForgeableSum]

Yes, it really sucks. Does enabling antialias still allow you to disable smoothing on some objects with the smoothed property? If you have antialias disabled, can you still turn on smoothing with the smoothed property, on certain objects? 

Why is it that the smoothed property randomly toggles on its own. It's all a big mystery to me and something I come back to from time to time. 

What i would like to do is enable AA globally, and selectively choose which sprite are not smoothed. But toggling the smoothed property doesn't seem to work , at least in v. 2.6.1. 

[Legomite]

This works perfectly for me. It disables anti aliasing for the game, and it's in the Phaser examples

 

https://phaser.io/examples/v2/misc/antialias-game

[Maestro_B]

I realize this thread is a couple of years old, but I just found it while trying to make a pixel art game. The phaser-based solutions didn't seem to work for me. So I went back to basics and added this to my CSS file:

canvas {

    image-rendering: -moz-crisp-edges;

    image-rendering: -webkit-crisp-edges;

    image-rendering: pixelated;

    image-rendering: crisp-edges;

}

A simple style which applies to the canvas. I hope this helps someone.

Cheers all.

[mattstyles]

I have a slightly different css snippet pinched from 'I do not know where'

  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: pixelated;

Not sure where I got it, probably CSS Tricks.

Don't think I've ever applied it to a canvas though.