Search my cocos2d for iPhone FAQs & Tutorials

• Note: please do not share direct download links to PDF files, the download links expire after a couple minutes!

I'll talk about each view seperately since Hiero's User Interface uses the "all-in-one" approach which can be a little overwhelming at first. But once you get past that you can be very productive with it.

Download Lesson PDF

Hiero's User Interface

This is the whole Hiero window after you start it. I made it even smaller to not have to scale the screenshot down too much. In general the very first thing I do after starting Hiero is to increase its window size, highly recommended!

The Font view

Here you select which TrueType font to use as basis for your bitmap font. You can also choose to render the font bold or italic and adjust its size. You may have to experiment with the size to make your font fit your needs.

Using the File menu you are able to load additional TrueType fonts which are not installed in your system. It may come in handy when you've downloaded a .ttf file from the web, you can load it right there.

The Sample Text view

This is where you can see and edit the characters used by the bitmap font you're creating. By clicking the ASCII and NEHE buttons you can load presets of characters. Normally you don't want the full ASCII character set, so NEHE is fine and the default setting. NEHE refers to the 95 printable ASCII characters as shown in the Wikipedia page about ASCII.

The Sample Text view: enter a character subset

You can also enter a subset of characters into the Sample Text box. If you know you only need certain characters you can reduce the memory consumption of the bitmap font. In this case I only selected uppercase characters and digits.

The Sample Text view: reset cache to use character subset

Note: if you change the characters in the Sample Text box you'll have to change the Rendering display to Glyph cache and click the Reset Cache button. Otherwise the bitmap font will still have the previous Sample Text characters in the font.

The Effects view

You can choose to apply several effects to the bitmap font. Note that you can only add each effect once, and Color and Gradient effects are mutually exclusive. You can add both but only the one added later will have any effect.

The Effects view: active effects list

Below the available Effects are the effects currently in use. Effects are run in the order they appear in this list. It makes a difference whether you have Color, then Shadow or Shadow first, then Color. Unfortunately there is no way to re-order effects other than removing and re-adding them in a new order.

You can change each effect's parameters by clicking on the numbers or colors. Some dialogs will give you useful hints, such as to increase padding appropriately.

Click the X button to remove an effect from the active effects list.

The Effects view: changing effect properties

This is one of the dialogs which appears when editing effect parameters. Read the help text, they contain important tips.

The Padding view

Allows you to change the spacing (or padding) between individual characters in the image file. Change only when using certain effects, or when artifacts appear (characters overlap). Note that there is a bug causing bitmap fonts to be mostly artifacts, please check the troubleshooting section if your characters are a total mess.

Some effects add shadows or blur and make each character bigger than it is. To avoid these shadows or other artifacts to bleed into other characters you may have to adjust padding. This is a trial and error process. If you see artifacts in your bitmap font in your game, adjust the padding until all the artifacts disappear. Note that increasing padding will also increase the space each character needs.

The upper 4 number boxes allow you to adjust the space each character takes up. I recommend to adjust the two vertical and horizontal pairs equally, like in the image above, instead of using 0-4.

The lower 2 boxes labelled X and Y seem to have no effect.

The Rendering view

This is where Hiero displays the Bitmap font's characters with all effects applied. You can also change the background color. This is purely cosmetic, so that you can see any font properly.

The Sample Text view will display whatever text you enter into the Sample Text window. You can try out specific strings you are going to display in your game to see what it might look like.

The Rendering view: Glyph cache

By switching to the Glyph Cache view you can actually see which characters are used in your bitmap. Bitmap fonts use one or more Texture Atlas textures to store the characters (glyphs).

You can adjust the Page width and height settings to optimize the memory used by your bitmap font. Ideally you want all characters to fit just into the smallest possible Texture Atlas. Usually it's most effective to try to get all characters into just one Texture Atlas. In Hiero a Texture Atlas texture is called "Page". In the above image the number of Pages is 2. It may be possible to squeeze all characters into a 512x256 texture. If you choose a smaller font size try reducing the Page width and height one by one until the page size increases to 2. Then back up one step and use that image. Otherwise you might be wasting precious memory.

Remember that 1st and 2nd Generation iOS devices can only load textures which are no larger than 1024x1024 pixels. I hope you're never going to waste this much space with a single bitmap font anyway but I wanted to have mentioned it.

Finally, if you're in Glyph cache mode and change the Sample Text, then click Reset Cache to use the characters entered in Sample Text as the letters you want to use in your bitmap font.

Note that the characters may be randomly ordered. That is normal and nothing to be concerned about. Hiero is just trying to squeeze as many characters into the smallest space, and re-orders the letters in the process. They don't have to be in sequential order, the bitmap font will work perfectly fine this way.

File Menu

Notice that Hiero's File menu is in an unusual location. It's like a Windows application.

The Hiero settings file stores and loads all of the settings and parameters you can adjust in Hiero. You should save this to be able to later tweak your bitmap font without having to recreate it. The file extension is .hiero

Save BMFont files (text) will save your current settings as a bitmap font that cocos2d's CCBitmapFontAtlas class can load. The file extension is .fnt and accompanied by sequentially numbered .png files.

Exit is the only way to close Hiero, next to clicking on the red X icon. Usual Mac OS X Quit commands are ignored by Hiero.

Comments (0)