bmGlyph and bitmap font for graphics 2.0

Other Third-Party Tools
#1

Hi everyone,

I’ve just released the v2.0.3 of bmGlyph, with a new feature especially for Corona.

You can now export the font for ‘Corona 2.0’, which means that bmGlyph produces a .lua font file definition, and uses the new graphics.newImageSheet .

In order to use that, i made some modifications on the bmf.lua class created by a member of this forum, so you no longer need the v1 compatibility mode and the sprite.lua class.

the bmf2.lua class is also now able to deal correctly with the unicode characters!

I attached the demo project, feel free to test it and modify the class if needed, i’d love to hear your thoughts about it.

here is how to use it:

require(‘bmf2′) local myfont = bmf2.loadFont( ‘bmGlyphArial’ ) local string = bmf2.newString(myfont, “bmGlyph and Corona\ngraphics 2.0\nunicode support\nйцу\néçàà”) string.x=50 string.y=50  

(v2.0.3 is available for the non-mac app store version throught the update system, and the mac app store version is currently waiting for the approval)

–

Stéphane

#2

i’ve created a github repo for this project:

https://github.com/tapouillo/bmf2—bitmap-font-for-Corona-graphics-2.0

#3

I’m also working on a class (will be freebie - MIT license) for bmglyph (and others) fonts (e.g. FNT and PNG fonts) https://github.com/autismuk/Font-Manager which is partly working and under development http://coronadev.blogspot.co.uk is providing a commentary as I go.

It is kinda usable but not really finished, it’ll take a few more days work on it.

It allows animation of both the bitmap font string itself (this bit works) using transition.x and sub animation of the letters at the same time (this is about half done) so you can zoom/rotate/move individual letters and so on, you can warp the whole string into shapes, zoom individual letters, spin them round and different speeds, that kind of stuff - or you can just display simple text with it :slight_smile:

Anyone have any ideas about what they’d like this sort of thing to do ?

Code looks a bit like this:

local str = BitmapString:new("demofont",64) str:moveTo(160,240):setText("Another demo") str:setModifier(modClass:new()) transition.to(str:getView(),{ time = 4000,rotation = 720, xScale = 0.5, yScale = 0.5})

modClass is a modifier class (can also be a function) which describes how a standard bitmap text display is mangled to produce effects) - so you can (for example) make the text undulate in a sine curve (the curve itself can be animated)

#4

[quote=“paulscottrobson,post:3,topic:324296”]

I’m also working on a class (will be freebie - MIT license) for bmglyph (and others) fonts (e.g. FNT and PNG fonts) https://github.com/autismuk/Font-Manager which is partly working and under development http://coronadev.blogspot.co.uk is providing a commentary as I go.

It is kinda usable but not really finished, it’ll take a few more days work on it.

It allows animation of both the bitmap font string itself (this bit works) using transition.x and sub animation of the letters at the same time (this is about half done) so you can zoom/rotate/move individual letters and so on, you can warp the whole string into shapes, zoom individual letters, spin them round and different speeds, that kind of stuff - or you can just display simple text with it :slight_smile:

Anyone have any ideas about what they’d like this sort of thing to do ?

Code looks a bit like this:

local str = BitmapString:new("demofont",64) str:moveTo(160,240):setText("Another demo") str:setModifier(modClass:new()) transition.to(str:getView(),{ time = 4000,rotation = 720, xScale = 0.5, yScale = 0.5})

modClass is a modifier class (can also be a function) which describes how a standard bitmap text display is mangled to produce effects) - so you can (for example) make the text undulate in a sine curve (the curve itself can be animated) [/quote]

Neat!

Would be sweet if you supported glyph-designer too (from 71Squared). It’s quite a popular tool.

#5

From what I can see of the sample files on their site it almost certainly will work - fnt and png files - but I have emailed 71squared asking them for a sample couple of files so I can test it actually does work. I *think* the format is pretty standardised.

#6

Excellent. I’ll be bookmarking this thread then :wink:

#7

If you want to have a look at a mostly finished and working version (need to write a proper demo) it is at https://github.com/autismuk/Font-Manager - if you download the zip, open it, and drag it onto the Simulator it should work - it works on my Android tablet and my iPhone fine. The demo is fairly basic (albeit it does show most of the features) because it’s really just a hangover from testing that I’ve commented out.

It is possible the API might change slightly when I write the demo, but not that likely.

Nice effects without much code - Example:

display.newBitmapText("Hello World !",160,240,"retrofont",40):setModifier("curve"):animate(3)

works like display.newText() (can do it via BitmapFont:new()), applies a curve modifier to it and animates it :slight_smile:

Though it’s a bit of cheat, because it isn’t a displayObject, to access the view you have to use the getView() method :frowning:

#8

i’ve created a github repo for this project:

https://github.com/tapouillo/bmf2—bitmap-font-for-Corona-graphics-2.0

#9

i updated the bitmap font  bmf2 class

https://github.com/tapouillo/bmf2—bitmap-font-for-Corona-graphics-2.0

i improved the way it deals with the 1x 2x 4x assets.

the project is fully working with any resolution, there is no ugly-blurry result on screen (which is most of the time a scale problem linked with the class itself), and it is also dealing correctly with any utf8 strings (not only 2 bytes coded chars).

this class is using .lua font def produced by bmglyph. i found it was better to stick with .lua files (just as texture packer did). it allows to easily use the display.newImageSheet, and to have an easy unicode mapping table… 

#10

There’s a lot to be said for that. My first version had a CLI preprocessor that converted the .fnt back into lua and then just require()d it. But I did want compatibility with your arch-enemies :slight_smile: at 71squared and the lua converter meant you had to download CLI lua and so on. It was easier just to parse it.

#11

Thanks for updating bmf2.lua! That fixed my dynamic scaling issue.

#12

I’m also working on a class (will be freebie - MIT license) for bmglyph (and others) fonts (e.g. FNT and PNG fonts) https://github.com/autismuk/Font-Manager which is partly working and under development http://coronadev.blogspot.co.uk is providing a commentary as I go.

It is kinda usable but not really finished, it’ll take a few more days work on it.

It allows animation of both the bitmap font string itself (this bit works) using transition.x and sub animation of the letters at the same time (this is about half done) so you can zoom/rotate/move individual letters and so on, you can warp the whole string into shapes, zoom individual letters, spin them round and different speeds, that kind of stuff - or you can just display simple text with it :slight_smile:

Anyone have any ideas about what they’d like this sort of thing to do ?

Code looks a bit like this:

local str = BitmapString:new("demofont",64) str:moveTo(160,240):setText("Another demo") str:setModifier(modClass:new()) transition.to(str:getView(),{ time = 4000,rotation = 720, xScale = 0.5, yScale = 0.5})

modClass is a modifier class (can also be a function) which describes how a standard bitmap text display is mangled to produce effects) - so you can (for example) make the text undulate in a sine curve (the curve itself can be animated)

#13

[quote=“paulscottrobson,post:12,topic:324296”]

I’m also working on a class (will be freebie - MIT license) for bmglyph (and others) fonts (e.g. FNT and PNG fonts) https://github.com/autismuk/Font-Manager which is partly working and under development http://coronadev.blogspot.co.uk is providing a commentary as I go.

It is kinda usable but not really finished, it’ll take a few more days work on it.

It allows animation of both the bitmap font string itself (this bit works) using transition.x and sub animation of the letters at the same time (this is about half done) so you can zoom/rotate/move individual letters and so on, you can warp the whole string into shapes, zoom individual letters, spin them round and different speeds, that kind of stuff - or you can just display simple text with it :slight_smile:

Anyone have any ideas about what they’d like this sort of thing to do ?

Code looks a bit like this:

local str = BitmapString:new("demofont",64) str:moveTo(160,240):setText("Another demo") str:setModifier(modClass:new()) transition.to(str:getView(),{ time = 4000,rotation = 720, xScale = 0.5, yScale = 0.5})

modClass is a modifier class (can also be a function) which describes how a standard bitmap text display is mangled to produce effects) - so you can (for example) make the text undulate in a sine curve (the curve itself can be animated) [/quote]

Neat!

Would be sweet if you supported glyph-designer too (from 71Squared). It’s quite a popular tool.

#14

From what I can see of the sample files on their site it almost certainly will work - fnt and png files - but I have emailed 71squared asking them for a sample couple of files so I can test it actually does work. I *think* the format is pretty standardised.

#15

Excellent. I’ll be bookmarking this thread then :wink:

#16

If you want to have a look at a mostly finished and working version (need to write a proper demo) it is at https://github.com/autismuk/Font-Manager - if you download the zip, open it, and drag it onto the Simulator it should work - it works on my Android tablet and my iPhone fine. The demo is fairly basic (albeit it does show most of the features) because it’s really just a hangover from testing that I’ve commented out.

It is possible the API might change slightly when I write the demo, but not that likely.

Nice effects without much code - Example:

display.newBitmapText("Hello World !",160,240,"retrofont",40):setModifier("curve"):animate(3)

works like display.newText() (can do it via BitmapFont:new()), applies a curve modifier to it and animates it :slight_smile:

Though it’s a bit of cheat, because it isn’t a displayObject, to access the view you have to use the getView() method :frowning:

#17

i updated the bitmap font  bmf2 class

https://github.com/tapouillo/bmf2—bitmap-font-for-Corona-graphics-2.0

i improved the way it deals with the 1x 2x 4x assets.

the project is fully working with any resolution, there is no ugly-blurry result on screen (which is most of the time a scale problem linked with the class itself), and it is also dealing correctly with any utf8 strings (not only 2 bytes coded chars).

this class is using .lua font def produced by bmglyph. i found it was better to stick with .lua files (just as texture packer did). it allows to easily use the display.newImageSheet, and to have an easy unicode mapping table… 

#18

There’s a lot to be said for that. My first version had a CLI preprocessor that converted the .fnt back into lua and then just require()d it. But I did want compatibility with your arch-enemies :slight_smile: at 71squared and the lua converter meant you had to download CLI lua and so on. It was easier just to parse it.

#19

Thanks for updating bmf2.lua! That fixed my dynamic scaling issue.

#20

Hi squeraud,

I just bought your bmglyph to make sure I can work with 

There are some problems that I found though :

  1. It seems some fonts that I use won’t be exported/published properly. I tried this with several fonts that I’m using and the lua it produced is missing the kernings data (I make sure use kerning is checked) and even the last line “return sheetData”. It seems that it’s broken somewhere and won’t continue writing the file.

The fonts in question are attached here

  1. Since I’m trying to change the fonts in my game to use bitmap, I’m confused on how the fontsize works? I did a test of creating a bitmap font with the size of 48 and compare it side by side with Corona’s font system with the fontsize of 48 as well.

There’s a big difference on the size of the text as shown in the image here CbofE4n.png

What do you think it’s the best way to get the same font size on the screen ?

Thanks