Tutorial: Bitmap Fonts with Hiero: Troubleshooting Hiero
Search my cocos2d for iPhone FAQs & Tutorials
Please note that the blog search in the upper right corner doesn’t search my FAQs and Tutorials.- Note: please do not share direct download links to PDF files, the download links expire after a couple minutes!
Hiero can be a nasty little thing. It has bugs and it behaves different in some aspects than a regular, native Mac OS X app. This troubleshooting section answers these questions. If you don't have any problems, just skip over it.
If you can't find the answer to your particular problem, please leave a comment describing your problem and I'll see what I can do to help.
Hiero is asking for security permissions
Yup, it does that. So far no one has noticed any bad behavior. If you don't trust the Hiero application your only option is to run it on a seperate, isolated, non-networked Mac computer and only transfer the .fnt and .png files. It's either that or not using Hiero at all.
If you ask me, I don't feel awfully good about it either. But I understand the problem and I'm willing to give it some trust. It costs money to get these certificates, and Apple knows the risk of running just any Java Webstart application on a computer unless it's signed with a certificate. So that's why there's a security warning.
Hiero won't start!
Download and save the hiero.jnlp file to your computer, preferably to your Applications folder. Just to avoid any oddities.
Then locate the file, right-click it and select Get Info.
In the Info dialog make sure it is set to "Open with:" the Java Web Start.app
If Java Web Start is not available or it still won't start, you may have to download and install the latest Java for Mac OS X Update. It should be available by choosing Software Update... from the Apple menu. If it's not, here's the download location for the Mac OS X 10.6 Java Update 2.
If it still won't start or crashes it'll be harder to figure out what's causing it. Please leave a comment and post your system details (Mac OS X version), what's happening when you start Hiero including any error message text that appears and what you've tried so far to resolve the problem. Note that I'm not the author of the Hiero program nor am I in contact with the author, I try to help but it's pretty limited what I can do about crashes.
Bitmap Font is a garbled mess or invisible
If the font's .png file looks something like the above picture with the letters mirrored and upside down, then that's the problem. Read the next step to learn how to fix this.
Bitmap Font .png file is flipped vertically (some say: upside-down)
I have no idea why Hiero sometimes creates those images. If you get such a result as the image in the above step, you'll have to fix the .png file manually until someone can figure out how to prevent this from happening.
If you have a suspicion why this is happening or even know how to circumvent it, please leave a comment!
The image file is flipped along the vertical axis. Use any image program (I use Seashore) to load the file, run the "flip vertically" (sometimes: "mirror vertically") function on it and re-save it.
Bitmap Font has weird pixel artifacts!
If your bitmap font shows slight artifacts like in the above magnified, brightness-enhanced screenshot, you have to increase Padding in Hiero and re-save the .fnt file.
In this case it should be sufficient to add padding of 1 pixel at the top and bottom.
Saved files are not overwritten / have no extension
Hiero has an ugly bug when trying to overwrite existing files. See the screenshot. Normally you'll just click on the existing file and trust the application to replace it. Not so with Hiero, which simply removes the file's extension. This is true for both .fnt and .hiero file formats.
To really replace the existing file you'll have to manually add the correct file extension .fnt or .hiero before saving. You've done it right when you're asked whether to replace the existing file.
Font is not rendered (invisible) in Hiero
If the Rendering view just contains a flat-colored space with no font in it, please check that the "Color" effect is in use. If it's not, add the Color effect.
In some cases it may also be a display bug. This can happen from time to time. Save your settings to a .hiero file and restart Hiero.
I can't get Hiero to open when double-clicking .hiero files
Yup, nothing you can do about it. It's not a native Mac OS X app, it just doesn't support this.
Hiero doesn't have a File menu!
Yes it does, just not where you expect it. It behaves like a Windows application and has its menu on the top-left corner of the application window.
Hiero won't quit/close!
Click the red x icon in the upper left corner of the application window. It behaves like a Windows application. Regular Quit commands are ignored.
Thanks for putting this together. At first I thought I was going crazy - I’ve been using Hiero for a few months now, and early on it worked fine. I’m not sure what happened, but now I am getting the upside-down images when before I wasn’t (what a pain). I’m also having a lot of trouble with the artifacts around the sides of letters - when I add 1 pixel padding, it worked but still had artifacts. When I add 2 pixel padding, for some reason all of the offsets are incorrect (instead of ‘S’ I get half of ‘R’), arggg…. This is something I can probably fix if I go through the file and look at the actual values for manual correction, but it makes it very difficult for quick tests. Please let us know if you learn any more about how to work around these issues
The mirror image issue is really strange. It too worked for me for the first few fonts, but then it started creating only mirror images. I have the feeling once the bug appears it’s going to stay. Maybe it might help to delete Hiero so that any saved settings are deleted, then redownload it to another location.
With the padding I recommend to pad equally, if you pad 1 pixel to the right you should also pad 1 pixel to the left. It’s more a hunch though, I got the feeling that padding both sides equally might be better than padding one side with 0 and the other with 2.
Your problem may require changing the X/Y offsets too. I’m not sure what they do and I didn’t see any noticeable effect.
[...] Tutorial: Bitmap Fonts with Hiero (tags: cocos2d iphone cocoatouch) [...]
Hello, Steffen.
Good tutorial, man. I got two questions about CCBitmapFontAtlas:
1. Is there another program or way to make bitmap font atlases? Hiero has some serious bugs.
2. Using cocos2d, I need to show damage points (numbers) over every enemy I hit. Should I create CCBitmapFontAtlas variables every time I hit an enemy or there is another way to achieve this?
Thanks for your time.
There’s a programm called BMFont that is also quite popular. I think it’s for Windows though.
You can update the string of a label (bitmap font or regular) by using the setString method: [label setString:@"new text"];
To solve the mirror image issue, open the .png file ->Tools->flip vertical
Now save this file and add it to the resource folder.
ALL THE BEST