Jump to content

Blurry text using custom font


Akis
 Share

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

Link to comment
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.

Link to comment
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.

Link to comment
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?

Link to comment
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.

Link to comment
Share on other sites

  • 1 month later...
  • 7 years later...
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

Link to comment
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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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