Creating Dynamic Text With Custom Bitmap Fonts

Favorite This Post!
0 Votes
Posted by Lavon on February 11, 2014

Adding polish to your game is very important to enticing players to play your game. One really easy way to add character to your game is to use custom designed text using a bitmap font. Bitmap fonts are pre-rendered glyphs laid out like a sprite sheet. The GameBuilder engine can use a custom font sheet to map the characters in a string to a composed image of text. You can find a more detailed explanation of bitmap fonts here.

GameBuilder Studio makes this a very streamlined process. The industry standard xml bitmap font data file (.fnt) can be created using software like Glyph Designer (mac only) or a limited in functionality, cross platform, free alternative called Littera. You can import the generated bitmap font data file and font sheet into the editor for use in a Text Renderer. I will explain both workflows in this tutorial.

Generating A Bitmap Font Sheet in Glyph Designer

GlyphDesigner Screen Shot
  1. Import a true type font file. You can find free fonts all over the internet. Make sure to check the license for usage.
  2. Or you can select a system font from the left menu. Set the desired size of the final font output. One of the limitations of using a bitmap font is the fact that you can't dynamically change the size so plan out your text sizes ahead of time.
  3. Export the final xml based .fnt data file. This will also generate a font sheet image file (.png) with all of the included glyphs (characters). It is a good idea to only include the characters that your game will need. It will help to save memory.

Generating A Bitmap Font Sheet in Littera

Littera Screen Shot

Using the free Littera bitmap font tool is a very similar process. Load a true type font file, select a size, add a color gradient or any customization you want, and export the xml based .fnt data file. Make sure to check the power of 2 size box in the export settings.

Littera Manual File Adjustments

Bitmap Font Data File Screen Shot

With the Littera tool it exports a zip file with two files labeled as "font". It does not label the font file and internal font face name correctly so this is currently a bit of a manual process. You need to be able to identify your font inside of GameBuilder Studio later so you will want to have a descriptive font face name. Open the .fnt xml file and locate the "face" attribute on the info xml node. Change the string to a more descriptive font name. Also change the font image name to the same name as the font face without spaces. You have to make sure the actual image file name on your file system is changed as well so that GBs can find the file on import.

Importing The Bitmap Font Into GameBuilder Studio

%STEP_TITLE%

Go to the Assets tab and open the browser to import a resource. You only need to select the bitmap font xml data file (.fnt). It should have a .fnt file extension on it. GameBuilder Studio will automatically find and load the accompanying font image file for the font to be rendered so make sure the font data file and image are in the same folder when importing.

Once the font sheet is imported just drag and drop the Font Sheet asset into the scene or add a Text Renderer to an entity and select the font from the drop down. Change the text in the text box and you will see the font auto renderer in the scene. If a character is not available in the string it will just not be rendered. Font sheets can have a color applied to them inside of the editor and the color property can be changed dynamically by changing the color property on the Text Renderer component.


Congratulations on finishing this tutorial! Found it helpful? Spread the word...


Comments

Pages: 1 All
Said:
Great tutorial !! Adds such a polished feeling to the game with custom fonts.
4 years ago
0
Said:
THIS PROGRAM HAVE IN WINDOW 7 ?
4 years ago
0
Replied:
Joseph Glyph Designer is mac only but Littera (http://kvazars.com/littera/) is browser based and can be used on windows
4 years ago
0
Pages: 1 All

Anyone can leave a comment!


You just need to signup for an account or log-in before you can comment.