Tutorial: Bitmap Fonts with Hiero: What is a bitmap font?
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!
There are two prevalent types of fonts: truetype and bitmap fonts. Truetype fonts are a vector format which means that these fonts scale well from just one set of vector data, and anti-aliasing and other effects can be applied easily to improve readability or otherwise modify the font. The drawback of this approach is that rendering text using truetype fonts is relatively slow.
Bitmap fonts on the other hand have one concrete image, or a portion of a texture atlas, assigned to each letter used by the font. This makes the font's size fixed, it can scale up and down but not without loss of image quality. It also requires images for the letters to be in memory which naturally consume more memory than the vector data of Truetype fonts.
Advantages/Disadvantages
Wikipedia has sums it up nicely:
Advantages of bitmap fonts include:
- Extremely fast and simple to render
- Unscaled bitmap fonts always give exactly the same output
- Easier to create than other kinds.
The primary disadvantage of bitmap fonts is that the visual quality tends to be poor when scaled or otherwise transformed, compared to outline and stroke fonts, and providing many optimized and purpose-made sizes of the same font dramatically increases memory usage.
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