Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Bitmap Font for Corona SDK with Dynamic Font Selection
Started by jjsanchezramirez Nov 24 2014 11:01 AM

8 replies to this topic
bitmap font text angelcode shoebox dynamic scaling
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

jjsanchezramirez

[GLOBAL: userInfoPane.html]
jjsanchezramirez
  • Observer

  • 18 posts
  • Corona SDK

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.

 

Attached File  Screen Shot 2014-11-24 at 12.29.59 PM.png   50.48KB   10 downloads

 

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.)
 
You can view the code here.


[TOPIC: post.html]
#2

jospic

[GLOBAL: userInfoPane.html]
jospic
  • Enthusiast

  • 44 posts
  • Corona SDK

Thanks!

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

May you confirm this?

Thanks in advance.

Regards.

-jospic



[TOPIC: post.html]
#3

jjsanchezramirez

[GLOBAL: userInfoPane.html]
jjsanchezramirez
  • Observer

  • 18 posts
  • Corona SDK

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.



[TOPIC: post.html]
#4

jospic

[GLOBAL: userInfoPane.html]
jospic
  • Enthusiast

  • 44 posts
  • Corona SDK

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

-jospic



[TOPIC: post.html]
#5

jospic

[GLOBAL: userInfoPane.html]
jospic
  • Enthusiast

  • 44 posts
  • Corona SDK

You're right! I'm sorry  ^_^

The problem was inside font type...

Thanks

-jospic



[TOPIC: post.html]
#6

jjsanchezramirez

[GLOBAL: userInfoPane.html]
jjsanchezramirez
  • Observer

  • 18 posts
  • Corona SDK

You're right! I'm sorry  ^_^

The problem was inside font type...

Thanks

-jospic

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.



[TOPIC: post.html]
#7

jospic

[GLOBAL: userInfoPane.html]
jospic
  • Enthusiast

  • 44 posts
  • Corona SDK

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



[TOPIC: post.html]
#8

jjsanchezramirez

[GLOBAL: userInfoPane.html]
jjsanchezramirez
  • Observer

  • 18 posts
  • Corona SDK

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.



[TOPIC: post.html]
#9

sobh

[GLOBAL: userInfoPane.html]
sobh
  • Contributor

  • 122 posts
  • Corona SDK

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 .




[topic_controls]
[/topic_controls]