Blurry text using custom font

[Akis 3]

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.

[robmyers 1]

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.

[Akis 3]

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.

[robmyers 1]

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?

[Akis 3]

http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-avoid-float 

[xerver 286]

http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-avoid-float 

 

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.

[Akis 3]

What the article says is that we can now use float values and it will be as fast as integer values. But this won't fix the blurry effect.

[creole 0]

What the article says is that we can now use float values and it will be as fast as integer values. But this won't fix the blurry effect.

 

second that

[Sara 0]

On 11/21/2013 at 1:37 AM, robmyers said:

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.

 

 

I did this but again when I zoom in the text is not seen correctly !!!

Can you please guide me? thank you very much