Sign in to follow this  

Blurry text

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?





Share this post

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

Share this post

Link to post
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 ( I'm not sure if this problem or answer applies to system or bitmap fonts.

Share this post

Link to post
Share on other sites

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(, 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.

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.

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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.