UPDATE:
It’s been 2 years, and I am using Cocos2d again, and I discovered that the old Hiero binary seems to be buggy in OSX Lion, anyway, found a newer build : http://www.cocos2d-iphone.org/forum/topic/220/page/2#post-145909.
—-
A very short tutorial.
I’m reading Cocos2D for iPhone Beginner’s Guide, and I’m reading Chapter 4 right now, called Pasting Labels, because I’m working on my game’s HUD. According to the book, there are three ways for displaying text in Cocos2D, first is CCLabel (which according to the author, is not very efficient, also it only supports the iOS fonts, which are Arial, Helvetica… which are not very much), and then there’s CCLabelAtlas (which is getting the characters from an image, you can do a lot of fancy effects using this, but the fonts has to be fixed width), and then there’s option number 3, which is CCBitmapFontAtlas.
The book introduced the Hiero Bitmap Font Tool for making CCBitmapFontAtlas (download link: http://slick.cokeandcode.com/demos/hiero.jnlp). So basically, I just followed the instructions in the book: download the software, run the software…
The book gave examples on how to use the Effects in Hiero, but I don’t find it sufficient, so I’m going to leave it plain, but I will add a bit of padding on the side (3, 3, 3, 3).
Go to File-> Save BMP font files…
It will save a .fnt and a .png. For some odd reason my .pngs are always inverted, so I open it in Photoshop…
I added the background, so you can see my text clearer. See, it’s inverted, so I just go to Image-> Image Rotation-> Flip Canvas Vertical.
The next step is double click on the Layer of the text or go to Layer-> Layer Style-> …
And add some fancy layer effects to your text. I only added Drop Shadow, but you can all sorts of fancy stuff, like Outer Glow, Bevel…
And then your text will look like this:
Save your file.
Drag the edited .png file and the .fnt file to your XCode project.
Some code for the CCBitmapFontAtlas:
CCBitmapFontAtlas * lblHighScoreTitle = [CCBitmapFontAtlas bitmapFontAtlasWithString:@”HIGH SCORE: ” fntFile:@”helveticaCY.fnt”];
And voila! You’re good to go!
Michelle Chen 