Welcome back to the Bingwood Journal! This first new post in ages is written by the lead programmer of the Bingwood project.

For the past year, we’ve been working hard transferring Bingwood from our own proprietary AWE editor into the Unity ecosystem, giving us more options on how to continue and where to eventually publish it. The original data files have been working like a charm when recreating the game in the new editor, but naturally, there have been bumps on the way. Namely, the bitmap fonts used in the original game are a road-less-taken in Unity and information on them is scarce. So far my experience with fonts has consisted of 1) load a vector-based font file into the project and 2) enjoy the results.

Typically the fonts are defined in vector form as OpenType, TrueType, etc. The bitmap-based fonts are nowadays likely only used for pixel-perfect retro games or similar things. That just happens to be our cup of tea!

Using vector-based fonts is as easy as it gets when working with Unity, yet the bitmap fonts are a completely different question. For a moment I thought that they are not supported at all, but that’s when the Unity custom fonts came to the rescue. Unity’s manual was quite helpful, but I needed a more precise example. Since the blog posts on the topic couldn’t even agree on the specifics, it was time for some good old trial and error.

Long story short, the way these fonts are created in Unity is an arduous one. Of course, the editor has to know the location of each character on the bitmap image, but the process could be streamlined: it takes more calculations than I had thought. Still, we managed to create a font as seen below.

The rest of the post is dedicated to those who are craving for more technical details.

Below is a snapshot of a custom font asset in the project. It is essentially a set of coordinates needed to locate the characters within the font file.

Here are some highlights of the file’s contents:

Line Spacing is the height of the text lines in pixels.

is the height of the text lines in pixels. Tracking is used to increase the gap between the characters.

is used to increase the gap between the characters. Character Rects contains the following information for each individual character: Size of the list of different characters Element _ contains and defines one of the listed characters. Each one of these 81 containers needs to be filled. Index refers to the ASCII index of the character. UV details the position of this specific character on the font image. The values are given in proportion to the size of the image: the pixel values of X and W are divided by the width of the image and Y and H by the height of the image. Vert defines the size of the outcoming character. W and H are essentially the same as for the UV field but as pure pixel values. The only trick here is that H has to be negative. Advance defines how many pixels we move forward to start the next character. To make the outlines (1px) of the characters overlap, the value is the width of the character minus one.

contains the following information for each individual character:

And that’s it! Fill in the info on all 81 characters and the font is ready for use. Well, I should say almost ready. We also needed a modified shader to accommodate for the outlining of the text, but that is a topic for another day.