[SOLVED] How to use system font in 2d screen?

I got a leaderboard in the game, and players are from all over the world.
their names has various characters(utf8) and I can not use one font to support them all.

the system font would solve this perfectly, but it seems not supported in 2d screen(rendered with webgl)?
while I made this leaderboard feature with html+css, it worked, now I switched to 2d screen, the non-english character just don’t display.

There is a feature in development called CanvasFont which dynamically renders a font atlas using a 2D canvas and regular system fonts.

You can use the CanvasFont in place of a Font resource.

var font =  = new pc.CanvasFont({
font.createTextures("My text");
this.entity.element.font = font;

The call updateTextures(string) everytime you need to provide new characters and it will re-render if there are characters that don’t exist in the atlas.

Note, this is still in development so it might change behaviour a little. But it should do what you want.

great, thanks for the help :slight_smile:

hi dave, we just tried this method and the performance is not pretty…
while rendering dozen words in one screen, it’s began to feel lag.

so is this method consume a lot of gpu? or we did it the wrong way?

There is no reason this should be more expensive than regular Text Elements (or just rendering a few quads).

Make sure you are not calling createTextures or updateTextures every frame.

thanks for the clarification, we kind of did creatTextures every frame…
just tried generate texture atlas in the runtime, the performance is pretty good now :slight_smile:

thanks a lot!