View Single Post
Old 09-29-08, 02:13 PM   #1
skwasjer
The Old Man
 
Join Date: Apr 2007
Location: Netherlands
Posts: 1,547
Downloads: 26
Uploads: 3
Default [TEC] How to create new game fonts (bitmap/OFF)

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 - 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:
  1. Find the character definition in the OFF-file
  2. Get the coordinates for the character
  3. Lookup the bitmap-character in the bitmap
  4. Render it
  5. Repeat for next character
This 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
  • SH4
Creating 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)



- 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



3. Select the RGB channels again, and deselect the Alpha channel



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



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



6. Now, hide the text layer



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.




8. Choose to save the selection



9. Save the selection to our alpha channel

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




10. This is the end result, we now have a bitmap based on our new font.



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.



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.

Last edited by skwasjer; 09-29-08 at 03:53 PM.
skwasjer is offline   Reply With Quote