Home > iPhone, Useful > Convert a font to a bitmap and an array of rectangles

Convert a font to a bitmap and an array of rectangles

June 4th, 2009

Recently I’ve been working on adding text to my game. It turns out that you hit a few speedbumps when you attempt to add text output to your OpenGL game on the iPhone:

  • OpenGL ES does not have any support for rendering text. Bummer.
  • If you use Core Graphics or Cocoa Touch to draw your text over the top of an OpenGL view, your performance goes down the tubes.
  • If you resort to using Core Graphics, you can only use the inbuilt iPhone fonts. At the time of writing there does not appear to be any easy way for a developer to install new fonts, or even use a font file included in the app’s bundle.

As far as I was concerned, the only respectable approach for a game was to use OpenGL to render the text. The standard approach is to put all the characters from the font into a texture, then render each character of your text as a textured quad. To do this you need to know the rectangle that each character occupies within the texture. If you had an array of these rectangles, you could compute the offset into the array using the ASCII code of the character itself and easily write a little function to draw a text string,  using the rectangle widths to proportionally-space the characters.

I found a funky free font at dafont.com then started searching for a tool that would produce the texture image and rectangles automatically. There are lots of ad hoc solutions out there but nothing fit the bill exactly.

I wanted my font in a standard bitmapped image format so I could post-process it in Photoshop for gradients, drop-shadows and other effects. This meant that I needed to be able to add user-definable padding space around each character. I also wanted to be able to copy-paste the font characters into the same texture as my other game elements, so my game could avoid a texture-swap operation. And naturally I wanted each character’s bounding rectangle in a form I could easily paste into my Objective C code.

I ended up writing a Windows utility called Font Scraper. It lets you choose a font on your system and produces two files – a nice anti-aliased PNG containing characters in a colour of your choice over a transparent background, and a text file containing the rectangles which is suitable for pasting into a statically-initialized array in C, C++, C# or Objective C. The actual source code that makes use of these resources is left up to you!

Here’s a sample of a suitably game-like font, processed with Font Scraper then tweaked in Photoshop.

I’m aware that proper kerning requires more information than just the bounding rectangle of each character, but I think that’s getting overly complicated for game use. If you need the best-possible rendering, then look at FreeType instead. The rectangles produced by Font Scraper let you display simple proportionally-spaced type in your game.

When you display the string, your code may need to use an appropriate tracking value to increase or decrease the space between characters. For example, if you use an italic or script-like font or you add padding, you will need to reduce your character spacing so that they overlap. Otherwise the characters will appear too far apart.

Unfortunately Font Scraper is for Microsoft Windows only, which I acknowledge might be frustrating when you consider that all iPhone developers have Macs. But I’m a Windows developer and my interest in programming for Apple platforms currently extends only to the iPhone, so now might be the time to check out Bootcamp!

Please leave any comments specific to Font Scraper itself on the Font Scraper download page.

Categories: iPhone, Useful
  1. October 30th, 2009 at 15:16 | #1

    This tool is really great. Thank you.
    But I need some addition :)
    In my computer I have turkish fonts. This tool doesn’t give me fonts other than the english alphabet. How can I extend it?

  2. Sel
    October 31st, 2009 at 22:38 | #2

    I’m guessing that you can select your Turkish font and generate the PNG file, but it does not contain all the characters that you require. If this is the case, it may be because the default setting for “ASCII Character Range” is 32 to 127, and the special Turkish characters are somewhere in the range 128 to 255. Try entering 255 instead of 127 for the top end of the range. Let me know how you go, or if I have not understood your problem correctly. Regards, Selwyn.

  3. November 5th, 2009 at 00:05 | #3

    Sorry that I couldn’t realize that there is ascii range in your application. Yes, 3 of the special Turkish characters are after 127. But 3 of the very special characters are out of the range 0-255 (?, ?, ?).
    Anyway, I will try to manually add them to the png file by modifying similar chars. Thanks for this great application.

Comments are closed.