Bitmap font generator tool with xml output?

Phaser 3
1

Hi there

I got a long delay if use regular font on my game, i use it for numbers of level list.

I have an idea to try bitmapfont, but it’s seem complicated, especially on xml file.

Is there any tool to generate this automatically by using installed font ?

Update: I don’t know why someday it’s just run faster, even on mobile, so i decide to forget it. I think its edge browser bugs or something

2

How are you loading the font? If you preload the font correctly, there shouldn’t be any delay. I use Web Font Loader.

For generating bitmap fonts, I’d recommend using bmGlyph (but it’s Mac only).

3

You can also use BMFont on Windows. You should also take into account what prob said; if the font is loaded correctly, the only thing which makes it more expensive is the extra canvas it uses. Before switching to bitmap fonts, you should look into the metrics property of the TextStyle’s configuration and the related text.style.getTextMetrics(). Calculating the metrics is an expensive process which can actually cause perceptible delays if you create a lot of Text objects at once. If all of your text uses the same font, you can re-use the same metrics object for all of them to avoid this.

4

I load a font locally

<style type="text/css">
	@font-face {
	  font-family: 'impact';
	  font-style: normal;
	  font-weight: 400;
	  src: url(font/impact.ttf) format('truetype');
	}
</style>

Div

<div style="font-family:impact; position:absolute; left:-1000px; visibility:hidden;">.</div>

Is i use a wrong method?

5

Can you give me an example use of text.style.getTextMetrics() ?

Thanks

6

You can’t guarantee that a font will load and become available immediately; using a library such as Web Font Loader will make sure the font is ready to be used. Phaser has an example for this. Note that you probably don’t need the init function from the example (its purpose is to add a stylesheet to the DOM).

Phaser has one. You can pass the return value of text.getTextMetrics() or text.style.getTextMetrics() (on an existing Text object) as metrics property of new ones you create. This only works if you use the same font (which includes family, size, weight, and other similar properties) and is useful only if you make many Text objects.

2 Likes
7

It took me a while to figure out how to get BMFont to generate the right output for Phaser, so I wrote a short guide on this:

Hopefully it helps others searching for how to do this. I also included a pre-generated pixel font in case you are like me and needed to do this in a game jam under a time crunch and just need something to use :sweat_smile: