This project renders fonts using OpenGL ES and the FreeType library. The
FreeType library uses font hinting, which makes the fonts look better than your average anti-aliased fonts. This project is primarily designed for the iPhone, however the code is portable and should work on other platforms.
In addition, this code is designed to be efficient. All fonts are bin packed into one texture and draw call batching is implemented.
The standard way to render text in OpenGL is to create a textured quad for each character. You could have a separate texture and quad for each character, but this is very wasteful, because OpenGL textures can only be power of 2 (i.e. 32x32, 64x32,etc) and means there will a lot of unnecessary padding. A better way to do it is to bin pack all the characters into one single texture - known as a texture atlas.
Characters bin packed into a 128x128 texture
Another advantage to having everything in the same texture is that it allows you to batch more OpenGL draw calls together. This reduces the workload of the GPU and increases performance.
Using the Code
The principle class is
FontAtlas. To prepare a font for use, you must first include the
TrueType font (i.e. the .ttf file) as a resource in your project. Then, you call
FontAtlas::AddFont with the file name of the font, the desired point size and a list of the characters that you need. You call this function for every font you need, then you call
FontAtlas class retrieves the size of each character from the
FreeType library, then it uses its bin packing algorithm to fit them into a OpenGL ES texture.
const char* szLetters = " !\"#&'()*,-./0123456789:;
m_pFontAtlas = new FontAtlas();
m_pFontAtlas->AddFont("arial.ttf", 12, szLetters);
m_pFontAtlas->AddFont("times.ttf", 18, szLetters);
m_pFontAtlas->AddFont("times.ttf", 16, szLetters);
You can then render
strings as follows:
FTBitmapFont* pArialFont = m_pFontAtlas->GetFTFont(ARIAL_IX);
pArialFont->DrawString(5, 0, "AV Arial font 12 point", BLACK);
This is the principle class. It creates the texture atlas and holds all the
FTBitmapFont objects. Each time you call
AddFont, a new
FTBitmapFont object is created.
FTBitmapFont holds a list of characters and kerning data from the
Strings can be rendered via the
GetWidth returns the width of a
string rendered in the given font.
For each glyph (i.e. character) in the font, there is a
FTBitmapChar. This class copies the glyph bitmap into the texture and calculates the texture co-ordinates and vertex dimensions of the character.
This class is responsible for batching the draw calls. Every time a
FTBitmapChar wants to draw itself, it calls
GLCallBatcher::AddQuad. Instead of drawing directly,
strings all the quads together in one array and only sends the mesh data to the GPU when
RenderCurr is called, or when there a state change is needed. A state change is required, for example, if you change the alpha value, or colour of the text. In this way, the number of draw calls are reduced.
This class is used to implement the bin packing algorithm used to create the texture atlas. This is the algorithm in more detail.
You can enable kerning by setting the
useKerning flag before the atlas is created:
Personally, I don't think kerning is worth the performance hit, as you hardly notice the difference in quality.
Compiling FreeType on XCode
FreeType source is included in the project in the directory OpenGLFont\Classes\freetype-2.4.3.
Freetype should really be built as a standalone library, but I didn't have time to do that (exercise left to reader ). I followed the instructions, detailed in
INSTALL.ANY in the
FreeType documentation. Removing all the bits that I didn't need flattened the directory structure, and disabled the modules that weren't used.
Building the Project
You need to download Boost and unzip it somewhere on your drive. Then set the include paths in xcode to point to the Boost include directory. Also, while you are in there, fix the path for
FreeType (i.e. OpenGLFont/Classes/freetype-2.4.3/include/).
When rendered on a PC, the quality of the
FreeType font is quite good, but not quite as good as in other applications (OpenOffice for instance). However, on the iPhone itself, it's a lot better - possibly because of the pixel density of the screen.
- Version 1
- Version 1.01
- Fixed bugs: handling character codes > 128
- Ignore characters that don't exist in font
- Smarter memory handling