How to create bitmap fonts for Phaser JS with BMFont

This guide explains how to generate bitmap fonts from TTF or OTF files for use in PhaserJS. I'll be using BMFont which is Windows only.

Why bitmap fonts?

The main use case is if you're creating a pixel art game & want your text to match the retro style and have no antialiasing.

Below is an example from a recent game I made. The top is the standard font rendering in Phaser. The bottom is a bitmap version of the same font.

Note the antialiasing inside letters like g, a, or o in the top image. This creates what looks like blurry artifacts at the small scale of pixel art games. The bottom image has the crisp, pixelated rendering expected in retro games.

Bitmap fonts may also be faster to render. From the Phaser docs:

BitmapText objects are less flexible than Text objects, in that they have less features such as shadows, fills and the ability to use Web Fonts, however you trade this flexibility for rendering speed

To use a bitmap font, Phaser needs:

1. An image containing all the possible characters
2. An XML file that defines the x/y/width/height of each character in the image.

It's basically a spritesheet of letters.

Here's an example I generated from this public domain font: https://www.fontspace.com/public-pixel-font-f72305.

The image with all the letters:

Snippet from the XML:

<char id="32" x="507" y="0" width="3" height="1" xoffset="-1" yoffset="31" xadvance="32" page="0" chnl="15" />
<char id="33" x="285" y="87" width="18" height="28" xoffset="3" yoffset="4" xadvance="32" page="0" chnl="15" />
<char id="34" x="441" y="108" width="22" height="16" xoffset="3" yoffset="4" xadvance="32" page="0" chnl="15" />

You can download this generated example in the format that Phaser can use here: pixel_bitmap_font.zip

Step 1 - Download BMFont

Download the executable on this page:

https://www.angelcode.com/products/bmfont/

Step 2 - Load the font

• Prepare your font as a TTF file or similar
• Open up bmfont64.exe
• Select Options > Font settings
• Select your font file in Add font file
• Then select the name of the font in the Font dropdown

If your font is installed system-wide you can skip the Add font file step and just select the name of the font directly.

Now you should see your font loaded:

Step 3 - Export

First, we change the export settings:

• Select Options > Export options
• Select XML as the Font descriptor
• Select PNG as the textures option

• Press OK

Then to export:

• Select all letters for export (Ctrl + A)
• File > Save bitmap font as

This will generate an XML file (it'll have the extension .fnt, you can rename that to .xml or leave it as-is, Phaser will be able to read it as an XML either way) and a PNG file.

You may need to increase the width/height in the export options to keep all the letters in one image.

Step 4 - Use it in Phaser

Tell Phaser where to load the PNG & XML files:

// Load it
this.load.bitmapFont('bitmapFontName', 'font.png', 'font.fnt');
// Add it to the scene
this.add.bitmapText(0, 0, 'bitmapFontName', 'Lorem ipsum\ndolor sit amet');

Full example here: https://labs.phaser.io/edit.html?src=src/loader/bitmap%20text/load%20bitmap%20text.js.

Final thoughts

Note that a generated bitmap font has a font size baked in. Phaser can scale the font up and down but that may introduce artifacts in some cases. If you know the font size you want ahead of time you can set it in Options > Font settings.

I used a font size of 32px in my game which was big enough so that it still looked good when scaled down or up a bit.

I hope you found this useful! If you have any corrections or find a better way to generate bitmap fonts for Phaser I'm happy to update this article. Find me on Twitter (@Omar4ur) or my website (https://omarshehata.me/).

Comments

[himo45]

شرح جميل
هل يمكن تواصل معاك