blog

Creating a font

While developing Super Jump Golf I have been playing around with some of the existing games developers have produced using Cocos2D. One of the features that consistently stick out on my mind when playing most of the games is the difference a unique font can bring to the game.

Using bitmap fonts can also potentially improve load times over true type font, since the bitmap images won’t have to be generated at runtime.

Cocos2D supports bitmap fonts in in the form of a .fnt file and a bitmap font atlas. There are free tools avalible, such as Heiro (OSX) and BMFont (Windows), which will create these files for you, but will require the true type font (.ttf) to be previously installed on your system. Once you have created the true type font you can always use it later for promotion material for the game. So how do you create a True Type Font?

One option is to use Inkscape, an open source vector graphics program. Inkscape can simply import your bitmap images, trace the bitmap to make a vector (saleable) image and assign the selected graphic to a desired character. One of the downsides of the new SVG font editor however is that there isn’t currently any way to create fonts which aren’t fixed spaced. If you’re intending to create a mono-spaced font then this is by far the easiest solution to creating a font. You can find a tutorial on creating a webdings font using inkspace here.

The next option, and the option I ended up choosing is to create a font using a program such as Font creator. Font creator provides a simple interface and editor to allow you to change the spacing between each character.

While the process can be quite time consuming, it can be significantly reduced by first creating a vector image trace using Inkscape and importing the postscript (.eps) file into Font Creator (the bitmap image tracer that comes with Font Creator didn’t work too nicely with my character set).

fontImage

Once you have saved and installed the font, just load up Heiro or BMFont and you should be good to go. Another bonus of creating a TTF file is that you won’t have to resize your bitmap image for each size font that you need for your game, since the TTF can simply resized and a new font file generated.

fonttest