See the end of this article for the download link..
Update: 1.2 Is now available. It contains important bug fixes and support for drop shadows.
So Apple provides a number of fonts for use in your iPhone games and apps including:
- American Typewriter
- American Typewriter Condensed
- Arial
- Arial Rounded MT Bold
- Courier New
- Georgia
- Helvetica
- Marker Felt
- Times New Roman
- Trebuchet MS
- Verdana
- Zapfino
These are fine, but what if you want to use your own fonts in a game or application? There are a couple ways to do this (http://stackoverflow.com/questions/360751/can-i-embed-a-custom-font-in-an-iphone-application) – but I wasn’t entirely satisfied with these. To do this is somewhat tricky because you have to store the kerning (spacing) information as well as the bitmap for the font, and provide tools for slicing up sprite bitmaps directly on the iPhone. I took a day or so and wrote a tool to rip the windows font of your choice, and create a UIImage, which can then be converted easily to an OpenGL texture if needed. I call it EasyGlyph and the tool is free to use but devoid of any warranties.
First of all, there’s a Windows application that stitches together the font “sheet” image and calculates all the letter sizes and kerning. You start by generating a 32-bit (with Alpha) PNG graphic of the font using a font face, size, and color. You can of course size any font to whatever size you want once its on your iPhone, but depending on the situation you may want your font to have more or less bitmap detail (remember we’re converting it to a bitmap from a vector drawing). Here’s a screenshot of the tool:
Here’s what some Windows fonts look like rendered on the iPhone:
Mind the spaceships. They’re part of a game, and aren’t relevant to this article. Because of the kerning code, it can also handle complex overlapping fonts like this:
When you save a font to disk, you’ll get two files: a PNG file containing the bitmaps and a C document containing the class constructor along with all the coordinate and kerning information for the font:
myFont = [[EasyGlyph alloc] init]; [myFont initFont:@"chicdecay.png":@"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 1234567890.,-=+:;<>?!'\"[]@#$%^&*()/\\":@"0,0,69,115.937,37;79.783,0,71,115.937,37;157.421,0,71,115.937,36;236.569,0,67,115.937,37;318.129,0,62,115.937,37; ETC...
You’ll need this along with two classes: “EasyGlyph” and “CustomFontChar” which are included. To generate a bitmap of some text that uses the font, use the instance method writeTextToTexture, which returns a UIImage instance:
[myFont writeTextToTexture:@"Hello World!"]
To convert this to a Texture2D, for use in OpenGL applications, you can do something like this:
textTexture = [[[Texture2D alloc] initWithImage:[myFont writeTextToTexture:@"Hello World!"]] retain];
.. and you’re off to the races.
I’m looking for feedback, improvements, insults – whatever you got basically. Once again this is free to use – I only ask you provide some feedback if you got some use out of it. Enjoy!
