Font systems for games

[James C. Smith]

The topic about “PopCap's font system” made me curious about what everyone is doing for fonts. We used to have the artists put a font into one big image. He could paint the image, render it in 3D, or whatever. We used the bottom row of pixels to specify the character boundaries. A white dot in the bottom row indicated the break between two characters and the bottom row was never drawn to the game screen. But we found that usually the artists made the fonts images by finding (or making) a True Type font they liked and then typing all the characters into a text document and taking a screen shot of that. We also ran into a problem when we needed to do international versions of the game. There were WAY to many characters. Now we just use True Type fonts. The artists can edit the fonts in a standard True Type font editor or we can just use free True Type font without going through any special tools or converters. We don’t let Windows render the True Type for a number of reasons. Different version of Windows render them differently especially in regard to antialiasing, it is cumbersome to “install” the True Type fonts, and not all platforms are Windows! We use FreeType (http://www.freetype.org/) which is a free cross-platform library to rasterize the True Type characters and then we push that bit map through our standard 2D blitter stuff.

So how is everyone else doing fonts these days? There is probably some old thread in the archive I should have read first.

[ggambett]

Same story as you - started with bitmapped fonts, now using TrueType fonts via SDL_TTF, which uses FreeType.

BTW - I'm surprised by how we have not only reinvented the wheel but reinvented the same wheels, particularly in that other thread about what we do to images before they go into the installer :) I guess this is the kind of thing that happens when you read some theorem was "independently discovered" by several people at the same time.

[Scorpio]

We also recently switched to using TrueType fonts via the Freetype library...for many of the same reasons you mentioned. It makes it much easier to localize the games and the text sizing/spacing is always exactly the same regardless of your Windows settings. Since we also do Mac versions, this has solved some font issues between PC/Mac as well.
-Scorpio

[tolik]

Oh my god, so this is a solution to font spacing problem... Doh!
Ok, another wheel reinvented :D

[Valen]

Same story as you - started with bitmapped fonts, now using TrueType fonts via SDL_TTF, which uses FreeType.

Same here. Started with bitmap fonts, now using SDL_TTF. I wrote a wrapper class for it which only creates a new surface either when the text changes or when the surfaces are lost (alt-tab). SDL is awesome. The only thing I haven't found in all the time that I've been using it is a nice GUI for it. So, I wrote my own. :) Other than that I use just about every single SDL library there is including SDL_Image, SDL_Mixer, SDL_TTF, and even SDL_GFX which provides functions for drawing primitives.

Oh by the way, does anyone here use SDL_TTF with OpenGL? More specifically, is there an easy way to convert an SDL surface to an OpenGL texture?

[BantamCityGames]

I'm still using bitmapped fonts... seems I'm reinventing the wheel a little slower than the rest ;)

[ggambett]

SDL is awesome. The only thing I haven't found in all the time that I've been using it is a nice GUI for it. So, I wrote my own. :)
Me too, but I'm considering using CeGUI (http://crayzedsgui.sourceforge.net). I didn't take a deep look at it, but apparently it's rendering-system independent, you just give the thingy the ability to blit images and it does the rest.

Oh by the way, does anyone here use SDL_TTF with OpenGL? More specifically, is there an easy way to convert an SDL surface to an OpenGL texture?
Yes, it's trivial. Make a SDL surface in 888 format, lock it, and pass it to glTexImage2D().

[svero]

Our fonts are basically 256 color alpha masks. We have a function that inits them like so...

TwFont fntScore;

fntScore.Init("0123456789"); // or whatever chars it has

and when the init is called the font class scans the image for pure black areas and uses that to chop it up into variable size grid squares. So to makea new font we just draw a black and white image. Then using it is just some standard text out at such n such spot on the screen calls. There's a few other small options to set colors, and add shadow on the fly and so on but that's mostly it.

[princec]

I render my fonts out ahead of time into luminance alpha textures using Java's extremely excellent antialiased font rendering engine (it's far, far, far superior to Freetype). While rendering I also note the glyph bounds, baselines, ascent, descent and advances, which do not actually correspond with the image bounds at all. The images are packed tightly into a Po2 texture.

Then I render every single glyph (there are over 2000 in Arial alone by the way - I cater for all languages) next to every other glyph in order to work out the kerning information, and serialize the lot in a simple serialized Java object. They compress down teeny small with LZMA.

To draw them I use straightforward GL_QUADs in immediate mode.

Cas :)

[Sergey Komar]

I love FTGL:

FTGL is a free open source library to enable developers to use arbitrary
fonts in their OpenGL (www.opengl.org) applications.
Unlike other OpenGL font libraries FTGL uses standard font file formats
so doesn't need a preprocessing step to convert the high quality font data
into a lesser quality, proprietary format.
FTGL uses the Freetype (www.freetype.org) font library to open and 'decode'
the fonts. It then takes that output and stores it in a format most efficient
for OpenGL rendering.

Rendering modes supported are
- Bit maps
- Antialiased Pix maps
- Texture maps
- Outlines
- Polygon meshes
- Extruded polygon meshes

FTGL is designed to be used in commercial quality software. It has been
written with performance, robustness and simplicity in mind.

USAGE:

FTGLPixmapFont font( "Fonts:Arial");

font.FaceSize( 72);

font.render( "Hello World!");


google for it....

[Sergey Komar]

You may also use this great free GUI: http://glgooey.sourceforge.net/ and use its font class. The library is really fast, uses XML layouts but requires openGL 1.2 (not an issue though). Check it out!

[ggambett]

You may also use this great free GUI: http://glgooey.sourceforge.net/ and use its font class. The library is really fast, uses XML layouts but requires openGL 1.2 (not an issue though). Check it out!
Looks really good... too bad it's OpenGL-specific. However, since it probably just draws textured quads, it should be possible to make it renderer-independent and use anywhere, as CeGUI which I mentioned above. IMO, decoupling the UI logic / event handling / drawing from the actual rendering is the Right Thing (TM).

[Valen]

Me too, but I'm considering using CeGUI (http://crayzedsgui.sourceforge.net). I didn't take a deep look at it, but apparently it's rendering-system independent, you just give the thingy the ability to blit images and it does the rest.

I pretty much have everything I need at this point. The only advanced things I can think of that I don't have are combo box and multi-line text edit (though I do have alignable static multi-line text). You can see what it looks like here (http://www.valengames.com/temp/gui.jpg).



Yes, it's trivial. Make a SDL surface in 888 format, lock it, and pass it to glTexImage2D().

Cool, then I might eventually add OpenGL as a renderer to my engine. Would be especially good for MAC users.

[stan]

Hm, as I'm using OpenGL I wrote a tool (http://www.guru-meditation.net/images/picoftheweek/Font_Maker_03-Nov-02.png) to convert a TTF into a texture which is saved as a white PNG with the characters in the alpha layer, and store characters size etc. in another file. And I render them with QUADS in immediate mode, too.

Only ISO-8859-1 is supported. Japanese support will have to wait ;).

[luggage]

To the folks using TrueType fonts, dont you find the fonts a little dull? How do you add bevels, edges, gradients, etc to them? We use Bitmap Font Builder ( http://www.lmnopc.com/bitmapfontbuilder/ ) to give us a basic image and then drop it into Photoshop to add any effects to the text. It also supplies the character size information for you although we drop the image into our own program that extracts the font characters exactly and puts them onto the smallest possible image using a best fit algorithm.

One thing I'm not sure of is this Font Spacing problem. Is this something to do with using TrueType fonts as we don't get that at all.

The only downside to our method that I can see is that the download size can be marginally bigger.

We also use another method where we need to so the Font_Load function specifies a directory. In there are seperate images for each character. The images are cropped as closely as possible so moving onto the next character is simple adding the image width. You can also add less or more depending on the spacing, so you can have letters overlapping.

With this method is there's a text file inside the dir called chars.txt it will load that otherwise it runs through the visible ascii set looking for files called A.png, !.png, _A.png (lowercase). And so on. If you only want a font that contains numbers you only include 0-9.bmp.

The chars.txt file creates some redirection, it's basically a list of characters and the image to use to represent those. So you could have A="this_is_a.png". This makes foreign language fonts, including ones such as Japanese, pretty easy to implement.

One of the other nice things with this system is that you can add a %SMILEY%="smiley.png". Anywhere you find %SMILEY% in a string you can display an image. Anyone who's done console style "Press X to continue" messages will know how handy this can be.

Anyway. Enough rambling. Was mainly just curious as to how using TrueType fonts is better.

scott

[ggambett]

To the folks using TrueType fonts, dont you find the fonts a little dull? How do you add bevels, edges, gradients, etc to them?
You're right. In fact we use TTF for the dull text, and bitmaps for the nice looking buttons :)

[princec]

Normally what one does in this situation is render out a TTF font and then apply effects to the glyphs before packing them into a texture.

Cas :)

[stan]

I add a gradient at runtime when drawing the chars with OpenGL. (just a different color for the top and bottom vertices.) And a shadow too.

Here is the result. (http://www.rototostudio.com/misc/20041125_eng_nagintro.jpg)

[Mike Wiering]

I just implemented text support for my program Game Studio. It generates a texture with all the needed characters squeezed together like this: http://www.wieringsoftware.nl/gs/flora.png