Bitmap font

hi @Sun.Jiajie Sorry, can’t confirm.

Just spend some time switching scenes in my game (from one that utilizes a bitmap font to one that don’t and back). Here’s the result:

[import]uid: 52103 topic_id: 6060 reply_id: 62831[/import]

Hi everyone,

i recently released a new bitmap font generator for OSX: bmGlyph (http://www.bmglyph.com).

the export format is compatible with the bmf project posted above.

however, a bmGlyph user reported some difficulties using HD and SD font format (which is automatically generated by bmGyph), and after looking at it, i made a quick fix to the code.

this will work only for iPhone/iPhone4 (actually it depends on the scale factor), but it should be pretty easy to adpat it to other scale factor.

here is what i do:

local bmglyphfnt  
if display.contentScaleX == 0.5 then  
 bmglyphfnt = bmf.loadFont( 'testbmglyph-hd.fnt' )  
else  
 bmglyphfnt = bmf.loadFont( 'testbmglyph.fnt' )  
end  
  
local string = bmf.newString(bmglyphfnt, "Loading ... ")  

in bmf.lua, i changed the set_text function ad follow:

obj.set\_text = function( t, k, v )  
 t.raw\_text = v  
 for i = t.numChildren, 1, -1 do t[i]:removeSelf() end  
 local oldAlign = ( t.align or 'left' )  
 t.align = 'left'  
 local x = 0; local y = 0  
 local last = ''; local xMax = 0; local yMax = 0  
 if t.raw\_font then  
 if display.contentScaleX == .5 then   
 t.raw\_font.info.lineHeight = t.raw\_font.info.lineHeight /2  
 end  
 for c in string.gmatch( t.raw\_text..'\n', '(.)' ) do  
 if c == '\n' then  
 x = 0;   
 y = y + t.raw\_font.info.lineHeight  
 if y \>= yMax then  
 yMax = y  
 end  
 elseif t.raw\_font.chars[c] then  
 if 0 + t.raw\_font.chars[c].width \> 0 and 0 + t.raw\_font.chars[c].height \> 0 then  
 local letter = sprite.newSprite( t.raw\_font.sprites[c] )  
  
  
 letter:setReferencePoint( display.TopLeftReferencePoint )  
 if t.raw\_font.kernings[last .. c] then  
 x = x + font.kernings[last .. c]  
 end  
  
 if display.contentScaleX == .5 then --scale the highres spritesheet if you're on a retina device.  
 letter.xScale = .5  
 letter.yScale = .5  
 letter.x = t.raw\_font.chars[c].xoffset/2 + x  
 letter.y = t.raw\_font.chars[c].yoffset/2 - t.raw\_font.info.base + y  
 else  
 letter.x = t.raw\_font.chars[c].xoffset + x  
 letter.y = t.raw\_font.chars[c].yoffset - t.raw\_font.info.base + y  
 end  
  
 t:insert( letter )  
 last = c  
 end  
 if display.contentScaleX == .5 then   
 x = x + t.raw\_font.chars[c].xadvance/2  
 else  
 x = x + t.raw\_font.chars[c].xadvance  
 end  
 if x \>= xMax then  
 xMax = x  
 end  
 end  
 end  
 local background = display.newRect( 0, -t.raw\_font.info.base, xMax, yMax )  
 obj:insert( background )  
 background:setFillColor( 0, 0, 0, 0 )  
 end  
 t.align = oldAlign  
 end  

the text displayed is now using the HD texture on iPhone4 and SD on iPhone.

i’m not sure it is the right way to deal with hd and sd textures on Corona, feel free to correct it. but at least it works :slight_smile:

hope that helps!
[import]uid: 113280 topic_id: 6060 reply_id: 78485[/import]

Congrats, squeraud! Looks like an awesome app :slight_smile: Too bad we don’t have something like this for Windows. Sure, we have BMFont, but it is more basic. Will be using your app in a virtual machine. [import]uid: 52103 topic_id: 6060 reply_id: 78488[/import]

Hi, I am having a small group that contains 1 background image (Square) and one bitMap font.

The problem is that I have no clue how I should center the bitMap above my image? I was trying to do it manually but the text doesn’t align perfect in that way.

level[i] = display.newGroup()  
  
 level[i]:insert(display.newImage( "level.png" ))  
  
 local bmglyphfnt  
 if display.contentScaleX == 0.5 then  
 bmglyphfnt = bmf.loadFont( 'hobo-hd.fnt' )  
 else  
 bmglyphfnt = bmf.loadFont( 'hobo.fnt' )  
 end  
   
 local string = bmf.newString(bmglyphfnt, i)  
 string.x = 10;   
 string.y = 80  
 level[i]:insert(string)  
  

Kind regards, Joakim [import]uid: 81188 topic_id: 6060 reply_id: 78988[/import]

Try this:

[lua] – Only need to do this once
local bmglyphfnt
if display.contentScaleX == 0.5 then
bmglyphfnt = bmf.loadFont( ‘hobo-hd.fnt’ )
else
bmglyphfnt = bmf.loadFont( ‘hobo.fnt’ )
end

local level = {}

for i=1,NUM_LEVELS do
level[i] = display.newGroup()

level[i]:insert(display.newImage( “level.png” ))

local string = bmf.newString( bmglyphfnt, string.format("%d", i) )
level[i]:insert(string)
string:setReferencePoint( display.TopLeftReferencePoint )
string.x = 0.5*( level[i].contentWidth - string.contentWidth )
string.y = 0.5*( level[i].contentHeight - string.contentHeight )
end[/lua] [import]uid: 16734 topic_id: 6060 reply_id: 79004[/import]

Just to add my thought : TextCandy does the job perfectly well with no mem troubles, and supports glyph designer. [import]uid: 9328 topic_id: 6060 reply_id: 79005[/import]

hi,

you will probably need to get the baseline of the font (assuming that you want to center only numbers which or not going under the baseline of the font)

check in the fnt file, at the top, the lineheight and baseline values. the non-inverted baseline value will be ‘lineheight - baseline’. now you should only have to get the center of your level.png and shift the string position like this:

...  
string.x = level.width/2 - string.width/2  
string.y = level.height/2 + string.height/2 - baseline  

[import]uid: 113280 topic_id: 6060 reply_id: 79007[/import]

Thanks, @KenRogoway!

That did the stuff and it was not so hard to understand!

Joakim [import]uid: 81188 topic_id: 6060 reply_id: 79009[/import]

Hi again,

I want to keep my things in places so it looks tidy in my main directory.

But I can’t place my font files in a folder? Any suggestions?

Regards, Joakim [import]uid: 81188 topic_id: 6060 reply_id: 79522[/import]

You CAN place your fonts in a folder. I do. When you call the function to add the font just do something like this:

[lua]FONT_DIR = “Fonts/”

Calibri48BoldBlack = bmf.loadFont( ‘CalibriBold_Black48.fnt’, FONT_DIR )

bmf.newString( Calibri48BoldBlack, “Text Message” )[/lua] [import]uid: 16734 topic_id: 6060 reply_id: 79524[/import]

Great that seems straight forward, but I am getting “Cannot create path for resource file ‘hobo-hd.fnt’. File does not exist” error. The fonts are in a folder “fonts” in the root directory of the project.

local bmglyphfnt  
  
local FONT\_DIR = "fonts/"  
if display.contentScaleX == 0.5 then  
 bmglyphfnt = bmf.loadFont( 'hobo-hd.fnt',FONT\_DIR )  
 bmglyphfnt1 = bmf.loadFont( 'badaboom-hd.fnt',FONT\_DIR )  
else  
 bmglyphfnt = bmf.loadFont( 'hobo.fnt',FONT\_DIR )  
 bmglyphfnt1 = bmf.loadFont( 'badaboom.fnt',FONT\_DIR )  
end  

Any suggestions?

Joakim [import]uid: 81188 topic_id: 6060 reply_id: 79621[/import]

Are you testing in the simulator or on the device?

If you are in the simulator is this a Mac or PC?

If you are on a device is it running Android?

Basically this probably boils down to either your folder or file name having a different case than what you have in the code, OR if you are on an android device you are probably running into the same issue I had where *sometimes* it finds files in sub folders and some times it doesn’t.

One last thought. The .fnt file refers to a .png file. Make sure that is in the same folder as the .FNT file and is named EXACTLY has it is listed in the .FNT file. [import]uid: 16734 topic_id: 6060 reply_id: 79627[/import]

HI, I am testing on the simulator running on a Mac, and running an iOS app :slight_smile:

Strange is that is working when I have it in the root folder, I will give it a try later tonight.

Is it possible to add some type of print statement in the class, so I can see the folder path?

Best regards, Joakim [import]uid: 81188 topic_id: 6060 reply_id: 79630[/import]

@jkrassman,

Did you move both the .fnt files, and the .png files that are referenced in the .FNT files into the “fonts” folder? [import]uid: 16734 topic_id: 6060 reply_id: 79633[/import]

Yes i did that. I have moved all my other assets with no problems. How hard can it be? This aint rocketsience :wink:

Regards joakim [import]uid: 81188 topic_id: 6060 reply_id: 79644[/import]

I didn’t test it, but could it be linked to the name of the png written at the top of each .fnt file? If you need to name the full directory when loading a .fnt, then the change is also needed when the bmf.lua is loading the png [import]uid: 113280 topic_id: 6060 reply_id: 79734[/import]

I looked in the file and it says, file=“badaboom-hd.png”. Should I change the path here instead? or should I have the change in both places?

Joakim [import]uid: 81188 topic_id: 6060 reply_id: 79752[/import]

Joakim,

Are you also putting “badaboom-hd.png” in the “fonts/” folder?

I suspect you didn’t copy it there.

You do NOT need to edit the FNT file and change anything. Just put the FNT and associalted PNG file in the fonts folder. [import]uid: 16734 topic_id: 6060 reply_id: 79759[/import]

Strange, I will check this out one more time.

I must be doing something crazy over here. A cup of coffee and I will take on that task again!

Thanks, Joakim [import]uid: 81188 topic_id: 6060 reply_id: 79767[/import]

OK, I give up - the simplest thing in the world seems to be climbing a mountain xD

Could it be the fact that I am having a old / bad bmf.lua ?

I looked into the bmf.lua and the function looks like this:

function loadFont( fntFile )  

Looks like one parameter is missing?

Joakim [import]uid: 81188 topic_id: 6060 reply_id: 79852[/import]