Archive for the ‘graphics’ Tag

Generation of high quality bitmap fonts

here is how to quickly and automatically generate bitmap fonts with an alpha channel, providing a perfect anti-aliasing on any background. Any vector font can be used and combined with an infinity of graphic effects.

The software that does 99% of the job is ImageMagick, a free, open-source image processing tool that I consider as a « GUI-less Photoshop » : as powerful as Adobe’s product, ImageMagick is used only from another program, or even from the shell. Install it urgently.

Below is the small batch file that creates a few files containing words including the font.png with the « font » text used in the image above :

@echo off
rem Function: Create transparent background, aliased texts from a list of words
rem Author: Philippe Guglielmetti
rem Requires: ImageMagick v.6 or later (
set texts=OK Abort Cancel font "This is Great !"
set params=-background none -font Bauhaus-93 -pointsize 72 -density 300 -fill blue -blur 0x5
for %%a in (%texts%) do convert.exe %params% label:%%a %%a.png
set texts=
set params=

« params » define the font to create:

  • -background none is mandatory to draw the font on a transparent background (alpha channel)
  • -font Bauhaus-93 defines the vector font to use (its name is sometimes not the same as the one displayed in Windows « Fonts » folder…)
  • -pointsize 72 -density 300 specifies the font should be 72pt high on a 300dpi device. The bitmap size will therefore be larger on screen, but it can be printed or used as a texture in a 3D game or a Demoniak3D demo with a perfect quality.
  • -fill blue -blur 0x5 are two basic effects : the symbol is filled with blue, and its contour (1 pixel of black by default) is slightly blured on 5 pixels. This creates semi-transparent pixels at the symbols borders, which enables a perfect superimposition whatever the background color, as shown on the zoom right:

To superimpose the text on a background texture for a quality check, another ImageMagick is called:

composite.exe -tile back.png -compose Dst_Over font.png test.jpg

Once the test passed, we can generate all the chars of the font. When only a few symbols are required, we could re-use the batch file above, definining for exemple

set texts=0 1 2 3 4 5 6 7 8 9

This can be cumbersome for a complete font, and for application programming reasons it might be useful to name the files by the ASCII code of each char. As this is not possible to code in Windows batch language, we have to code it in a real language such as LUA:

params="-background none -font Bauhaus-93 -pointsize 72 -density 300 -fill white -blur 0x5 "
for i=32,167 do
os.execute("convert.exe "..params.."label:"..string.char(i).." "..i..".png")

These 4 lines automatically generate 130 files of nice symbols ready to be loaded as textures in your game. Note that these files total about 10 Mb au total, more than ImageMagick. It might therefore be worth to consider including ImageMagick in your product and use it at insall time to generate the required fonts instead of creating a heavy distribution

Now, if the fonts above are a bit rough for you, have a look at  this page which will give you some idea of the possible effects, and explore this one for the full picture.