The goal of this post is to demonstrate how to generate a bitmap font in a PNG file with a PLIST xml descriptor file for use in Cocos2d-x programs. I’ll describe a no-cost method suitable for a beginning or hobby game programmer but useful across the spectrum. My system is an Ubuntu/linux system and the tools I’ll use are Gimp, Image-Magick and the free version of TexturePacker
- Gimp (download, documentation)
- Image-Magick (download, documentation)
- TexturePacker (download, documentation)
Gimp is a powerfull image editor much like Photoshop (perhaps with a little less chrome — but very usable). The second package that you need is Image-Magick. Image-Magick has a utility that will allow us to carve the letter images out of a very long image. The last program TexturePacker has a free version that will create a sprite-sheet with all the characters and a related PLIST file that will tell cocos2d-x how to extract each letter from the sprite-sheet. Once you’ve gotten these programs installed we can continue.
Font:
Next you will require a font. You can just use a system font to experiment with but if you want something fancier then you’ll have to look around. If you Google “Free Font” you get lots of sites giving these away. Just be careful to check out the license if you plan to publish your game or use the font in a commercial setting. Install the new fonts on your system so they can be used by Gimp. Here are a sample of “free font” sites:
There are two methods to produce a fancy bitmap font using Gimp. The first is using the built-in generator, the second is to use Gimp’s powerful image manipulation functions manually to produce exactly what we are looking for.
Method 1:
Lets experiment. Start up Gimp and click on MENU/File/Create/Logos pick one of the types from the list: 3D Outline, Alien Glow, Alien Neon, Basic II, Basic I, …, Textured. Select a logo type that has a uniform background colour because we will be removing this later and the program needs a uniform colour to determine where the letter breaks are. Type in a string in the Text field, set the Font and Font size to suit your needs and adjust any of the other parameters you desire. Then press the OK button.
Here are some examples with the Text field and font size (50) changed:
This will produce an image with a fixed string in the font you want with the characteristics you want. You will need to use a selection that produces characters with a background that is completely uniform (which we will cut out of our image later).
Creating Image String:
To produce a bitmap font we will need to produce individual letters for all the letters we want to use in our program. It is probably a good idea to produce the entire ASCII printable set then you won’t have to worry about changing requirements for your program. However, I’ll just use the capital letters (with a space between each) to illustrate:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Now create your font image with that string. Note that the Image-Magick convert program I’ll use later on uses the uniform background colour to determine where to cut the image so if your font image has glow around it or a drop-shadow you may have to space your letters more than one space-character apart.
We generate a horizontal string of characters for two reasons. First it makes splitting them apart easier and second it allows us to uniformly apply image effects that change the characters from top to bottom (for instance a gradient). In another article about producing Gold colored letters this will be important.
What you should look for here is a vertical line of uniform background colour between all the letters — the software will use this to separate the letters. Don’t worry about getting too much blank space between your characters — this will be removed later automatically.
Prepairing Image String:
Still in Gimp we need to do four things: add a transparency layer, subtract the background, resize the image and save everything. First adjust the size of the image using your mouse roller or changing the percentage on the bottom left of the window.
To subtract the background we first have to flatten the image (it may have multiple layers): MENU/Image/Flatten Image, then we have to add a transparency channel to the image: MENU/Layer/Transparency/Add Alpha Channel. If you already have an alpha channel this option will be greyed out.
Next subtract the background by choosing the “Select by Color” tool from the toolbox. You may want to modify the behavior of this tool in the Tool Options (select Feather Edges and adjust the radius and adjust the threshold for the color selector). Then use Ctrl-X (cut) to subtract the background (you should then see the transparency checkerboard between all the characters). If you want to adjust your choices then just backout the cut and selection with a couple of Ctrl-Z’s.
When you are happy with the background subtraction we should add a boundary around the image (to make sure there transparent pixels on all sides) by increasing the canvas size: MENU/Image/Canvas Size… , increase the width and height by about 20 pixels and Center the image, and press the Resize button.
Now just save your project (Ctrl-S) and export the image to a PNG file (Ctrl-E).
Method 2:
In this method I’ll do the work that was done in Method 1 but do it manually which will give much more control over creating the font. There are many formulas for creating decorated fonts on the web but I’ll go over one on producing gold lettering which I’ve used for my own projects.
Next:
OK, now that we’ve created a image of our entire alphabet we need to split it apart into individual letters. Or, to see how to produce a gold Bit-Mapped Font go here.