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.
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.
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.
2 Likes
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!
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.
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.
