Bitmapped fonts optimized !

So you're writing a game - cool ! ... and you need text for "Score", "Bonus", "Time" etc.

This tutorial will show you how to use gorgeous Bitmapped fonts in your Game project.

It will show you step-by-step how to produce rich textured Fonts which add depth and appeal.

It improves PERFORMANCE... and simplifies WORKFLOW ...

... by combining multiple bitmapped font output files into a single image file and respective meta files.

A few simple steps... to go from True Type fonts to Bitmapped Fonts...

The single image loads faster and avoids needless texture re-binding when rendering.

- STEP 1 -

TrueType to Bitmapped

Convert from TrueType fonts to Bitmapped fonts - rasterized pixels which paint faster than computing curves real-time.

One of the first Apps for converting TrueType to Bitmapped is probably BMFont from AngelCode

There are many many Apps out there ... check out this thread on StackExchange

My favorite App has to be Glyph Designer from 71Squared

It offers loads of flexibility and control to produce great looking fonts - definitely check it out.

Another great feature of Glyph Designer is outline export shown here for use with Photoshop.

- STEP 2 -

Outline to Textured

Using the outline output from Glyph Designer - it's possible to cut-out fonts from rich textures.

Use the Magic Wand tool to select the outlines of the glyphs. Don't forget the centers of letters like "O" or "g" etc...

With the Rust texture layer selected, on Mac, use ⌘ J to "cut" out the Glyphs from the rust.

Add a few layer styles - outline, shadow etc ... and you have great looking rich textured fonts !

Convert from the Outline Font to Textured Font using Photoshop or your favorite paint program.

- STEP 3 -

Rinse and Repeat

You can use Photoshop^* to apply texture and layer effects to all your fonts.

The finished fonts look GREAT ! ... but there are 3 sheets, and each is pretty big.

... and look at all the WASTED space in each font sheet, 45%, 18% and 51% of the font textures are empty !

Hover over the images to see the Waste !

There is a FIX !!!

^* Photoshop / Sketch / Gimp ... or your own favorite !

- STEP 4 -

Glyph Combiner

Using GlyphCombiner you can save space and maximize FPS ...

The combined font sheet is much smaller.

This saves GPU memory and avoids glBindTexture() calls to swap between different fonts in the scene.

For even more savings - try the KEYWORDS mode ... (blog post to follow) !

Glyph Combiner

Bitmapped Font sheets - Optimized !!!

Download Demo Buy Now