Sunday, March 01, 2015

Bitmap Font Rendering

When dealing with small resolutions or tiny fonts, a well implemented bitmap font is nearly always going to be clearer than other types of text rendering.

DancingSquid, my little engine, includes ttf font rendering. The test program shows the font rendering below.

Non-Bitmap Font Rendering
When the font gets quite small there's a little blurring. This occurs because the font is a mesh and has to be scaled down to the desired size. Using this method, it's very hard to know how best to rasterize the font to fill the pixels perfectly. The advantage of this method is fonts can be scaled nicely and are very smooth at larger sizes. Also the DancingSquid implementation has nice things like kerning, unicode support etc, so you can type in Japanese and English and it's all fine.

On top of the DancingSquid engine I've written a small simple bitmap font renderer, to render fonts like those in 16-bit console games. All the fonts are monospace (no kerning) each glyph is a 8x8 pixel box. Because the pixels of the font align perfectly and the font is so tiny each pixel matters; it's much sharper.
Bitmap Font rendering
This bitmap font code is almost a drop in replacement for DancingSquids normal font rendering but it can't scale (though it wouldn't be too hard to add certain scale amounts x2, x4 etc but it'd get blurry / pixelated pretty fast. It would be better just to use a larger font).

If you've read the blog before you probably know I'm writing How to Make an RPG. This bitmap font rendering code won't be making it into the book (but will be freely available). I want to avoid too much low-level engine stuff. I'll update with an article, after the book release,  showing how the bitmap font rendering works and how to add it.


... beause these screenshots have been resized the difference might not be super apparent but clicking on the image should enlarge it!