Displaying Text

Displaying text is easy. The class SPTextField should be quite self explanatory. By default, it uses the system fonts of the iPhone.

SPTextField *textField = [SPTextField textFieldWithWidth:145 height:80 text:@"Text"
    fontName:@"Helvetica" fontSize:12.0f color:0xff0000];
textField.hAlign = SPHAlignRight;  // horizontal alignment
textField.vAlign = SPVAlignBottom; // vertical alignment
textField.border = YES;

System Fonts

Here is a list of fonts that are installed per default on any iOS version:

The default iOS fonts

NOTE: As of iOS 3.2 you can include custom fonts with your project by including the UIAppFonts key (an array of strings with the FULL filename including the extension) in your Info.plist as noted here.

Using system fonts like this is adequate for text that does not change very often. However, if your textfield constantly changes its contents, or if you want to display a fancy font that's not available on the iPhone, you should use a bitmap font instead.

Bitmap Fonts

A bitmap font is a texture containing all the characters you want to display. The positions of the characters are defined in an XML document. This is all Sparrow needs to render a text. To create the necessary files, there are several options:

  • There is a great tool provided by the folks from AngelCode that lets you create a bitmap font out of any TrueType font you can imagine: Bitmap Font Generator. It is, however, only available for Windows.
  • On OS X, we recommend Glyph Designer – an excellent tool that allows you to add special effects to your fonts, as well.
  • Finally, there is a Java program called Hiero that does that job, too (it does not, however, reach the quality of the previous tools). As it does not create XML output, you have to convert its output files before using them in Sparrow. A blog article has more details on this.

Whatever tool you choose: after loading a font in that tool, export the font data as an XML file, and the texture in PNG format with white characters on a transparent background (32 bit). The result is a “.fnt” file and an associated image containing the characters.

To use the bitmap font, just register it at SPTextField:

NSString *bmpFontName = [SPTextField registerBitmapFontFromFile:@"bmp_font.fnt"];

This method returns the name of the font as defined in the fnt-file (in the “face” attribute). Now you can use the font just like any system font.

textField.fontName = bmpFontName;

That's all you need to do!

By the way: you can add the font PNG to your texture atlas, as well. Just use the following method for registering the font:

NSString *bmpFontName = [SPTextField registerBitmapFontFromFile:@"bmp_font.fnt"
    texture:[myAtlas textureByName:@"bmp_font"]];

That way, you save texture space and speed up the rendering.

Next section: Animation

  manual_v1/displaying_text.txt · Last modified: 2013/03/05 10:19 (external edit)
Powered by DokuWiki