Creating bitmap fonts with Font Creator

The Font Creator plugin is a really nifty tool for any game creator and is easily overlooked unless mentioned. By using it, you can create a bitmap font using any system font you have available. Refer to the Downloading the plugins section in how to download a plugin.

How to do it…

We can create bitmap fonts with Font Creator by performing the following steps:

1. Right-click on the Fonts folder under Interface in our Project Assets folder. Select New and then select Other.... Font is located in the GUI folder.
2. Next, we choose the font we would like to use from the available system fonts.
3. In the Configure Font part, we can make adjustments before actually creating the bitmap. It's recommended to use a power-of-two number for the size.

   Tip

   A higher resolution will make the text more detailed, but it will at the same time take up more memory, not only for the bitmap image itself but also for the text generated. Consider the application requirements or do some testing. You can also try to adjust the size of the font to fit the bitmap.

4. Once we have our font, there are a couple of ways we can use it. First of all, if we want to replace the default font used by the application, we have to name the font Default.fnt and make sure it's placed inside the Fonts folder under Interface. This is what the application is looking for during startup.
5. Another way to use the custom font is to load it in the application by using the following code:

   BitmapFont myFont = assetManager.loadFont("Interface/Fonts/MyFont.fnt");

6. It can then be used to create text that can be placed anywhere on the screen, as shown in the following code:

   BitmapText text = new BitmapText(myFont, false);
   hudText.setText("Text!");
   hudText.setColor(ColorRGBA.Red);
   guiNode.attachChild(hudText);

How it works...

The BitmapText class is spatial, and needs to be attached to a node in order to be displayed. The most common node is probably the guiNode. Spatials added to the guiNode will be positioned according to the screen space and projected without depth. For this reason, using the guiNode is suitable for HUD items. Setting the localTranslation parameter to (0, 0, 0) will make the text appear in the bottom-left corner of the screen. Instead of using (screenWidth, 0, screenHeight), we will place it in the top-right corner.