Cocos Creator 2.0.1 TTF Font issue

Cocos Creator 2.0.1 TTF Font issue
0

#1

Hi guys,
I’m trying to use a font called LuckiestGuy.ttf on a Facebook Instant Game.
When I run from Cocos Creator everything is fine but when I deploy to Facebook Instant Games I get a weird behaviour.
From PC everything is fine but from Android the vertical align is off.
Here’s 2 screenshots:

I attached the font.

LuckiestGuy.zip (39.4 KB)

Could anyone help me to fix it?


Font issue with Cocos Creator (1.8 to 2.0)
#2

Hi,
I fixed using this tool:

I just convert the ttf to ttx file, change the ascent to 2100 and convert it back to ttf.

I hope this can help other people with similar issue. :slight_smile:


#3

I have same problem with TTF fonts, but it works some fonts sometime (yes that’s interesting point!). I have worked more than 2 hours and tried hundred different variants.

At last, I found a solution on macOS. If I add font to “Font Book” on macOS, the font doesn’t work in Cocos Creator v2.0.2.

I don’t know why! But I have solved my problem that way


#4

Hi all,

We have the same problem even with CC 1.9n and this is really needed to be solved before our game release. The difference happens also with Chrome and Firefox. I’ve already tried megasoft78 solution but the ascent parameter doesnt change anything for me. If the devs could have a look at it it would be great because it’s really handicapping.


#6

I have the same issue with all TTF fonts. It feels like it has something to do with if the font is installed on your system or not, but not 100% sure if this is the case.

This feels like a serious bug, since I can imagine that many people use .ttf fonts. Could we get an answer for a developer on how to create a workaround on this or what affects it to be misplaced?


#7

@slackmoehrle
@jare
@huanxinyin
or anyone else from the Cocos Creator team. I’m sorry for tagging a lot of you, but this is a big problem!

Could you help figure this out or get the right people on this?

Working with non system fonts that are not bitmaps, in this case .ttf fonts in Cocos Creator is almost impossible. Exactly as @megasoft78 explained they get misplaced. I’ve been now trying to solve or even hack this somehow for two full days in a row now but I have no idea what Cocos Creator does to misplace them so badly.

I’ve tried everything from this post and searched the forums and tried pretty much anything I can think of, but since I don’t know why Cocos Creator misplaces them I have no clue how to continue.

Some screenshots to explain it, even though it is very straight forward:

  • Apply a .ttf font as font in cocos creator
  • Everything looks good in editor
  • Run or build it -> You get misplaced fonts on Y-axis

In Editor:


(Note that even though it might seem like it is misplaced in the editor here it isn’t because the upper circle of the “8” is smaller than the lower circle, that’s why the red line shines through more on the bottom side. In the “0” zero you see that it is centered perfectly)

When Running:
image

While running some fonts they might also be cut out if the node isn’t big enough because of the misplacement.
Again in Cocos Editor it looks good and promising:

Running or after build version:
image
(You can counter this by making the node bigger, but you have to manually adjust some guesses on how big the node should be for the misplaced font to fit)

Another example with another font. Here it also gets slightly misplaced in the editor, but much worse when running it.
In Editor:

Run or Build versions:
image

I cannot convert the fonts into bitmaps either because I need to support all kinds of languages, so one set of alphabet is not enough.

It’s important to notice that these misplacements aren’t always the case, if it were you could counter it by moving the label in Y-axis until you find the sweetspot, but since it isn’t for all devices, you cannot do this.
For a long time I was using these fonts without any misplacement, while some of my colleagues had the issue. Now It happens on pretty much for everyone and on any device, but it’s not on every device. Once it happens then it stays, so you cannot refresh several times and have one time that it aligns perfectly. It is very strange.

I understand if the fonts are some bad quality fonts that they might be messed up cause of the font, but for example Roboto is a high quality Google font (https://fonts.google.com/specimen/Roboto) that should not need any hacking to be working.

I’ve tested this in following Cocos Creator Versions:
1.10.2
2.0.5
2.1.0

Please help, fonts are a big deal of any game. Thank you so much for your time, I would really appreciate so much if you could help me with this!


#8

@Ronsku Thanks for posting this. I’ll also tag @Big_Bear


#9

Hi, all

This could be related to a fix that we merged into 2.1 dev branch:

It also got merged into v1.10-release branch.

The origin of the fix was that different browsers handle vertical alignment( ctx.textBaseline ) differently, only alphabetic works equally, so the solution is that we do TOP, MIDDLE, BOTTOM all based on alphabetic baseline with adjustment.

I’m not very sure whether it solves your issue, but I can explain how we do ttf rendering.

On the web, we don’t have much choice on font rendering, we can only render it on a offscreen canvas using canvas 2d context APIs, in which we will apply fillStyle, globalAlpha, textAlign, textBaseline, font (including font size, font family), lineJoin etc based on user setting. Then this canvas will be used as a texture and be rendered on WebGL Context.

Also, lineHeight, overflow setting will affect the font size before rendering the offscreen canvas.

@Ronsku I see you used SHRINK on overflow setting, that could affect the font size in runtime. And your label texture get cut off at top, which is really strange, it means canvas rendering is acting weird.

Please try our new fix and see what happens


#10

Thank you for your quick response, I really appreciate it!

Does it mean that it is merged into the *-release-branch that it is also released into 1.10.2 and 2.1.0 versions that are available for grabbing online or do you need to use a custom Cocos Engine to get these changes?

I made a few tests to report to you with both Alphabet, upper and lowecase letters next to numbers in three different labels next to each other on the exact same Y-axis.

These tests are ran with Cocos Creator version 1.10.2

NOTE: Images are huge so copy the image link and open them in a new tab if it is unreadable through the forums.

First one is one default font and 3 .ttf fonts with Overflow: None:

Next one is Vertical Alignment that works strangely if you let the Label adjust its Node’s own size:

Next one is that different overflow’s doesn’t really affect the misplacements of the font:

Let me know if I can try out anything else or if I should somehow install a custom version of the Cocos Engine into my Cocos. in 2.1.0 version it is quite easy to set custom Engines I assume with the new properties setting, but I don’t know how to do it in 1.10.2 if the case is that I need to set custom engine for my cocos to get this fixed.

Thank you!


#11

@pandamicro
It actually doesn’t matter if the font is a .ttf font or just regular system font “Arial”

In this example there is a system font “Arial” used and with 2 different browsers:

Chrome (not centered):
image
seems to be centered perfect if you compare top of “A” to bottom of “j” and “g”.

Edge:
image
Seems to be centered with uppercase letters but not matching “g” and “j” centering. Also cutting of the end of “j” and g".

I understand that fonts behave differently on different devices/operating systems/browsers, but what annoys me is that a few weeks ago I didn’t have this problems and everything was perfectly centered everywhere.

The font moves differently depending on the font itself. I noticed fonts that move up 12px / 100px font size, but others that move 16px / 100px font size, so there is no standard. I cannot find why it moves on a specific device and why it didn’t move before. I’m thinking about if the font is installed on the system, but that doesn’t seem to affect it either.

It is super hard to make fonts look good with perfect placements since they can be moving for some users all of a sudden 16px in Y-axis.

Wish I knew what is causing this