Jump to content

doyouknowyou
 Share

Recommended Posts

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?

 

 

Screen_Shot_2015_05_31_at_19_10_11.png

 

Link to comment
Share on other sites

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."
 
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 6 months later...

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.
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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