How to make a custom Bitmap Font for LibGDX

How to generate and customize Bitmap Fonts using BM Font and GIMP

Bitmap font for LibGDX? I have looked across the web for many solutions as to how to make them. The problem is, none of them show you how to do the entire process. In this tutorial, we will learn how to generate a bitmap font for your LibGDX game programmed in Android Studio. Not only that, you will learn how to customize your bitmap font too.

At the end of this tutorial, you will have a bitmap font that will be used to render text as shown in the picture below:

Bitmap Font on Phone

This is what the final result is. Your very own custom made Bitmap font.

Setting up BM Font

What is a bitmap font and how to we get them?

A bitmap font is a .png image (portable network graphic) that is composed of characters. In addition, it also has a separate file that tells the computer what each character is, and how it can access it. These two file allow people to render each character from the image to the screen. In the end, their is an illusion of text. Bitmap fonts were used in old versions of windows. Now they have been replaced by the newer .ttf (true type font) file.

How to download the BM Font from Angle Code

The program that we will use to create bitmap fonts is conveniently called, BM Font by Angle Code. You can download BM Font at http://www.angelcode.com/products/bmfont/. We will be using version 1.3, not the beta.

BM Font by Angle code website

This is the site where you can download BM Font.

 

The downloaded file should be called insall_bmfont_1.13.exe, as shown below:

BM Font installer download.

BM Font installer download.

Installing BM Font on your computer

Sorry if I make it look more complicated than it actually is. BM Font is easy to install. Navigate to your file and open it up.

You will most likely see this.

Make changes to your computer

Oh no! It is that yellow screen.

 

 

 

 

If you trust this application, press yes and the following screen will appear:

 

BM Font by Angle Code readme screen

This is the ReadMe screen for BM Font. As always, you should always read these.

This screen explains what the program is, the disclaimer, and the change log.

Press Continue, and this screen should appear:

 

 

BM Font install options by Angle Code

This screen shows what options you prefer to be installed with BM Font.

 

Just choose what you like and press Next.

The last screen before installation asks you do choose where to install the program. I would just keep it where it is, as with most program installation.

BM Font installation

BM Font Install Location Screen

(Humor Break…WOW! Look at that file size!

< 1 MB. I could install this program over 500,000 times, and my 1TB Hard drive would still have enough space to install Civilization 5″)

 

 

 

 

 

Press Install and you should be good to go. Now open up the Bitmap Font Generator. If this is what you see, you have successfully installed BM Font!

BM Font screen upon opening.

BM Font screen upon opening.

 

A Tour of BM Font before we get started

BM Font is installed. We are one step closer to having our own custom bitmap font that can be used in any our LibGDX games in Android Studio.

 Selecting Character:

In BM Font, we need to choose what characters to export when we generate our bitmap font. To give you an idea, we could choose all the letters in the alphabet, except the letter ‘X’. There are multiple ways of selecting characters:

Click on them

Selecting individual characters in BM Font.

Selecting individual characters in BM Font.

 

Select a set of them

Selecting characters in BM Font.

Selecting characters in BM Font.

 

Go to Edit > (Un)select All Character [Ctrl + A]

lastly…

Arabic characters shown in BM Font

Whoa! Look at the those Arabic characters.

You can also see the different character sets by clicking on the name itself. In this case, I have revealed some Arabic characters.

 

Font Settings

The second part of BM Font that we have to use is the Font Settings. They can be found by going to Options > Font Settings [F]

Font Settings in BM Font

Font Settings Screen

 A. Font: You can select any font installed on your computer from this drop-down menu.


B. Charset: Limits what type of characters you can choose from. Personally, I would just keep it set to Unicode for maximum customization.


C. Size (px), This affects how big your characters will be. The larger the size, the better the resolution. Also note: remember that phone screen sizes and densities can vary. To fix this, you could export different sized bitmap fonts to your game. This is why True Type Fonts are better than bitmap fonts, because they can be scaled as vectors.


D. Height %: This value stretches the height of the characters by this percentage. Lower numbers will yield flatter bitmap fonts; higher percentages will yield taller bitmap fonts.

BM Font height option comparason graphic

This is just a visual, that shows how the height option affects our Bitmap Font

E. Render from True Type Font: I would check this. I think it yields better results.

F. Super Sampling: I would also check this. Checking this option makes the bitmap font look smoother. The number to the left of it is determines the number of samples. The higher that number, the longer it will take to render the font, but the smoother it will be.

BM Font pixel font outline graphic

2 different font outline settings for a visual comparison


G. Outline Thickness: How many pixels of border do you want your font to have? This is good if you want a little contrast in your bitmap font.

 

 

 

Now let’s look at the Export Options

Bitmap Font Export Options Screen

Bitmap Font Export Options Screen

 

 

A. Padding: This is how many transparent pixels you want around each character in you bitmap font.


 

B. Spacing: This is how many pixels each character will be separated by.

Note: I read somewhere that the padding for each value should be 1, and the spacing should be 2. The writer stated that from his experience, it results in better bitmap font scaling in his games. For that reason, we are going to do the same.”


C. Width & Height: This is how big our image will be. Although LibGDX can draw non-power-of-two function as a result of OpenGL 2.0, we are going to make them power-of-two anyway (i.e. 256×256, 512×512, 1024×1024);


D. Bit Depth: For our project, we want 32 bit, that way we can get a transparent texture.

E. Invert: If you want the font to be draw transparent and the outside solid, check this box.

F. Font Descriptor: LibGDX loads bitmap fonts via a text file. Checked that one.

G. Textures: Select png (Portable Network Graphic). When we load the font in Android Studio, it will look for this image.

Previewing the font: Lastly, to see what a font will look like the Options > Visualize [V]. Look at the top. It says page 1/1. If the collection of characters takes up more space than the image, BM Font will generate multiple images.

Creating our Bitmap Fonts

In short: Here is what our bitmap font configuration will look like. Feel free to change it up.

  • Font: Consolas
  • Size: 72px
  • Outline Thickness: 4
  • Padding 1
  • Spacing 2
  • Width 512
  • Height 512
  • 32 Bit
  • .png Image
generate bitmap fonts settings

The image is small, but this is all of the settings our Bitmap font will have when we export it.

Select Options> Save Bitmap Font As.

Choose a location and name it CustomFont

Our Bitmap Font files

Our Bitmap Font files

Note: If you change the name of the image, it will not function unless you also change the name of the file inside of the .fnt file. Basically, do not rename it.

 

Customizing our Bitmap Fonts in GIMP

In this section, we are going to edit our Bitmap Font image in Gimp. This will give it some flare that will help make it stand out from the crowd.

Note: If you use Photoshop, feel free to use the Inner Emboss layer effect. We are just editing the generated bitmap font to suit our needs, and still have it be readable.

GIMP is a free photo editing software. If you do not have it, you can download it at http://www.gimp.org/

  1. Open the file in gimp
Bitmap Font opened in GIMP

This is what the file looks like in GIMP. (If you use Photoshop, use can use layer effects to similar things to the image)

 

  1. Select the Select by Color Tool
  2. Click on a Transparent Pixel
  3. Invert the selection: Ctrl + I, or go to Select > Invert
Selecting transparent pixels in gimp

We are going to select all of the transparent pixels on the image.

  1. Go to Colors > Curves, and set the curves as follows:
Using GIMP curves tool to adjust the font image

Take the left point and move it to the top. Move the right point halfway down.

  1. Press OK.
  2. Go to Filters > Distort > Emboss
Navagate to Eboss filer in GIMP

Filters > Distort > Emboss

 

 

 

 

 

In our Emboss settings:

Emboss effect in GIMP

Lets emboss our font. It really does have a shine to it.

 

 

 

 

  • Check: Preview

 

  • Select: Bumpmap

 

  • Set Azimuth to 90.00
  • Set Elevation to 7.00
  • Set Depth to 5

 

 

 

 

  1. Press OK
  2. Go to Colors > Invert
  3. Go to Colors >Curves
  4. Do the following to the Value channel and the Alpha Channel
Using the curves tool in GIMP to edit the Bitmap font one last time.

In the value channel, click on the center of the curve to create a new point. Move it down and right 2 squares. In the alpha channel, add a point at the very bottom right such that the alpha is almost hidden.

 

  1. Press OK and it should look like this:
GIMP Curves result

Once you apply the curves, this is what it the image should look like.

 

  1. Select the Select by Color Tool
  2. Click on a Transparent Pixel
  3. Go to Select > Grow
  4. Set the pixels to grow by to 1
  5. HOLD the Control Key on the keyboard and click on a Transparent Pixel to subtract all the transparent Pixels from the selection.
  6. This is what you should get:
GIMP selection bitmap font boarder

The selection should be a boarder of the font, as shown above.

 

 

 

 

 

 

 

 

 

 

  1. Select the Fill Tool
  2. Select Fill whole selection
  3. Set Black as the color
Fill to in GIMP

Fill tool. This is so fulfilling… pun

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  1. This is the last part to our bitmap font, Click on the selected pixel.
  2. There should now be a black border around your bitmap font characters.
Black boarder around bitmap font image edited in GIMP

Tada! A fabulous black border around our font.

 

 

 

 

 

 

 

 

 

 

 

 

 

  1. Now let’s finish this magnificent piece of art and display it in a museum…. Nope, let’s put it into a video game instead. Select File > Export to Custom_Font_0.png
  1. Export the png file

Here is a before and after picture.

before and after editing bitmap font

Before and after screenshot of our bitmap font. (left) Before, (right) After

Note: I scaled the image, so it may look a bit pixelated. Also, the left was captured in GIMP, and the right was captured in Windows photo viewer. They both have transparencies.

Programming our Bitmap Fonts

  1. Open up your gdx-setup.jar Once, again, you can find this in my previous article, http://www.programmingmoney.com/setup-libgdx-android-studio/
  1. Generate a new LibGDX project for Android Studio and call it CustomFontProgram (See image for details).

VERY IMPORTANT NOTE: If you get a message saying that the current destination is not empty, would you like to replace it. Select NO.

  1. Create a new folder in a sub-directory that has nothing in it. You can easily permanently delete your files doing this. Please, do this correctly.
LibGDX setup screen for Android Studio

This is the settings we will use when we setup our new LibGDX Project for Android Studio.

 

  1. Open up your project in Android Studio. Once you getting running, open the game class CustomFontGame.
Android Studio Java file

Open the Java file in Android Studio. It should look like this. (We a different package name of-course)

 

  1. Add the Bitmap Font files to the android/assets subdirectory.
Bitmap font files pasted into Android Project

Copy and paste the Bitmap Font files into your asset folder within you Android project.

 

OKAY, by now I am sure you are very exhausted. So, I will just give you the code. This tutorial is not about programming bitmap fonts. Rather, it is to show you the process of creating custom bitmap fonts.

 Plug in your phone, build the project, and you are finished! Congratulations.

Bitmap font program programmed in Android Studio.

This is what the final result is. Your very own custom-made bitmap font.

Something that might appear in a future article is how to rotate bitmap fonts. I have found a way to do it. Otherwise, have fun creating and customizing your bitmap fonts! Enjoy!

If you have any suggestions, comments, or issues, feel free to leave a comment.

Comments

How to make a custom Bitmap Font for LibGDX — 1 Comment

  1. Pingback: How to setup Libgdx for Android Studio - Programming Money