Make Bitmap fonts using BMFont.
Text rendering is something any interactive program needs to communicate visually with the end-user. Using Bitmap fonts instead of vector fonts is a fast and cheap way to render text. Bitmap fonts are used often in HTML5 game development.
BMFont is an open source bitmap font generator from AngelCode that makes both image files and the character descriptions to be read by your game. This post will give you the basic setup to make your own bitmap font using BMFont. In the end the created bitmap font will be loaded to a PIXIJS renderer.
BMFont is downloadable as an installer or an executable file. The executable file is being used here. The main window will present you with a font preview grid and some default character collections in the right side bar.
In the menu bar, click Options and go to Font Settings, or press key F on your keyboard. This font setting window specifies what font to import and sets the import settings.
Use the Font dropdown to select a fonts that are already installed in your computer, if you have a separate font file that isn’t installed,set the path to your font file by clicking Add font file button right below the dropdown. Your selected font will be added to the font dropdown automatically. Then select the font from your dropdown.
Click OK button to save and close font settings window. Now your font window will preview the font.
There is the option to choose the characters that have to be exported to the bitmap font. Click and drag over the font preview grid to highlight the characters you need. If this font is intended to show numbers only, the row of digits can be highlighted. This option helps to utilize the final bitmap font image without including unused characters. if additional symbols are needed, (eg: decimal point, colon, equals) those symbols too need to be highlighted in the grid. Adding the space character is required if the font should render spaces.
Press V key to preview your bitmap font image.
Now that a font file is loaded by default settings, try modifying font settings to take control over the fonts you are importing. Try changing the size of characters to 64 and visualize the fonts.
Change the ‘bold’ and ‘italic’ properties as you wish. Add an outline to your characters by increasing the outline thickness property.
Press T to access the export options. This window gives control on how the final font image and character data set is created.
Use the Layout section to change the way the characters are arranged.
There may be cases where the font needs to be modified with blur effects, glow or drop shadows. In such cases these effects could get clipped when the font gets rendered. having a padding from the four sides is a solution. Export window can take padding values from all 4 sides.
Characters are enclosed in varied height rectangles by default. Setting ‘equalize the cell heights’ to true will set the rectangle height to a constant value. This may take more space in your image for the characters.
Increasing the padding in export settings or increasing the font size in font options will result in splitting the final bitmap image into many mages if the image size is not enough to place all characters. Try to keep all characters within one image when changing these values.
The Texture section has the options to change the properties of the final bitmap font image.
Change Width and Height properties to set a proper size. Smaller size is better. If transparency is needed in the font image, set the bit depth to 32.
Channel options can be manually changed as preferred to change how each channel is exported to the image. Preset channel options are available to set all of them at once easily. Selecting ‘White text with alpha’ will set channels to save a transparent image with the characters in white.
File format section gives options on the bitmap font image and data set’s file types. Select a font descriptor file type and a Image type for the final bitmap font. Here the selection is an XML descriptor with a PNG image.
clock OK button to save and close the export setting window. Click options and select ‘Save bitmap font as’ to save the final bitmap font. The final XML data is saved in the .fnt file, it refers to the final exported .png image.
The XML font descriptor is shown above. Note how the font settings and export settings are saved in the info tag and common tag.
Let’s try loading this bitmap font in a PIXIJS rendering loop. PIXIJS is a fast javascript rendering engine which is useful for making HTML5 games. Here PixiJS 4.8.1 is used.
Copy your fnt file and font image to assets folder, and add the path to fnt file in your PIXI loader.
PIXI.loader.add("assets/bitmapfont.fnt").load(setup);
In the setup function, create a BitmapText object with the font passed and add to the PIXI stage.
let text = '123102 73418713\n41341 348719\n346793476476205\n2082452465724'let bmtext = new PIXI.extras.BitmapText(text,{font:'128px Roboto Black', align: 'center', tint:'0X0FF000'});bmtext.position.set(512,288);
stage.addChild(bmtext);
An initial string value can be passed to be rendered by the bitmap text.The bitmap font comes to play in the style object that is passed in {}.
let bmtext = new PIXI.extras.BitmapText(text,{font:'128px Roboto Black', align: 'center', tint:'0X0FF000'});The ‘face’ property in the font descriptor XML is the name that should be passed for this object. The font size has to be passed with the name. here 128px is the size needed for the font of the bitmap text. As the size we defined in BMFont is 64, pixelation can occur in the characters. The best size for the bitmapfont is the size you set in bmfont. Make sure to set that value here as well. If that value is too small, it can be increased in a new export from BMFont. Other than size, PIXIJS BitmapText can set an alignment to align the text, and give a tint to set a color.
As the bitmap font we created has no letters, it won’t render those characters. A separate bitmap font can be created for cases where both letters and numbers are rendered.
