Using Glyph Designer with Corona SDK

[Mike]

Glyph Designer fonts in the Corona simulator

A number of popular game development frameworks support the BMFont format for describing Bitmap Fonts. This is the output used by Glyph Designer and it provides two files, a control file with the .fnt extension and an image file with the .png extension.

The image file is a sprite sheet of all the characters you have included in your bitmap font inside Glyph Designer and the control file contains information on where in the sprite sheet each character can be found, along with information about the fonts metrics so that the characters can be rendered in the correct positions.

While other frameworks have built in support for these bitmap fonts that doesn't currently exist within Corona. For this reason the community has created a lua module that allows the output of Glyph Designer to be used within Corona.

I don't know the name of the original author unfortunately but there is a thread on the Corona community forums that contains a lot of the history and discussions around the module

http://forums.coronalabs.com/topic/4525-bitmap-font

To make things easier for our Corona users we have searched out the latest version of this module which is being hosted on GitHub and using the latest version of the SDK created a very simple example app.

This version of bmf.lua is compatible with Corona Graphics 2.0 which is important if you want to use the latest version of the SDK. It still uses the deprecated Sprite.lua module but this seems to work fine with the latest SDK.

Once you have create a font within Glyph Designer it should be exported in the BMFont Text format with the .fnt extension. The two files that are generated should then be copied into your projects resource folder.
Once there you can then start to add the bmf.lua module and add the font to your app. The code below is from the main.lua file in the example project on this page.

-- Load the bmf module. This version of the module was taken from Git Hub
-- by Tomek Cejner. The original community thread that created this module
-- can be found at http://forums.coronalabs.com/topic/4525-bitmap-font/
-- I'm not sure who the original author is unfortunately
local bmf = require('bmf')

-- Provide the name of the font control file generated by Glyph Designer
local bmflabel = bmf.loadFont('glowText.fnt')

-- Create a new string using the font just created and setting the string
-- the Original Size and New Size
local string1 = bmf.newString(bmflabel, 'Hello\nWorld!', 64, 64)

-- Align the text based on the center of the string passed back
string1.align = 'center'

-- Set the position you want the string drawn
string1.x = 160; string1.y = 350

-- Add the second font
local retroFont = bmf.loadFont('retroFont.fnt')
local string2 = bmf.newString(retroFont, 'Corona\nBitmap\nFonts', 64, 64)
string2.align = 'center'
string2.x = 160; string2.y = 100

As you can see from the code above there isn't much to getting the font loaded and usable inside our Corona project.

All that's left is for you to crack open Glyph Designer and to start designing awesome looking fonts for your game.

NOTE: This solution does not support unicode characters. The bmf.lua module searches through the string to be created using the built in lua string functions and these do not support unicode, only single byte characters.

HelloWorldExampleProject.zip (1MB)
Glyph Designer Projects.zip (7KB)