Sign in to follow this  
Akis

Blurry text using custom font

Recommended Posts

Allo,

 

I'm currently using PIXI.Text with a custom font (preloaded in CSS using font-face), and it seems there is a blur effect around the characters.

I attached an example in a Div and in Pixi so you can see the difference.

 

I don't have this issue using a normal font like Arial. The custom font I'm using is this one: http://www.myfonts.com/fonts/berthold/akzidenz-grotesk-bq/

 

I'm using it because I have to (project specific). Is there a way to remove the blurry effect ? :s

 

Thanks.

post-5522-0-96126400-1384866768.png

post-5522-0-25959700-1384866769.png

Share this post


Link to post
Share on other sites
You could try manually creating a PIXI.Sprite containing the text, and fiddle with the parameters to see what's going wrong.

 

 

1. Draw the text directly into a canvas element canvasElem.

 



var canvasElem = document.createElement("canvas");
var ctx = canvasElem.getContext("2d");

// I fix the width/height, but you can also compute it from the input string
canvasElem.width  = 100;
canvasElem.height = 50;

// e.g. "20pt Arial"
ctx.font = "your font's name";

// default values
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.lineWidth = 0;

// pixi default, although usual default is "alphabetic"
ctx.textBaseline = "top";

// pixi default, although usual is "start"
ctx.textAlign = "left";

// draw the text
// the coordinates specify where to start drawing from
ctx.fillText("your text here",0,0);

// optionally, draw text outline too
// by default pixi doesn't do this
ctx.strokeText("your text here",0,0);


2. Load it into a PIXI.Texture and use it to create a PIXI.Sprite.

 



var texture = PIXI.Texture.fromCanvas(canvasElem);
var sprite  = new PIXI.Sprite(texture);


Then you can add the sprite to the stage, or wherever.

Share this post


Link to post
Share on other sites

After testing your custom canvas to narrow down the issue, I found the text is blurry with PIXI.Text only if I set the anchor value.

 

Knowing this, I searched the code when we draw the text with the anchor value and I found it inside PIXI.CanvasRenderer.prototype.renderDisplayObject and PIXI.WebGLBatch.prototype.update.

(displayObject.anchor.x) * -frame.width

The result of this operation can be a value with decimals. So I changed it to force an integer: (same thing for y/height value)

( (displayObject.anchor.x) * -frame.width) | 0

And for WebGL, instead of:

aX = displayObject.anchor.x;// - displayObject.texture.trim.xaY = displayObject.anchor.y; //- displayObject.texture.trim.yw0 = width * (1-aX);w1 = width * -aX;h0 = height * (1-aY);h1 = height * -aY; 

we should have:

aX = displayObject.anchor.x;// - displayObject.texture.trim.xaY = displayObject.anchor.y; //- displayObject.texture.trim.yw0 = ( width * (1-aX) ) | 0;w1 = ( width * -aX ) | 0;h0 = ( height * (1-aY) ) | 0;h1 = ( height * -aY ) | 0

I only did the change in my code for now. I will make a pull request on github later today or tomorrow.

The text still seems a little bit blurry in webgl but it's a lot better in canvas though.

Share this post


Link to post
Share on other sites

I don't think the drawImage in .renderDisplayObject should be changed.

 

Forcing integer values for the initial draw position could lead to jerky animation e.g. when a sprite it moved across the screen. It's better to take advantage of the inbuilt anti-aliasing for non-integer valued pixel positions.

 

Perhaps you could instead test whether "(displayObject.anchor.x) * -frame.width" is not an integer (similarly for height), and incrementally change the anchor so that it is?

Share this post


Link to post
Share on other sites

 

From the page you linked:

 

 

 

Note that this sort of optimization should no longer matter once canvas implementations are GPU accelerated which will be able to quickly render non-integer coordinates.

 

Canvas implementations *are* GPU accelerated now.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.