Tutorial: Bitmap Fonts with Hiero: Tips for using CCBitmapFontAtlas
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!
Here are a few handy tips which may not be immediately obvious when using a CCBitmapFontAtlas.
Colorizing (tinting) bitmap fonts
You can use the label's color property to change the font color of a bitmap font, like so:
label.color = ccRED;
This works best with a font which has white characters and no other colors. See the screenshot above, simply choose white as color. Of course you can tint bitmap fonts of any color, even with gradients, but the best results are achieved when using a white font color.
Scaling a bitmap font label
You can also scale a CCBitmapFontAtlas label by using the scale property as follows:
label.scale = 2.25f;
The problem with scaling bitmap fonts is that they tend to get blurry when you scale them up, losing details. See the screenshot above, both fonts are magnified to better see the effect. The larger font in the background was scaled up 2.2 times whereas the smaller font is not scaled at all. Notice how the font in the original size looks sharper, crisper while the scaled up version looks a bit blurry.
If you scale a bitmap font label down it can create some aliasing effects and it depends on your font whether this is noticeable or not. For example, bitmap fonts using a gradient or outlines won't look too good when scaled down either. But scaling down will generally work better than scaling up. However, scaling in any direction is a costly operation (although moreso when scaling up) and should be avoided whenever possible.
Once again this decision boils down to conserving memory or conserving runtime performance. If you create several variations of your bitmap font in the various sizes that you'll need it, you'll waste memory since each size variation of the bitmap font uses its own texture atlas. On the other hand if you just use one bitmap font size and use the scale property, you'll lose image quality of the letters and performance due to the scaling operations.
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