Of Hiero and BMFonts

UPDATE: Well, seem like cocos2d had advanced further than I could google. Apparently by adding a .ttf into your project, you can just use CCLabel with that font. Changing font size with no issue.


I have decided to use CCLabelBMFont for some of the text in my little project. Main reason for doing so would be that CCLabel itself does not provide custom font types beyond what is available for the iOS. By using CCLabelBMFont, I can use almost any fonts that i can get my hands on. Only down side (for me at least) to it is that you will need different bitmaps of different font sizes to cater for… well, different font sizes that you wish to use in your game. Scaling the label using codes cause the bitmap font to look pretty bad and thus, it is better to generate various font sizes’ bitmaps.

Anyway, to create these bitmap fonts and their respective font definition files, I am using Hiero, a Bitmap font Tool. By finding any truetype fonts and using this tool, you can generate the required files for use with CCLabelBMFont in the cocos2d library. I will attempt to give a simple step by step of how to use this tool to generate the required files.

1. Download Hiero Here

2. Start it up (my system used Java Webstart by default)

3. Under the Font panel, select the font you wish to use

4. Select the size of the font you wish to generate a bitmap for

5. Select if its Bold or Italic (provided the font has the included font effects)

6. Under the Sample Text panel, select NEHE for the essential font characters

7. (Optional) Under the Effect panel, you may tweak around the kind of effect your font will be generated with

8. (Optional) Under the Padding panel, you may tweak each characters padding and the offsets. Some effects applied in step 7 may require you to add padding to prevent cropping of characters

9. Under the Rendering panel, select Glyph Cache

10. It is recommended for the entire bitmap for this font to be kept within one bitmap, so tweak the Page Height and Page Width until the Pages value shows “1”. Do not over provide the width and height as it will be wasteful to load a overly large image into memory when most part of the image is unused.

11. At the menu bar at the top, select File->Save Hiero Settings File (remember to  add the file extension of .hiero)

12. At the menu bar at the top, select File->Save BMFont Files (remember to  add the file extension of .fnt). This will generate a .fnt font definition file as well as the font image file in .png.

13. Add only the .fnt and .png into your cocos2d project.

14. you can initialize a CCLabelBMFont as such:

_lblPlayerCoin = [[CCLabelBMFont alloc] initWithString:@”COINS: ” fntFile:@”backlash16.fnt”];

If you are generating multiple sizes of the same font without adding or changing effects, you do not really need to repeat step 11.

NOTE: Hiero is actually pretty buggy, the following are 2 bugs that I had came across

– If you have generated the file once, and wish to generate the same font but with added effects, you might find that the files generated is of the last setting. In such case I suggest closing the tool and restart it to try.
– The font image generated may be vertically inverted. In such case, just vertical flip the image and save using any image editors. You do not need to modify the generated .fnt file.