Blurry text on CCLabelTTF

Hi, sorry if it’s been asked before (I searched but couldn’t find anything), I’ve been having problems with the text in my CCLabelTTF looking all blurry and messed up, even with simple fonts like “arial”. I’ve tried doing calling setAliasTexParameters() and it gets me the opposite effect, a very blocky and pixelated text. Is there any way to fix this and keep the antialiasing but maybe not as blurry?

This is how it looks on my screen:

first row is with setAliasTexParameters
second row is with setAntiAliasTexParameters
third row is how it should hopefully look

I’ve been reading this https://rombosblog.wordpress.com/2012/04/11/prevent-blurry-fonts-when-using-cclabelttf/ which seems to point out the issue being something related to the position of the images but I don’t know objective c and can’t quite figure out how to port it to c++.

Also I see the new release made some changes to CCLabelTTF, maybe I should try it out (I’ve been using cocos2d-x 2.1.3)?

Any help would be really appreciated, I’ve been stuck at this for a while now :confused:

Thanks

In what platforms is this happening to you?

Windows is the only one I’ve tried so far

Do you use design size feature?

If you do, so there are bad news: you need to hack CCLabelTTF and use it carefully after this hack. CCLabelTTF internally renders whole text to one texture, and uses it later (when you change label text, texture generated from scratch). Texture generated in design size, and OpenGL just scales it to real size: fonts become blurry.

So either use design size that matches screen size (i.e just do not set design size) or
* create child CCSprite inside CCLabelTTF;
* reimplement CCNode::draw() method in CCLabelTTF::draw() without calling superclass method: you should do nothing in CCLabelTTF::draw() and just setup child CCSprite correctly: it will be drawn instead;
* in CCLabelTTF::updateTexture() you should create texture measured in screen size, not design size, and create child CCSprite from this texture; add this as child node to CCLabelTTF and don’t forget to call child->setScaleX(), child->setScaleY();
* finally you can also override methods like CCRGBProtocol::setColor() or CCSprite::getTexture() in order to redirect setters/getters to child sprite; don’t forget to scale rectangles and sizes by multiplying it to difference between design and real size.

P.S. Maybe I’ll publish some code on weekend.

Hmm yeah I think I get what you’re saying, but that seems a bit over my level since I’m just a cocos2d-x newbie, for now at least.

I’m actually working with a contentScaleFactor of 1 since on Windows my designResolutionSize is for now the same as the window size (1024x768), so I’m not 100% sure that’s the issue, though.

I am facing this same issue on windows phone , anyone figured this out yet ?

Will it hurt to change to CCLabelBMFont?

Lance,
no i cannot shift to CCLabelBMFont now is it any way i can fix this problem with CCLabelTTF ?

Any update to this? I was using a >1 year old version of cocos2d-html5 and the ttf labels were not blurry. Then a few months ago I updated to the latest version and, after some minor fixes to get it working again, the text was blurry - without any modification of that code from my part. My code doesn’t use .setDesignResolutionSize() .

Hi Mr. Sergey Shambir

When I started to use design size, I got the same problem.
Thank you very much for telling us the reason and how to solve it, but unfortunately I did not grasp what to do.
It will be very helpful to the community if you kindly posted more details.

Best Regards,
Abdalla

This patch fixes this problem with CCLabelTTF: https://github.com/cocos2d/cocos2d-x/pull/4885

I just fixed it with a pretty simple hack, though not ideal will do the trick for now. Create your label with the font at x2 size and then scale the label to 0.5 to get it back to its normal size. See my screenshot for the before and after results.

You could create with larger sizes (and scale back down appropriately) but remember larger sizes will create labels that take more memory as they render larger to textures, along with this note that the size of the label is limited depending on the device, see [[http://www.cocos2d-x.org/wiki/Max_size_of_textures_in_cocos2d-x_depends_on_each_platform]]

myLabel = CCLabelTTF::create("Play", "Helvetica", 20*2, CCSizeMake(0, 0), kCCTextAlignmentCenter);
myLabel->setScale(0.5);

Edit: formatting for clarity, reduced scale to 2 for memory and label rendering size concerns

Andriy Chaika, thx. It help me for win32 platform.
What about wp8 and winRT platform? this fix don’t work in their.

Alex Zverev wrote:

Andriy Chaika, thx. It help me for win32 platform.
What about wp8 and winRT platform? this fix don’t work in their.