Bitmap Font for Corona SDK with Dynamic Font Selection

Audio and Graphics
#1

Edited January 15th, 2015.

This code is for those who, like me, don’t want to spend money on Glyph Designer, bmGlyph, Text Candy, or any other bitmap font tool for Corona SDK.

I ran into a piece of code written by Aaron Meriwether (a.k.a. ‘p120ph37’) that was modified by Michael Wilson who removed the legacy Sprite library and switched to a modular class. Albeit messy, this code had all of the features I was looking for. I simply cleaned it up a little bit, removed some unnecessary lines of code, fixed some issues with the alignment and, most importantly, added a dynamic font selection feature. This means devices with higher resolutions will use higher resolution images.

It’s very easy to use. Simply require the module, load a font, and print a string. Lines of text are handled as groups and they share the same properties.

Here’s the code example in the screenshot.

local bmf = require('bmf') local centerX = display.contentCenterX local centerY = display.contentCenterY local width = display.contentWidth local height = display.contentHeight local rect = display.newRect(centerX, centerY, width, height) rect:setFillColor(0.5,0.78,1) local font = bmf:load('SourceSansProSemibold18') local str = bmf:newString(font, '\<-- Right Align') str.align = 'right' str:translate(centerX, centerY - 27) local str2 = bmf:newString(font, '\<-- Center Align --\>') str2.align = 'center' str2:translate(centerX, centerY - 9) local str3 = bmf:newString(font, 'Left Align --\>') str3.align = 'left' str3:translate(centerX, centerY + 9)

All 3 strings have the same X coordinate but different alignments. The screenshot shows an iPhone 5 using a 2x resolution image. If we switch to an iPhone 6, it’ll use a 4x resolution image. Each image has its own ShoeBox / AngelCode font file (’.fnt’) with its own properties and dimensions.

You can optionally add a ‘group’ parameter at the beginning of the ‘newString’ function. You can also omit the ‘align’ parameter. The default is ‘left’. 

local str = bmf:newString(group, font, 'Hello Corona!')

You can download the example here. (Note: The example uses the previous version of the code.)

http://www.mediafire.com/download/m5s96l0zy2tn4j8/Bitmap+Font.zip

You can view the code here.

https://github.com/jjsanchezramirez/Corona-SDK/blob/master/bitmapfont.lua

#2

Thanks!

But seems that alignment fails on iPad and Tablet aspect ratio…

May you confirm this?

Thanks in advance.

Regards.

-jospic

#3

I couldn’t reproduce the error. It might have to do something with the font themselves. There will always be a little bit of difference when you down size or upsize, but it shouldn’t be more than a few pixels.

#4

Thanks, I’ll do other tests to be more precise.

-jospic

#5

You’re right! I’m sorry  :slight_smile:

The problem was inside font type…

Thanks

-jospic

#6

Glad I could be of help! I’ll try to post more code samples in the future. I’ve done a lot of nice things while working on my game.

#7

Hi Juan,

another question…

Function load provides a path for inclusion bitmap fonts, as reported in the bmf source code

function sbFont:load( fntFile, path )

I tried to insert my bitmap fonts (.fnt anf .png) in a folder, placed in the root of the app, like “bitmapfonts” but when I call this

statement:

local bmf = require( "bmf" ) local font = bmf:load("myFont", "bitmapfonts")

I’ve got an error!

What is the correct way to use this statement ?

Thanks in advance.

-jospic

#8

So, there’s a couple of things you should know.

local readline = io.lines( system.pathForFile( path .. fntFile .. suffix .. ".fnt", system.ResourceDirectory ) )

Notice how the code looks for the file in the system.ResourceDirectory. There’s several other directories, but my point is to make sure that you’re putting your source files in the right folder.

You can learn more about directories here:

https://docs.coronalabs.com/api/library/system/index.html

The other thing is that should always end with a ‘/’.

local path = "myBitmapFontsFolder/"

I think this should solve your problem.

#9

i am trying to use your font to show the score number which was read from json table

but i got this err

attempt to concatenate field ‘raw_text’ a table value

if i chose the normal font , it display the score without issue

btw i used most of the free bitmap font and non of them able to show it. i tried to tostring the numbers but still no luck

any help .

#10

Thanks!

But seems that alignment fails on iPad and Tablet aspect ratio…

May you confirm this?

Thanks in advance.

Regards.

-jospic

#11

I couldn’t reproduce the error. It might have to do something with the font themselves. There will always be a little bit of difference when you down size or upsize, but it shouldn’t be more than a few pixels.

#12

Thanks, I’ll do other tests to be more precise.

-jospic

#13

You’re right! I’m sorry  :slight_smile:

The problem was inside font type…

Thanks

-jospic

#14

Glad I could be of help! I’ll try to post more code samples in the future. I’ve done a lot of nice things while working on my game.

#15

Hi Juan,

another question…

Function load provides a path for inclusion bitmap fonts, as reported in the bmf source code

function sbFont:load( fntFile, path )

I tried to insert my bitmap fonts (.fnt anf .png) in a folder, placed in the root of the app, like “bitmapfonts” but when I call this

statement:

local bmf = require( "bmf" ) local font = bmf:load("myFont", "bitmapfonts")

I’ve got an error!

What is the correct way to use this statement ?

Thanks in advance.

-jospic

#16

So, there’s a couple of things you should know.

local readline = io.lines( system.pathForFile( path .. fntFile .. suffix .. ".fnt", system.ResourceDirectory ) )

Notice how the code looks for the file in the system.ResourceDirectory. There’s several other directories, but my point is to make sure that you’re putting your source files in the right folder.

You can learn more about directories here:

https://docs.coronalabs.com/api/library/system/index.html

The other thing is that should always end with a ‘/’.

local path = "myBitmapFontsFolder/"

I think this should solve your problem.

#17

i am trying to use your font to show the score number which was read from json table

but i got this err

attempt to concatenate field ‘raw_text’ a table value

if i chose the normal font , it display the score without issue

btw i used most of the free bitmap font and non of them able to show it. i tried to tostring the numbers but still no luck

any help .