[TEC] How to create new game fonts (bitmap/OFF)

[skwasjer]

How to create new game fonts (aka. bitmap fonts, aka. OFF-definition fonts) - PART 2


Creating the font definition file (OFF)

There's 2 methods to creating an OFF-file. One is creating it from scratch, and another is reusing an existing one (and modifying it). Whichever suits you best, allthough I have to admit right from the start S3D v0.9 contains 2 bugs making it nearly impossible to create an OFF-file from scratch. I only ran into these bugs while making the tutorial, so But consider this fixed in v0.9.1.

In the mean time, the screenshots will discuss creating a new file from scratch, but the process is similar when reusing an existing file.

Fire up S3D v0.9 or higher now.

1. Create new OFF-file

- Choose File > New and from the dialog that pops up, choose Font-character file (OFF).




2. A new empty file is created in memory.

- Notice how the Viewer panel indicates no texture was found and loaded.
- After the new file is opened, save it immediately to our mod folder under:

<mod>\Data\Menu\Fonts

IMPORTANT: use the exact same name as the DDS-file saved earlier, only the extension must be different now.

I used Courier34.off as I saved the bitmap earlier to Courier34.dds.





3. DDS file is loaded

After saving, notice how the DDS-file is now loaded into the viewer. S3D recognizes the alpha channel in the same way the game does, but inverts the mask for clarity in the S3D-viewer.

Note: In game, the actual white background is masked out, leaving white characters with a transparent background. The white color is then used to blend with colors specified in Menu_xxx.ini.




4. Start adding each character

Next up, the tedious process begins of defining 'rectangles' (if you reused an OFF-file this is somewhat faster!). These are the coordinates at which each seperate character can be found.

First, click the button in the toolbar to add a new character definition.




5. Specify the character details

Type the character, and specify the box coordinates. The viewer will show a blue rectangle based on the values you specify.

Important:
- Use the same height for each character. This way all characters have the same baseline.
- Make sure to use the height of the tallest character.

Here's two examples for A and B.




6. All characters defined

Once we are done adding/changing all characters, we have a long list of definitions.

- We can optionally change global character spacing. I used -4 to move the characters a bit closer together.

Save the file once more. Now we can use the font in the game.




7. Change menu_1024_768.ini file

- Copy the menu_1024_768.ini to your mod folder: <mod>\Data\Menu
- Open the file with notepad
- Scroll to the [Fonts] section.

I will be adding a new font to the bottom of the font-list. For this to work, we must also increment the font-count. Notice how the number of fonts in the list is always one more than the last font-identifier. This is a so-called 0-based array (starts counting at 0). Our new font has an index of 24.

[Fonts]
Fonts=25
Font0=DATA/Menu/Fonts/FPHunt26.tga
.
.
.
.
Font24=DATA/Menu/Fonts/Courier34.dds


8. Use your font throughout the menu_1024_768.ini file

Now we have to decide which text in the game uses our new font. For the sake of this example, I chose the bottom 3 items from the main menu.

[G63 I6]
Name=Exit
Type=1032;Button
.
.
Font=24; Changed from 22.

[G63 I7]
Name=Credits
Type=1032;Button
.
.
Font=24; Changed from 22.

[G63 I8]
Name=Options
Type=1032;Button
.
.
Font=24; Changed from 22.


9. Save the file, enable the mod and test in game.

And here's the result: