SUBSIM Radio Room Forums - View Single Post - [TEC] How to create new game fonts (bitmap/OFF)

skwasjer · 09-29-08, 02:14 PM

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:

09-29-08, 02:14 PM	#2
skwasjer The Old Man Join Date: Apr 2007 Location: Netherlands Posts: 1,549 Downloads: 28 Uploads: 3	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: __________________ S3D - Silent 3ditor (v0.9.9) - S3D homepage - Open sourced S3D file parser API's - SUBSIM thread SH5 mods: Speech Recognition for SH5 \| Digital UI Clock Tutorials: [TEC] Import/export 3D models to/from game using S3D [TEC] How to work with the model viewer in S3D - VIDEO Last edited by skwasjer; 10-01-08 at 02:00 PM.