Another way to bring our fonts to our mods is by creating separate images for each character, or by using a single large image and dividing each letter into TEXTURES, then finally assigning the characters in FONTDEFS. This can be a rather tedious process.
There is currently a design program that allows you to create bitmap fonts in BMF format, which has been supported by ZDoom for quite some time. That program is Pro Motion NG.
IMPORTANT: If your target source port doesn't support the format, you'll need to find a way to convert from BMF to the base Doom format. It's also worth noting that fonts may not display correctly in ZDoom or older versions of GZDoom.
What is Pro Motion NG?
According to its official website, Pro Motion NG is a drawing software that allows you to quickly create pixel-precise images, animations, sprites, mosaics, and level maps.
It's a program very similar to Aseprite, which specializes in pixel art. The advantage of this program is that it allows you to create the type of fonts we'll be creating here.
While Pro Motion NG is a paid program (you can purchase it through its website or through Steam), it has a free version that, although somewhat limited, is sufficient for creating and exporting fonts.
About Bitmap Fonts
According to the program's documentation, a bitmap font defines a small image per character. This allows for multi-color fonts and supports alpha transparency. What may be a disadvantage for some is that they can't be scaled.
So before creating a font, keep in mind the dimensions you'll be using, keeping Doom's base resolution in mind.
Creating Our Font
For the initial step, you can use any drawing program: Gimp, Photoshop, Aseprite, Paint, or any other. Even Pro Motion NG works.
So, what I recommend is that you create your font according to the style you want for your mod, using a workspace that works for you to create the characters.
Here are some examples based on the "ianhan" repository available on Github.
A great advantage of Pro Motion NG is that it supports the entire ASCII character table, so you can create any characters you want, keeping in mind the possibility of localizing your project into other languages.
The Bitmap Font Format
Once our font is created, it's important to know the bitmap font format so it can be used in Pro Motion NG.
In the program, each character must have the following format:
1- Point indicating the start of the character.
2- Borders delimiting the start of the character.
3- Character margins. The top border is for accents and other symbols that extend over a character, and the bottom border is for lowercase letters that extend beyond a character, as well as other symbols.
4- Area where the character will be placed.
5- The character in question.
As you can see, a pixel is placed in the upper left corner to determine which character will be declared in the bitmap. This pixel must be only 1x1, and there must be no nearby pixels, otherwise, errors will occur when creating the character. Therefore, the borders shown in the image must be completely transparent.
The character width can be perfectly dynamic depending on its dimension, unless you want to create monospace characters. It's important to note that the format doesn't allow you to specify the spacing between characters, so it's recommended to set it manually for each glyph if necessary.
A new image file is then created with a considerable width and minimum height, based on the width and height of each character, plus the extra pixel defined by each glyph, as shown in the image.
If using extended characters from the ASCII table, a separation must be made with the number of pixels above them, since there are no assigned glyphs between characters 127 (~) and 161 (!), so they are just blank spaces. Therefore, it's best to fill the spaces as follows.
It's recommended to index the image according to the color palette used, ensuring that the palette doesn't exceed 64 colors, which is the limit of the BMF format. Finally, we save the font image as a PNG.
Checking the Result
Now we open Pro Motion NG (if we were working in another program) and load the image with the font created and its respective separations.
Now we create a new file in "File > New Project > Create..." and in the "Type" section, select the "Bitmap Font" option. Then we adjust the canvas size according to the resolution of our font, and finally, in the color palette to use, select the "Take from current project" option, which will take the palette from the image open in the program.
It's important to keep in mind that the free version of Pro Motion NG allows a maximum of two projects to be open at a time, so keep this in mind if you want to test the font in another project.
We copy the entire font from the initial image and paste it later into the new project. If we do this correctly, all the characters will be automatically mapped thanks to the upper pixels of the image. For example, we can see in the image that, when we place our cursor on a character, the corresponding glyph is displayed below.
Corrections and Color Reduction
If there is a mismatch between the highlighted character and the cursor, we can use the shortcut "Ctrl + Shift + X" to add a column, thus adding the corresponding pixels. However, if there is an excess glyph, and we have left empty space after cropping it, we can type "Ctrl + Alt + X" to remove a column of pixels until the image is organized again. However, it is recommended to add a few pixels to the canvas first so that the font is not clipped due to lack of space (click on the "Resize" button on the lower right corner to change the canvas size).
If the font is correctly mapped, or once we have made the relevant corrections, we now click on "Colors > Reduce colors...". It's worth remembering that bitmap fonts allow a maximum of 64 colors, so we select the "Optimized individual palettes" option and reduce the color to 64.
Once the conversion is complete, we can see that the color palette window now only displays the colors used in the image.
Now we're ready to export the font. Simply select "File > Save image as...", name our font, assign the path where we'll save it, and change the extension to "BMF – Bitmap Font Format."
A window like this will appear to define the export parameters. We'll leave it as default in this case.
If no errors appear, the font was exported successfully.
Testing Our Font
Now we open Slade and create a "wad" or "zip (pk3)" file, and add the font to the file. In my case, I'll add two fonts to replace the DBIGFONT and SMALLFNT files, respectively.
We can see that the lines where we set the reference pixel for each character have disappeared, and we can see the fonts sorted, with the extra spaces we assigned to each one.
We save our file and load it into GZDoom (in this case), or another fork (LZDoom, UZDoom, etc.), or some other port compatible with the BMF format.
If everything loads correctly, we can check the options to see that the large font displays correctly.
And to test the small font, we can exit the game and check that the exit message displays correctly with the new font.
I'm leaving you a gallery of what the font looks like in some languages. In the case of other Romance languages, the font may not load. This is probably because the characters for that language aren't created in the file, or for some other reason. If you have the characters and still can't see the font loaded with the selected language, please contact the source port administrators.
And so concludes this tutorial on creating bitmap fonts with Pro Motion NG. You can download the test file and see how it works for yourself.