Blurry LabelTTF caused by white fillstyle?

[MarkEHenderson]

We've noticed that LabelTTFs in webGL are really blurry, and took some time to try to fix them.

The only way I could get them to render with sharp edges was to change the context.fillStyle in _drawTTFInCanvasForWebGL to render the text as black:

right side is with context.fillStyle = "rgba(255,255,255,1)";
left side is with context.fillStyle = "rgba(0,0,0,1)";

of course, with the canvas text colored black, coloring the text didn't work correctly - everything just comes out as black.

I've solved that by changing the rendering code in the draw function:

        cc.glBlendFunc(this._blendFunc.src, this._blendFunc.dst);

becomes

        cc.glBlendFunc(gl.ONE_MINUS_SRC_COLOR, gl.SRC_COLOR);

I'm going to try to clean that up a little, as I suspect just forcing the blend funcs in that manner will cause other issues. For now though, the text looks a lot better than it did before, and the various colors of text we're using work fine.

EDIT
apparently those blend func values don't work in newer version of chrome and possibly other browsers. I'm working on figuring out a working solution for that.

EDIT 2
I couldn't get the blend functions to make the text white reliably across browsers, so I threw in some code at the bottom of _drawTTFInCanvasForWebGL to invert the canvas:

    var imageData = context.getImageData(0,0,this._labelCanvas.width, this._labelCanvas.height);
    var data = imageData.data;
    for(var i = 0; i < data.length; i+=4) {
        data[i] = 255 - data[i];
        data[i+1] = 255 - data[i+1];
        data[i+2] = 255 - data[i+2];
    }
    context.putImageData(imageData, 0, 0);

[dingpinglv]

Hi Mark,

I have changed the "fillStyle" to "rgba(0,0,0,1)", but the result is same as the "rgba(255,255,255,1)".

I don't know what reason cause the text blurry is.

And EDIT2 , I think that is very expensive.

Best regards
David

[csaftoiu]

Is there any update to this? I get extremely blurry text:

Changing the fill style to "rgba(0, 0, 0, 1)" worked for me:

But of course I want colored strings!

This only started happening when I updated to the latest dev version a few months ago. Before then I was using one from a year ago maybe, and the font isn't blurry there. I'm not using design sizes or anything.

@dingpinglv: those two are different. If you look closely, the black one on top is higher-resolution than the white one on the bottom. Look closely at the "p", for example. This is more noticeable with smaller fonts.

[csaftoiu]

@MarkEHenderson: Thanks very much, I just ended up doing what you did - change the fillStyle, and then invert the image data.

(Clearly I have to make this font bigger anyway.)

It wasn't too expensive for me because I only have to do it when a label changes, which isn't so often... in any case, this issue really needs to be resolved in a proper manner.

[glaksmono]

I'm wondering if this "blurriness" also affects other things such as Sprites? I noticed that there's a difference when I do:

this._fooButton = cc.Menu.create(cc.MenuItemImage.create(
   "/images/foo.png",
  "/images/foo-hit.png",
   'onFoo', this));

vs

this._fooButton = cc.Sprite.create( "/images/foo.png");

Thoughts? Or my guess is that it's related to: #1130

because it doesn't happen on "non-retina" devices

[csaftoiu]

I think that is likely a separate issue. This seems to have something to do with the fill color and style and how the blending of the text is done - something particular to LabelTTF. Although maybe that aliasing issue affects this also, but in a different way. I get this LabelTTF behavior on non-retina devices too.

[glaksmono]

Another way to get around this is to use cc.LabelBMFont?

[csaftoiu]

Yep but then you don't get to use TTF fonts

On Mon, Feb 17, 2014 at 4:56 PM, Grady Laksmono [email protected]:

Another way to get around this is to use cc.LabelBMFont?

Reply to this email directly or view it on GitHubhttps://github.com//issues/1092#issuecomment-35326511
.

[rsinha2407]

Hi,
I have tried above points for my cocos2djs Game but it still not fixed...the labels seems very blurry on low resolution devices and sprites are also blurry specially in android phones.I have also tried with BM fonts and with premultiplied alpha changes but no luck.I am using cocos2d js version 3.10...Please suggest.