Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I know that many games are using bitmap fonts. Which are the advantages for vector-based font rendering / manipulation when compared to bitmap fonts and in which scenarios would they matter the most?

Prefer a focus on 2d games when answering this question.

If relevant, please include examples for games using either approach.

EDIT: Please also include your personal preference if you have experience with the matter.

Some factors you might consider:

  • amount of text used in the game
  • scaling of text
  • overlaying glyphs and anti-aliasing
  • general rendering quality
  • font colors and styling
  • user interface requirements
  • localisation / unicode
  • text wrapping and formatting
  • cross-platform deployment
  • 2d vs 3d

Background:

I am developing a simple falling blocks game in 2d, targeted for pc. I would like to add text labels for level, score, and menu buttons. I am using SFML which uses FreeType internally, so vector-based features are easily available for my project.

In my view, font sizes in simple games often don't vary, and bitmap fonts should be easier for cross-platform concerns (font-formats and font rendering quality). But I am unsure if I am missing some important points here, especially since I want to polish the looks of the final game.

share|improve this question
2  
Important note: SFML uses FreeType to load fonts, but then it pre-renders to texture, so the actual rendering is done with a bitmap font. This gives you a mix of the pros and cons of both styles. –  jv42 Jun 11 '12 at 15:52
1  
@jv42: Mostly, it gives you the cons. –  user744 Jun 11 '12 at 18:50
1  
possible duplicate of How to handle font loading? –  user744 Jun 11 '12 at 18:51
1  
@JoeWreschnig well yes, except for rendering speed and time needed to get going. –  jv42 Jun 12 '12 at 14:16
    
All the pro games I've worked on used generated bitmaps though, either because that was the only available technique or so that the graphic artist could tweak them mostly. –  jv42 Jun 12 '12 at 14:21

2 Answers 2

up vote 6 down vote accepted

Bitmap fonts

Advantages:

  • Can be integrated into any existing codebase, whether it's OpenGL, DirectX, DirectDraw or even GDI+.

  • Fast. Using a texture atlas, you can render all your text in a single pass.

  • Artist-controlled. Texture atlases can be procedurally generated (rendering a font style to a texture) or they can be loaded from a file. Artists can then tweak the look of any glyph without breaking the game.

Disadvantages:

  • Only useful for static text. When you're working with animated text (popping up, rotating, scaling, etc.), it becomes a pain to manage all the different font styles.

  • Memory hog. If you want Arial 12, 16 and 24 in bold, italic or both, that becomes 3 (sizes) * 3 (styles) = 9 texture maps. Add another font and you have 18 different texture maps. Add support for Unicode and you're looking at 1024x1024 textures for each size! Mostly a problem on mobile platforms.

Vector-based fonts

EDIT: I didn't make this very clear, but a common implementation for vector-based fonts is to render them to a texture atlas and use them like a bitmap, which gives you the same speed advantage as a bitmap font.

Advantages:

  • Manipulated easily. Because you're rasterizing between control points on the glyph, you can distort those control points any way you please. Very flexible for artists.

Disadvantages:

  • Slow. When accounting for transformations, that means you have to transform each control point and rasterize a set of triangles for them.

  • Hard to implement. Rasterizing glyphs is difficult to get right.

How do other people do this?

Take a look at this page:

http://www.microsoft.com/typography/OTSPEC/TTCH01.htm

This is how Microsoft solved it for Windows 95 and upwards. Basically:

  • A font designer supplies an outline (vector-based)
  • For every point size (8, 10, 12, etc.) a set of grid-fitting instructions is added

Which gives you the advantage of vector-based fonts (manipulated easy) combined with the speed of bitmaps.

Finally, you might want to take a look at a third option:

http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

share|improve this answer
1  
Crap this was everything I was just typing up as well and more, than the dreaded 'one new answer' pop-up appeared and this great answer appeared...! :) –  Roy T. Jun 11 '12 at 9:14
    
Today you, tomorrow me. ;) –  knight666 Jun 11 '12 at 9:20
2  
The "grid-fitting instructions" (usually referred to as "hinting") is one of the things that make vector fonts slow to render. They improve display quality at further performance expense. –  user744 Jun 11 '12 at 13:24
1  
"Rendering to texture is an optimization." - Realistically today, to render anything you need to render it to a texture first. I'm not aware of any decent TrueType font renderers that interoperate with OpenGL without rendering to a texture first. (i.e. they'd feed control points into the vertex shader and let the fragment shader hander the rasterizing and hinting.) There is some interesting work in letting the vertex and fragment shaders handle the splines (not TT-compatible) themselves but it's not common and fairly advanced. –  user744 Jun 11 '12 at 18:49
2  
What I did is described in my answer to the question this is a duplicate of. (And when I say "did" I mean "you can go into a store and buy the game that is doing this", not "I read it in a book once".) –  user744 Jun 12 '12 at 10:18

The advantage of using Vector/True Type Fonts over Bitmap fonts is the greater deal of flexibility inside the application: you can draw them at any size, italize them, bold them, add some fancy transformation effects, all with maximum quality.

There are many many professional Vector Fonts out there, many of them have thousands of glyphs and many metadata for each, making it very profitable for dealing with displaying non-ascii strings, useful for translations.

The difference in performance will only show during the font loading given you cache the glyphs correctly. (The SFML render code isn't optimized at all, the glyph loading and caching is done properly however.)

FreeType has its own rasterizer and font loader and doesn't use the system ones, so quality and font formats won't be a problem.

share|improve this answer
    
I can see your point about flexibility. But I imagine there might be differences in font rendering on different platforms making it hard to achieve exact dimensions across platforms. With bitmap fonts you know the font will look exactly the same and always occupy the same amount of pixels. –  jmp97 Jun 12 '12 at 9:49
    
No, Freetype is the same on all platforms and devices, if you use the same font and the same size you will get the same results. You have the same kind of reliability. –  API-Beast Jun 12 '12 at 10:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.