setDesignResolution and TTF

cocos2d-x
#1

I think I have a problem with design resolution and rescaling.

All the layout it’s ok, the design resolution works very well and the asset with searchpaths it’s ok.
Now I noticed a big problem with TTF.

They rescale to fit all the resolutions, but… the problem is that they SCALE… not resize like TTF do…
So I have the pixelation effect like a bitmap font.

I have tried both with ui Text create and with Label createWithTTF, they do the same.

Is there another way to achieve this? Or it works as intended?
How do you make your TTF rescale with resolutions?

Thank you for the help

#2

Yes, this problem exists. But, there is a simple way to solve it. You set the size of your font bigger, then reduce its scale at same ratio. Example:

label = Label::createWithTTF("", “fonts/Arial.ttf”, 24 * 10); // Size 10x bigger
label->setScale( 1.0 / 10 ); // scale 10x smaller

#3

But in this way it results jagged, something strange like antialias not applied in a good way.

Is there another solution? Maybe linking the fontsize with something other device params?

#4

10x really will cause this problem. The best value to use for not losing quality and have no problem with anti-aliasing is how much you are re-scaling your images. You can calculate in this way:

auto screenSize = Director::getInstance()->getOpenGLView()->getFrameSize();
auto visibleSize = Director::getInstance()->getVisibleSize();

float scaleFactor = screenSize.width / visibleSize.width;

label = Label::createWithTTF("", “fonts/Arial.ttf”, 24 * scaleFactor );
label->setScale( 1.0 / scaleFactor );

3 Likes
Letters height is different in TTF labels
#5

Wow, thank you, it seems to work very well, tried on both desktop and on nexus 7 with bigger resolution. Antialias is ok.

I report it on github, maybe in next milestone they will fix it.

Thank you very much @Rogerup!