Text Element/ Canvas fillText issues


#1

Hi,
I am trying to make a Japanese-learning game. The problem is that there are thousands of Kanji characters and stuffing them into font asset so Text Element can render them is a no-no due to REALLY large font asset size.

Using Canvas fillText seems like a good idea, but the text is quite blurry on PC and i can’t use markup to color some parts of the string! For example, using Text Element i can do this: [color="#ff0000"]てんき [/color] が to make the words てんき red.

This is driving me nuts. Any ideas on how to solve this ? Thanks in advance.


#2

So you’re not using a font asset, right? But the current method you’re using isn’t working so well. Maybe a better way of doing all this is making the letters image files instead.


#3

As you have to use almost the full set of Kanji due to the nature of your game (games normally get around this by only using a smaller subset), I would go with using a HTML UI system. At most with the PlayCanvas UI system, you can use is a 2k x 2k texture for the font asset that should work on most devices.


#4

Well, i suppose there is no way around it. I’ll just have to render the text by using HTML5/CSS. I think this is the only solution that gives me the most control over text… and much, much smaller file size.

Anyway, thanks for the replies!


#5

There was some talk about a feature request for the font asset to use more than one texture for primary like these but I don’t know how far it got.


#6

After some testing, i think i’ll stick with the Canvas fillText method. HTML5/CSS was not a suitable solution for my project. There is a problem though:

The left Kanji text is rendered using Text Element.

The right Kanji text is rendered using Canvas fillText (using method from here https://playcanvas.com/project/344078/overview/howto-canvas-text )

If you look closely, the one on the right seems to have a black “stroke” surrounding the edges. Can anyone help me to get the right one to have edge as smooth as the left ones ?.

I have already set alpha testing to 0. Nothing seems to work.

Link to my project:
https://playcanvas.com/editor/scene/775317

Thank you.