Blurry text

[doyouknowyou]

Im having trouble rendering text that doesn't end up super pixilated. I'm finding it happens with most text, but mainly text that updates. Is there a good way to prevent text from becoming blurry? Im using fontface, would bitmap text be a better option?

 

 

 

[icp]

Yes, use bitmap text http://kvazars.com/littera/ .

Choose a size that fits your game .

[GrindheadGames]

You need to place the text with an offset of 0.5, taking into account any anchor points of containers. 

 

"Just offset with half a pixel, and it’ll render nice and sharp. This works, because in SVG and in Canvas, pixels aren’t seen as an indivisible unit. You can draw on a part of a pixel.

When you code a line to start at a certain pixel, you are actually starting the line in the top-left corner of that pixel. When that line is 1px wide, half a the line gets drawn on one pixel, and the other half on the one next to it, resulting in a blurry line.

As I said, this is’t really SVG or Canvas’ fault. SVG and Canvas should not care about pixels, because they work in vectors. The lines are blurry by design. However, the last thing a canvas or SVG developer should want is code littered with +0.5 and currently, this is exactly what happens."

 

- http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas/

[SamPotasz]

I just ran into this problem, and I disagree with GrindheadGames' answer.

 

The solution for me was to make sure all text objects' x positions were whole numbers. Additionally, if your text objects are nested within other objects, those too should be placed at integer positions.

 

A simple text.x = Math.round( text.x ) should do the trick!

 

FWIW, I'm using webfonts as demonstrated here (http://phaser.io/examples/v2/text/google-webfonts). I'm not sure if this problem or answer applies to system or bitmap fonts.

[doyouknowyou]

Thanks for the replies, I already implemented bitmap fonts and they work perfectly. Thanks for the alternatives!

[markacola]

Hey, Just for anyone else who runs into this issue and wants to keep using a Phaser.Text object. Simple extension to the Phaser.Text prototype.

Phaser.Text.prototype.defuzz = function () {            var _this = this;            setImmediate(function () {                var dx = _.round(_this.worldPosition.x) - _this.worldPosition.x;                var dy = _.round(_this.worldPosition.y) - _this.worldPosition.y;                _this.x += dx;                _this.y += dy;            });        };

 

I call this after creating a Phaser.Text object, or updating the text:

 

var textObject = new Phaser.Text(this.game, 0, 0, text, textStyle);textObject.setText('Some text');textObject.defuzz();

 

Two caveats to this method:

• You require access to setImmediate, could be replaced with something similar.
• If you call it extremely frequently the text could creep to the bottom-right.