Outlined Fonts        

YAT Outlined Fonts This is a step-by-step guide on how to create nice outlined fonts for use with TextAreaOverlayElements in Ogre (or any other place where texture fonts are needed). This is a description of the technique I used when creating YAT. You can see some screenshots of the fonts in action here. At the bottom of this page there's a texture and .fontdef you can start using right away.

Tools needed

Creating the texture

  1. Start Bitmap Font Builder and setup texture size, font, and font size.
  2. Save the font widths in binary format to "font_name.dat".
  3. Save the texture as an 8-bit TGA in "font_name.tga".
  4. Open the font texture in Photoshop.
  5. Convert the image to RGB (required to make the font look right in DirectX).
  6. Select everything [Ctrl+A], and copy [Ctrl+C].
  7. Go into quick mask mode [Q], and paste [Ctrl+V].
  8. Now exit quick mask mode again [Q], and create a new white solid color adjustment layer. This new adjustment layer now uses the font as a mask.
  9. Delete the background layer, because you don't need it anymore.
  10. Add layer styles. A black outside stroke of 3px (1024x1024 texture) or 2px (512x512 texture) looks great. A nearly invisible drop shadow is nice too, but make sure 'size' and 'distance' are small (at most 5px) because both stroke and shadow must fit into the room for each character.
  11. Duplicate the layer (there should be only the one we are working on), and hide the original.
  12. After selecting the new layer go to menu Layer|Rasterize|Layer and afterwards go to menu Layer|Layer Style|Create Layers. Click OK if a warning dialog appears.
  13. Now link together the three layers created (if you used both stroke and drop shadow), and merge them together [Ctrl+E].
  14. Create a new black solid color adjustment layer, and position it at the bottom (below the font layer).
  15. Select the merged font layer's transparency by Ctrl+clicking on the layer thumbnail in the Layers tab.
  16. While keeping the selection, link the two layers (font and black layer) and merge them together [Ctrl+E].
  17. Now click the button "Add layer mask" in the Layers tab, and the font should appear with stroke and drop shadow on a checker board (transparent) background.
  18. Now save this image as a PNG image in "font_name.png".

Creating the .fontdef

For creating the .fontdef file for use with Ogre, you can use the BitmapFontBuilderTool which is located in ogrenew\Tools\BitmapFontBuilderTool of your Ogre source tree. This is where you'll need the font widths from "font_name.dat" which you exported from Bitmap Font Builder earlier.

The font outlines typically make the characters a little wider than they were in the raw Bitmap Font Builder output, thus you need to add a few pixels to the left and right sides of each character.

The version of the tool currently in the Ogre source requires some modifications to make it possible to add these extra pixels. Therefore I have submitted a patch with this enhancement (and a bugfix) to the patch tracker here: https://sourceforge.net/tracker/?func=detail&atid=302997&aid=1519146&group_id=2997.

Sample: Berlin Sans Outlined Texture Font

berlin_sans32.png

Here follows the corresponding berlin_sans32.fontdef file:
{CODE(wrap=1")}BerlinSans32
{

type image

source berlin_sans32.png

glyph ! 0.0859375 0.125 0.101563 0.1875

glyph " 0.146484 0.125 0.166016 0.1875

glyph # 0.201172 0.125 0.236328 0.1875

glyph $ 0.269531 0.125 0.292969 0.1875

glyph % 0.324219 0.125 0.363281 0.1875

glyph & 0.386719 0.125 0.425781 0.1875

glyph ' 0.460938 0.125 0.476563 0.1875

glyph ( 0.519531 0.125 0.542969 0.1875

glyph ) 0.582031 0.125 0.605469 0.1875

glyph * 0.644531 0.125 0.667969 0.1875

glyph + 0.707031 0.125 0.730469 0.1875

glyph , 0.773438 0.125 0.789063 0.1875

glyph - 0.832031 0.125 0.855469 0.1875

glyph . 0.898438 0.125 0.914063 0.1875

glyph / 0.958984 0.125 0.978516 0.1875

glyph 0 0.0136719 0.1875 0.0488281 0.25

glyph 1 0.0839844 0.1875 0.103516 0.25

glyph 2 0.142578 0.1875 0.169922 0.25

glyph 3 0.205078 0.1875 0.232422 0.25

glyph 4 0.265625 0.1875 0.296875 0.25

glyph 5 0.330078 0.1875 0.357422 0.25

glyph 6 0.390625 0.1875 0.421875 0.25

glyph 7 0.455078 0.1875 0.482422 0.25

glyph 8 0.517578 0.1875 0.544922 0.25

glyph 9 0.578125 0.1875 0.609375 0.25

glyph : 0.648438 0.1875 0.664063 0.25

glyph ; 0.710938 0.1875 0.726563 0.25

glyph < 0.769531 0.1875 0.792969 0.25

glyph = 0.830078 0.1875 0.857422 0.25

glyph > 0.894531 0.1875 0.917969 0.25

glyph ? 0.957031 0.1875 0.980469 0.25

glyph @ 0.0136719 0.25 0.0488281 0.3125

glyph A 0.0761719 0.25 0.111328 0.3125

glyph B 0.138672 0.25 0.173828 0.3125

glyph C 0.201172 0.25 0.236328 0.3125

glyph D 0.261719 0.25 0.300781 0.3125

glyph E 0.328125 0.25 0.359375 0.3125

glyph F 0.390625 0.25 0.421875 0.3125

glyph G 0.449219 0.25 0.488281 0.3125

glyph H 0.511719 0.25 0.550781 0.3125

glyph I 0.585938 0.25 0.601563 0.3125

glyph J 0.646484 0.25 0.666016 0.3125

glyph K 0.701172 0.25 0.736328 0.3125

glyph L 0.765625 0.25 0.796875 0.3125

glyph M 0.824219 0.25 0.863281 0.3125

glyph N 0.886719 0.25 0.925781 0.3125

glyph O 0.949219 0.25 0.988281 0.3125

glyph P 0.0136719 0.3125 0.0488281 0.375

glyph Q 0.0742188 0.3125 0.113281 0.375

glyph R 0.138672 0.3125 0.173828 0.375

glyph S 0.205078 0.3125 0.232422 0.375

glyph T 0.265625 0.3125 0.296875 0.375

glyph U 0.326172 0.3125 0.361328 0.375

glyph V 0.388672 0.3125 0.423828 0.375

glyph W 0.445313 0.3125 0.492188 0.375

glyph X 0.515625 0.3125 0.546875 0.375

glyph Y 0.576172 0.3125 0.611328 0.375

glyph Z 0.640625 0.3125 0.671875 0.375

glyph 0.707031 0.3125 0.730469 0.375

glyph \ 0.771484 0.3125 0.791016 0.375

glyph 0.832031 0.3125 0.855469 0.375

glyph ^ 0.892578 0.3125 0.919922 0.375

glyph _ 0.955078 0.3125 0.982422 0.375

glyph ` 0.0195313 0.375 0.0429688 0.4375

glyph a 0.078125 0.375 0.109375 0.4375

glyph b 0.140625 0.375 0.171875 0.4375

glyph c 0.207031 0.375 0.230469 0.4375

glyph d 0.265625 0.375 0.296875 0.4375

glyph e 0.330078 0.375 0.357422 0.4375

glyph f 0.396484 0.375 0.416016 0.4375

glyph g 0.453125 0.375 0.484375 0.4375

glyph h 0.515625 0.375 0.546875 0.4375

glyph i 0.585938 0.375 0.601563 0.4375

glyph j 0.648438 0.375 0.664063 0.4375

glyph k 0.703125 0.375 0.734375 0.4375

glyph l 0.773438 0.375 0.789063 0.4375

glyph m 0.822266 0.375 0.865234 0.4375

glyph n 0.890625 0.375 0.921875 0.4375

glyph o 0.953125 0.375 0.984375 0.4375

glyph p 0.015625 0.4375 0.046875 0.5

glyph q 0.078125 0.4375 0.109375 0.5

glyph r 0.144531 0.4375 0.167969 0.5

glyph s 0.208984 0.4375 0.228516 0.5

glyph t 0.269531 0.4375 0.292969 0.5

glyph u 0.328125 0.4375 0.359375 0.5

glyph v 0.390625 0.4375 0.421875 0.5

glyph w 0.449219 0.4375 0.488281 0.5

glyph x 0.517578 0.4375 0.544922 0.5

glyph y 0.580078 0.4375 0.607422 0.5

glyph z 0.642578 0.4375 0.669922 0.5

glyph { 0.707031 0.4375 0.730469 0.5

glyph | 0.771484 0.4375 0.791016 0.5

glyph } 0.832031 0.4375 0.855469 0.5

glyph ~ 0.892578 0.4375 0.919922 0.5

}{CODE}


Alias: Outlined_Fonts