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

Help & Support
1

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.
thanks!

2

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.

3

great, thanks for the help :slight_smile:

4

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?

5

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.

6

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!