Differences

This shows you the differences between two versions of the page.

Link to this comparison view

manual_v1:displaying_text [2013/03/05 10:19] (current)
Line 1: Line 1:
 +====== Displaying Text ======
  
 +Displaying text is easy. The class SPTextField should be quite self explanatory. By default, it uses the system fonts of the iPhone.
 +
 +<code objc>
 +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;
 +</​code>​
 +
 +===== System Fonts =====
 +
 +Here is a list of fonts that are installed per default on any iOS version:
 +
 +{{ :​tutorials:​iphone_fonts.png?​640 |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 [[https://​developer.apple.com/​library/​ios/#​releasenotes/​General/​WhatsNewIniPhoneOS/​Articles/​iPhoneOS3_2.html|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: [[http://​www.angelcode.com/​products/​bmfont/​|Bitmap Font Generator]]. It is, however, only available for Windows.
 +  * On OS X, we recommend [[http://​glyphdesigner.71squared.com|Glyph Designer]] -- an excellent tool that allows you to add special effects to your fonts, as well.
 +  * Finally, there is a Java program called [[http://​slick.cokeandcode.com/​|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 [[http://​www.sparrow-framework.org/​2010/​02/​using-bitmap-fonts|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:​
 +
 +<code objc>
 +NSString *bmpFontName = [SPTextField registerBitmapFontFromFile:​@"​bmp_font.fnt"​];​
 +</​code>​
 +
 +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.
 +
 +<code objc>
 +textField.fontName = bmpFontName;​
 +</​code>​
 +
 +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:
 +
 +<code objc>
 +NSString *bmpFontName = [SPTextField registerBitmapFontFromFile:​@"​bmp_font.fnt"​
 +    texture:​[myAtlas textureByName:​@"​bmp_font"​]];​
 +</​code>​
 +
 +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