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

[skwasjer]

I don't think this has been modded alot, either for the lack of interest or for the lack of knowledge. The latter I can help with, with this tutorial.

I think some of the ingame fonts can use an overhaul, and perhaps this triggers some modders to take a look at the current game fonts.

DOWNLOAD (http://sh4.skwas.net/off_tut/Font_Tutorial.rar) - Mini mod I created with this tutorial. It also contains a PSD-template in the Support-folder.


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

Most 3D games use so-called 'bitmap fonts'. Bitmap fonts are fonts based on bitmaps instead of vectors, like most fonts you use in every day life (like TTF, OTF, or PS-fonts, etc). The reasons are that it doesn't require installation of such fonts, allows for faster rendering as the system it's core font pipeline can be bypassed, no real math is involved as bitmaps can simply be pushed to screen without any processing required and generally a custom bitmap font implementation is platform-indepedent.

Silent Hunter uses a combination of a bitmap, containing the font-art, and a definition file (OFF-extension) that contains the coordinates where each character is located in the bitmap. The combination of these 2 files is used by the game to render each character seperately:

Find the character definition in the OFF-file
Get the coordinates for the character
Lookup the bitmap-character in the bitmap
Render it
Repeat for next characterThis tutorial shows you how to create a font from scratch.

Requirements

Photoshop or similar
Photoshop DDS-plugin (or a converter or similar functionality in other software)
S3D v0.9
SH4Creating the bitmap

1. Creating a new bitmap
In this tutorial, I am going to create a new game font based on 'Courier New' (for sake of this tutorial, you can use any font you like)

http://sh4.skwas.net/off_tut/images/1. New Image.jpg

- You can pick any size you need (with small fonts, you can use a smaller canvas size)
- Resolution: 72 dpi
- Color mode: RGB8
- Make sure the background is white


2. Add an alpha channel
http://sh4.skwas.net/Off_Tut/Images/2. Add alpha channel.jpg


3. Select the RGB channels again, and deselect the Alpha channel
http://sh4.skwas.net/Off_Tut/Images/3. Select RGB.jpg


4. Add a text object, and specify all the characters you want your font to support.

I used this, but you do not have to use all of them (if the purpose of the font is limited). You can also add others, as long as they are defined in Windows 1252 codepage (unverified!!!).

ABCDEFGHIJKLMNOPQRSTU
VWXYZabcdefghijklmnop
qrstuvwxyz1234567890&
-+=_().,;:’”?!/%°®™
ÄÖÜÁÀÂÉÈÊËÇ€ÎÏÔŒÙÛß«»
äöüáàâéèêëç¢îïôœùû

http://sh4.skwas.net/off_tut/images/4.%20Add%20text%20object.jpg

Make sure to set the character and line spacing such, that no character touches or extends into the bounds of another character.

Note: Monospace fonts are the easiest, as each character has the same size.

In this example, I used font-size 34, with a custom linespacing of 37 and character spacing of 107%


5. Done adding the characters, this is what we have now
http://sh4.skwas.net/off_tut/images/5. Text added.jpg


6. Now, hide the text layer
http://sh4.skwas.net/off_tut/images/6. Hide text layer.jpg


7. Select Layer Transparency

Right-click on the small window in the layer (with the 'T' of our text object), and select 'Select Layer Transparency'.

All our characters are now added to the selection.

http://sh4.skwas.net/off_tut/images/7.%20Select%20Layer%20Transparency.jpg


8. Choose to save the selection
http://sh4.skwas.net/off_tut/images/8. Save Selection.jpg


9. Save the selection to our alpha channel

Note: make sure to 'replace' the channel if you repeat the process more than once.

http://sh4.skwas.net/off_tut/images/9. Save in alpha channel.jpg


10. This is the end result, we now have a bitmap based on our new font.
http://sh4.skwas.net/off_tut/images/10. End result.jpg


11. Save the bitmap as a DDS-file to your mod directory.

- Use DXT5, ARGB8 mode
- Don't save any mipmaps. We don't need them in 2D screen space.
- Save the file under your mod directory: <mod>\Data\Menu\Fonts using a name of your choice (no spaces).

I saved the file to Courier34.dds.

http://sh4.skwas.net/off_tut/images/11. Save as DDS.jpg

Now, we are done with Photoshop. Make sure to save a PSD of this file as well. If at any one point you wish to update or change your font, just unhide the text-layer, and repeat the process from step 4 down.

Next, we need to make the OFF-file, and set up the menu_xxx.ini file to use the font ingame. Please wait for the next post (in an hour or so) which will describe this process.

[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 :damn: 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).

http://sh4.skwas.net/off_tut/images/12. New File.jpg


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.

http://sh4.skwas.net/off_tut/images/13. Save File.jpg



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.

http://sh4.skwas.net/off_tut/images/14. DDS loaded.jpg


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.

http://sh4.skwas.net/off_tut/images/15. New character.jpg


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.

http://sh4.skwas.net/off_tut/images/16. CharacterDef.jpg http://sh4.skwas.net/off_tut/images/17. CharacterDef2.jpg


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.

http://sh4.skwas.net/off_tut/images/18. OFF final.jpg


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:

http://sh4.skwas.net/off_tut/images/19. Ingame.jpg

[Hitman]

Wow fantastic :up:

I would have changed the fonts in SH3 long ago if I had known how, now I can :up: :up: Many thanks!!!

[Hitman]

A question -though I suppose the answer is positive-: If I keep the same size for the letters and symbols as the original font, then I wouldn't need to do the step 4, right? :hmm: It would just be a swap file and I would get the new fonts?

[Webster]

i have long been interested in changing the font color and size for the orders bar.

can you clue me in on how to do that? :hmm:

[skwasjer]

A question -though I suppose the answer is positive-: If I keep the same size for the letters and symbols as the original font, then I wouldn't need to do the step 4, right? :hmm: It would just be a swap file and I would get the new fonts?
Correct. You can copy an existing OFF for that and tweak where neccesary (or not at all). You could also skip the entire menu.ini part if you simply replace an existing OFF+DDS/TGA.

A word of caution is that one or two stock OFF files have a couple of incorrect rectangles for certain characters but that's easily checked with S3D.

PS: for SH3, make a TGA 32-bit. For SH4, a DDS.
PS2: check out my first post at the top. I included the test-mod of the tutorial including a template.psd.

[skwasjer]

i have long been interested in changing the font color and size for the orders bar.

can you clue me in on how to do that? :hmm:
I'm not sure which menu-entries exactly are related to the orders bar, but the process is the same. Create a new font (or use a smaller/bigger existing one) and find the entries in menu.ini file that control the appearance of the orders bar.

[Hitman]

Correct. You can copy an existing OFF for that and tweak where neccesary (or not at all). You could also skip the entire menu.ini part if you simply replace an existing OFF+DDS/TGA.

A word of caution is that one or two stock OFF files have a couple of incorrect rectangles for certain characters but that's easily checked with S3D.

PS: for SH3, make a TGA 32-bit. For SH4, a DDS.
PS2: check out my first post at the top. I included the test-mod of the tutorial including a template.psd.

Cheers :up:

[marrydavidson101]

thanks for sharing this

[stanger]

I can't see the font texture in 'viewer' window in s3d, its just black. Happens with default game .off files and new ones. What can be wrong? (im using s3d 0.9.9, tried it on win7 and win8).