Differences

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

Link to this comparison view

Next revision
Previous revision
tutorials:using_bitmap_fonts [2011/03/07 07:05] – created danieltutorials:using_bitmap_fonts [2013/03/05 10:19] (current) – external edit 127.0.0.1
Line 1: Line 1:
 +====== Using bitmap fonts ======
  
 +Almost any game will have to display some text sooner or later. Sparrow makes it easy to do so:
 +
 +<code objc>
 +SPTextField *textField = [SPTextField textFieldWithWidth:300 height:100 
 +                                      text:@"This is some text."];
 +textField.fontName = @"Georgia-Bold";
 +textField.fontSize = 18;
 +textField.hAlign = SPHAlignCenter; // horizontal alignment
 +textField.vAlign = SPVAlignCenter; // vertical alignment
 +</code>
 +
 +There are quite a number of different fonts already available on the iPhone. Click on the following image to get a bigger view of the fonts and their names.
 +
 +{{ :tutorials:iphone_fonts.png?640 |The default iOS fonts}}
 +
 +When you create a textfield in the way shown above, Sparrow asks Cocoa to render the text to a bitmap. The bitmap is then used as a texture, just like any other image. 
 +
 +Creating this texture is relatively fast, and once it is created, the textfield will be rendered very quickly --- it's just an image, after all. 
 +
 +However, there are times where this method is not perfect, e.g.:
 +
 +  * when you need different fonts than those installed on the iPhone, or fonts with fancy effects
 +  * when you need to change the text of a textfield very often, and constantly creating new textures turns out to be too slow
 +
 +That's what bitmap fonts are for. A bitmap font is very similar to a texture atlas (see <a href="2010/02/using-a-texture-atlas/">last article</a>), only that it contains characters instead of images. Here is how a bitmap font looks like:
 +
 +{{ :tutorials:bitmap_font_sample.png |A sample bitmap font}}
 +
 +In addition to a texture like this, there is also an XML-file that describes which character can be found at which position in the image, and other information. 
 +
 +To create a bitmap font, we recommend one of the following tools:
 +
 +  * [[http://www.angelcode.com/products/bmfont/|Bitmap Font Generator]] by AngelCode (Windows only, free)
 +  * [[http://slick.cokeandcode.com/|Hiero]] by CokeAndCode (free)
 +  * [[http://glyphdesigner.71squared.com/|Glyph Designer]] by 71squared (commercial)
 +  * [[http://www.bmglyph.com/|bmGlyph]] available in the [[http://itunes.apple.com/us/app/bmglyph/id490499048?l=fr&ls=1&mt=12|App Store]]
 + 
 +From the free options, AngelCode produces the better output, but it is only available in Windows. When you use it, export the font data in XML format, and the texture as a PNG-file with white characters on a transparent background (32 bit).
 + 
 +"Hiero" works in any operating system (it's a Java application), but does not create the XML format that Sparrow requires. So you need to convert its output before being able to use it in Sparrow. For this reason, we created another small Ruby script (''sparrow/util/hiero2sparrow'') that does the conversion for you. 
 +
 +Now, let's say you created your bitmap font --- that means you have 2 files: "myfont.fnt" and "myfont.png". Using this bitmap font is a little complicated. No, just kidding ;-). It could not be easier:
 +
 +<code objc>
 +[SPTextField registerBitmapFontFromFile:@"myfont.fnt"];
 +</code>
 +
 +That's it! When you register the bitmap font like this, you can use it just like any other font. Just set the "font"-property of a textfield to the name of the font (if you are unsure, find the "face"-attribute in the ".fnt"-file, or examine the NSString-object that is returned by the ''registerBitmapFontFromFile:''-method).
 +
 +For even more speed, you can add the font image to your texture atlas, as well. In that case, you have to register the font the following way:
 +
 +<code objc>
 +[SPTextField registerBitmapFontFromFile:@"myfont.fnt"
 +    texture:[myAtlas textureByName:@"myfont"]];
 +</code>
 +
 +That should be all you need to know about bitmap fonts!
 
 
Powered by DokuWiki