Have pushed the in development branch to be the default branch - seems pretty solid & better engineered than the first one. https://github.com/autismuk/Font-Manager
Have added the facility to put arbitrary images in. (see picture) which then behave exactly the same as any other font character. The syntax is simple ; {$name} maps to icons/name.png - though I will make this mapping changeable.
This looks really great; nice to see people making paid library alternatives 
I have a couple of suggestions…
- Recently I made a personal text effects library (I’m quite perfectionistic, which would explain why I wrote an entire text effects library for making the text appear in two colors on the Crystalline: Deflection initial screen), and I used a mini-serialization format (again, written just for that library!) to make what you’re calling inline commands. I’d opt for a fuller approach, because then it can be extended even further. Also, you should make delimiters less “used”. A curly brace sequence isn’t very rare (at least for me), so clashes between the library and me just wanting literal curly braces could happen. In my text library, I used @{ … }@. The extended approach also gave ways to use “tags” (starting with a # symbol) which were like function calls (for your library, things like {shake}).
[lua]
local text = textLib.newText({
text = “@{r:1,g:1,b:1}@This text appears in white…@{#newline}@@{b:0}@And this appears in yellow because of the modification on original settings”
})
[/lua]
2. Definitely put your function in your own library! Storing it in the “display” table, though certainly convenient, only makes things more confusing.
[lua]
local bitmapText = require(“fontmanager”)
local text = bitmapText.newBitmapText(…)
[/lua]
Great work!
- C
Hi. Thanks :)
Delimiters can be changed using the BitmapString.setTintBrackets() method though only to single character delimiters. I might rethink this so it can use multiple character delimiters, there aren’t that many sensible pairs in Unicode.
The normal constructor is actually in there. Some of the examples use it.
str2 = display.newBitmapText("Bye !",0,0,"font2",45)
and
str2 = BitmapString:new("font2",45):moveTo(0,0):setText("Bye !")
are functionally equivalent. (You can position using .x and .y as well). The display.newBitmapText() is just a wrapper that creates a string instance. I wanted something that was dead easy to use for beginners, people sometime struggle with the class/object approach. If you look at the source it’s the last thing and an obvious tag-on
As long as you don’t animate the text (because it involves adding a reference to an enterFrame listener, so you have to turn it off or remove it manually, you can’t rely on Composer’s garbage collection - I think !) it should function as a straight substitute, save for changing the anchor point or setting the text, though obviously a lot slower.
I did experiment with this with lua’s metatable lookup thing, but decided it was too risky, because a BitmapString object is a mixin on a Corona display group. I was a bit wary about tinkering with the system display object, but I thought given there are only two uses - there’s a reference to the BitmapString prototype in there as well - it was probably okay.
The inline commands is really entirely different There are two default inlines ; tint control and adding graphics in as special characters (i.e. the crab image) so you aren’t stuck with characters and the {fast} {slow} {shake} ones in the rollout code.
The lorem ipsum demo was prompted by Richard’s post about having something scrolling out where things happened at specific points (I guess it’s some sort of adventure/RPG/story thing ?) which I did (i) to test the library and (ii) to see if the design was flexible enough to work. It’s really a rendering titles and animating them library and I didn’t want to enhance the functionality too much, it gets cluttered and loses the simplicity. The use of {} in the library and the rollout text demo is the same , but only because I pinched the parser from the BitmapString class (which meant it automatically did UTF-8).
It’s really a special modifier (which does the roll out effect) with a class that parses events out, puts them in a table and triggers them when a specific character is displayed for the first time. Most of the modifiers are simple functions of a few lines, but it can do class modifiers if you want something fancy
Okay, spending the time to play with the font manager today.
1. Use the native font size as the default fontSize. It really shouldn’t assert on this, both for ease-of-use and because these are not TTFs; there’s simply no concept of font point sizes. By default fonts should use their native sizing, because, for example, I can’t tell what is 1.0 scale on the sample fonts provided.
2. Your table implementation for display.newBitmapText() is broken. You’ve set options = arg, but even if there is only one arg, arg is a table. Easy to fix though; on line 1 of the function just set “local options = arg[1]”
3. display.newBitmapText() defaults to center justification and has no method to pass justification. Your lua file suggests the other method uses a left default, so there should be both a bug fix and an option to pass your choice of “align” or “justify” in a table-mode display.newBitmapText() call.
-
fontmanager is misspelled at the beginning of fontmanager.lua
-
I wouldn’t really use the word prototype in your docs. Unless you’re a programmer by trade you’ll have no idea what it means. I have no idea what it means, because there’s just no instance of Corona ever using that term, except for what it means in typical english…
-
Waiting to see how you would handle imageSheet icons , because that’s really the only responsible way to approach that stuff. I use a custom method to pre-call from a table, so I suppose I just need a place to remove your image creation code and use mine instead, ex:
display.newSheetSprite(“coolsign”)
-
In your doc.html, you say “Curly Brackets can”. That’s the entire paragraph.
-
You say to run main.lua in the simulator but that (intentionally) has no code to run with font manager.
-
Where is the list of sample modifiers? Just seems pretty intimidating from what little description I see of how to roll that out.
-
Your roll-out implementation has a HUGE amount of code. I’ll see if I can find some way to optimize it, because I’m pretty sure there’s something easier than that…(I appreciate the commenting in it though; wish fontmanager.lua had that!)
Hi. Thanks for that. Some specific comments:
- The font size is sufficient pixels to fit the whole font in aligned properly. So if you specify a font size of 80 then the text will fit in an 80 pixel high box. The idea is that it works independently of the font size used in the creation, which only affects things like the quality of the rendition. There are problems with this which are related to the odd fonts. I spent quite a lot of time trying to debug the font height code because the first runs at multiline looked hopelessly widely spaced, but it was actually right - because I was using some artistic fonts there were some quite high risers and fallers. It should actually default, probably, to the calculated height of the character, which isn’t the same as the font size used to originally create it.
2/3. My bad. I added the multiline stuff after I wrote this, before that align was an irrelevance, you can’t justify one line on its own
-
I see your point. They are prototypes, but Corona just calls them ‘objects’ generally.
-
That’s an interesting question. I think I’ll probably have to provide a method for hooking in, because there’s no clean way of doing it that is standard. TexturePacker includes a table which maps name -> ID but this isn’t actually a given. I will give that some thought. getImageLocation() allows you to do single images anywhere, but it needs extending further so you can create anything you like as long as it’s a display object. This isn’t difficult.
-
main.lua just loads several alternative main files. There should be four options ; the old test, the new test, the rollout text and a slaughter-it-to-death test. Just uncomment the one you want to run.
-
It’s probably too much for one file but I wanted it to be one file. It could be shortened undoubtedly but it would lose robustness in the process. Probably half the lines are comments anyway
The current bmf.lua is about a quarter of the size but it is virtually uncommented and it doesn’t do a lot of the stuff mine does. I wouldn’t have thought code size was an issue for Corona, the file is about 50k compiled and a Corona app is about 5-6Mb minimum. The font files are much bigger. From an efficiency point of view, well I would be wary about having (say) animated scores in a game - it would work, but it might claim a fair amount of time, but static text shouldn’t really be a problem.
-
Not sure what you mean here? So fontSize does not set the scale of the bitmap text, but just defines a how much of the font characters appear? (ex: if ‘A’ is 40x40, and you say 80, what happens…?)
-
A method for hooking in would be best, yeah.
-
This just came up because you flat out say to run main.lua, but everything inside it is commented out. So to understand what you mean I’d have to open main.lua to know that I have to uncomment something and then I still don’t really have a good idea what any of those sub-scenes do without opening those up, too…Just an issue of initial usability, really…
-
Well, it just feels like the animation method I have in mind (char-by-char reveal, no alpha stepping) could be simple enough to turn into a stock function. I’ll take a closer look at your code later, maybe I’ll see something else to do with it.
To your credit, I got the sample font running with the effect I had in mind in about an hour. So your code works great! I’ll try experimenting with removal and with a few new bmGlyph fonts soon, too.
It doesn’t set either. It’s an absolute pixel height. So, if you define fontSize to be , say, 80, the font should fit perfectly in an 80 pixel high box and be properly vertically aligned. So if your A is 40x40 it will become 80x80 pixels because the aspect ratio of the character is maintained. It means ‘how tall in pixels do you want the string to be’. The library doesn’t actually care if A is 40x40 or 140x140, it will scale it to the size you want. Then you have the usual graphic tradeoff between pixellation and asset size.
It can look slightly odd because some faults have very low descenders and very high ascenders, I thought it was broken for a while, but putting the debug boxes on shows it is actually right. In multiline text it can look very spaced out, this was the reason for the setVerticalSpacing() method.
You want to do something quite specific - whilst my system can do it (the alpha stepping is just commenting out one line in main_roll.lua) it’s not really designed for it. If you just want to do that it might be simpler to create some code to do exactly what you want. I suspect you don’t want any of the modifiers code for example. You could just hack out the first 300 or so (as far as “ModifierStore”) and possibly the Character Source/UTF-8 classes if you want this, and chuck the rest. This would give you a fairly robust single character bitmap font object without much unused code (you wouldn’t use BitmapCharacter:modify() probably).
Yeah, that’s what I thought I asked before. If it’s absolute pixel height then I would assume (for ease of use) that you could fall back on “A” to set font size. Sure, it might not always look perfect, but it’s better than an assert.
Now then, I bought bmGlyph and tried building a basic font from an existing .TTF. It’s showing up extremely blurry despite there being @2x and @4x assets, as if only the 1x asset is being used. I’m not entirely sure why, yet, but I am noticing some problems. Note that this is with both custom TTF and OSX standard TTF; I seem to have the same problem across every font I’ve tried.
1. You need to pass on padding data from the .fnt file to graphics.newImageSheet (.border). (Needed to fix OpenGL bleed artifacts)
I’m not entirely sure but I think in bmGlyph padding would be a combination of Bounding Box and Padding, as padding doesn’t seem to apply along the extreme edges of the texture. (The .fnt file carries both padding and spacing on the first line; not sure which is which…)
- I’m noticing two specific problems: heavy blur (again, looks like only 1x assets in use) and the y offset is off on everything, giving a jumpy look where the text dips up and down.
Specific bmGlyph output options:
-
@4x: scale 100%
-
@2x: scale 50%
-
sd: scale 25%
-
power of 2 texture
-
0 bounding, 0 padding
-
Auto x/y offsets is on, although it doesn’t seem to change things either way
This generates the -, @2x, @4x assets.
a. If I turn on “Align to Grid”, the glyphs are all enormously spaced out, which makes me wonder what happens to the offsets when one does this.
b. Although the publishing wizard makes it easy to setup the 3 resolution outputs, choosing a project type doesn’t seem to make a difference for the purposes of font manager. cocos2d+bmfont or corona presets both give the same output files.
Looking at your provided demo fonts:
-
They all work, and look sharp (no 1x blurriness)
-
Substantial naming differences between the texture and .fnt files, which is not wrong, but a bit weird…
-
I can’t be entirely sure but there looks to be (some) similar y-offset problems with the demo fonts. For example, on demofont the interior lowercase all seem to be lifted.
(Why bmGlyph? Unlike Glyph Designer, (a) it has specific support for mobile packages, including Corona, in mind, and (b) it’s available for cheap through the App Store.)
Hi. I’ve got Glyph Designer and the demo version of bmglyph so I have been experimenting.
With respect to padding, I’ve yet to find anything that is anything other than 0,0,0,0. I’m not quite sure what you mean ?
BmGlyph - I tried your settings and yes, it does look terrible. The output from bmglyph (the small fonts) is awful though 
Viewing it in a image viewer it does look all blurry. If you have a font that looks okay on the .png but doesn’t work can you send it to me ?
I can only do it on 50 pt size mind. I found that simply calling the font bmgfont@4x or whatever worked fine, even when it was scaled down.
I don’t quite see how bmGlyph is going to work - it generates three different font file bmgfont.fnt bmgfont@2x.fnt and bmgfont@4x.fnt so there isn’t likely to be much in the way of auto detection.
You were right about the alignment. I think it’s right now - I made a font from straight Arial and it looks like it is matching up as it does in LibreOffice, at various scales, so I think it’s right - it’s certainly a lot closer than it was.
The font image name is part of the .fnt file, so it doesn’t matter what it is as long as its consistent.
Padding
Padding applies a border around every glyph. So a padding of two adds a 2px transparent gap around A, B, C, etc. This can be important sometimes because there are situations (especially if Corona is not using GL_NEAREST) where the sprites will bleed and the edge of one glyph ends up on another.
You can set the padding directly in bmGlyph. The only thing I’m not sure about is that it’s a single value (not 4) so not sure exactly what the .fnt translation of that number means, except perhaps -2,-2,2,2
bmglyph files
I don’t think you need to worry about the @2x/@4x .fnt files. TexturePacker does the same thing with .lua. AFAIK corona only needs the base file to calculate the differences, since internally what graphics.* does is use all numbers from 1x to calculate 4x.
Just checked my project, and the 1x file was also awful in my case. But I re-ran the publish and now it looks alright in the PNG file. Not great, but not super hazy. And I have another test that seems to look alright at all three. You can grab them here, temporarily. (They’re both the same font, one has no stroke) Still can’t get anything but 1x haze in the simulator, though.
Ah, right. I wasn’t quite sure what these things actually meant I’ll fix that today, that isn’t particularly difficult.
I think the problem with bmGlyph is it just produces smaller font files than GlyphDesigner does by default - I’m not sure there’s anything wrong with the code (except the bleeding issue you mention above) other than it’s trying to scale things up too much. If I run in 320 x 480 and pick iPad Retina that means a scale-up of 4x before you even do anything else.
This https://coronalabs.com/blog/2012/03/22/developing-for-ipad-retina-display/ should work though I haven’t tried it.
Have you ever managed to actually generate a padded font ? There’s a padding and bounding box option on bmGlyph but it doesn’t affect the padding setting irrespective of what it is set to. The Glyph Designer one does seem to work though.
sorry for bumping out of discussion, but does this library able to do than just animated moving text? like for example, a typewriting effect dialog that appears in RPGs? would love to try this when I have the time though
No problem. Yes it can (this is what Richard 9 wants). If you look at the main.lua file which is a placeholder for others comment out all except require(“main_roll”) and run it, it rolls out some text - this particular interpretation also allows ‘events’ in the text, in this case the speed changes (and it print ‘shake’ to the console). The file is some support classes (one does the roll out, one does the events/animation and one puts the whole thing together, then there is a sample class and showing how it works.
It’s a cheat though ; it is an ‘animation’ which progressively reveals the text. The whole text is always there, it’s just the bits that haven’t been revealed yet have an alpha of zero
can you explain how the animation work? dos it animate the bits of text one by one, or is it something else? Because i worry about the performance of the device, as sometimes animations can be quite heavy in Corona. But hell, I’ll even try this asap. this really intrigues me
At heart all if it is a display group with a collection of bitmaps, which are by default arranged in a line or multiple lines, you can left, centre and right justify them. This is their ‘normal’ state and to the system that is what they are. So if you animate them the anchor points don’t move (as opposed to if you use transition.to on it)
The animation is driven by the concept of modifiers. For each displayed character you can change specific features - position offset, scale and rotation, alpha pretty much to anything you like. The ‘modifier’ receives a table saying which character, word, line etc. it is on and the modifiers work out what to do. So if you want your third word to be twice as big your modifier would have something like.
if info.wordIndex == 3 then modifier.xScale = 2, modifier.yScale = 2 end
Something like the wobble modifier just sticks a few small random numbers in the modifier.
Animation is basically a time adjusted modifier. There are two values used for this, an elapsed time since the string was created, and a ‘position’ function which is a percentage of width when static, but when modified this moves along.
If you don’t animate the text but just shape it, the modifier is applied once and then nothing else happens, so there are no performance issues other than the time Corona takes to render the font bitmaps.
If you animate it, then at a given rate (you can change this) the bitmaps are continually re-modified, so you can then use the time features to make it move. This obviously has resource implications, because everything is repositioned and recalculated. If it was (say) used in an arcade game for the score it would be fine static - to the system it’s just more bitmap images - but animated might slow things down to much especially on low end Android hardware.
In general though it’s fine. I’ve got an ultra cheapie 7" tablet - the worst I could find - and it seems to cope fine.
So the roll out modifier is something like:
if info.elapsedTime/1000 \> info.index then modifier.alpha = 1 else modifier.alpha = 0 end
So every one second, the elapsed time reveals one more character (index is the character number it is enquiring about) after 1 second, index 1 is shown, after 2 seconds 1 and 2, after 3 seconds 1,2, and 3 etc. Modifiers can be functions (simpler) or classes (useful where you have state - e.g. the main_roll.lua file has a speed state).
You don’t have to use modifiers, you can just write things like:
b = display.newBitmapString("Hello world",160,240,"retroFont",42):setModifier("curve"):animate()
and it will create the string, and curve it and animate that curve. The built in named effects are just a few modifiers I’ve written, most of them are a couple of lines of code.
Note, this chaining approach is a shorthand for:
b = display.newBitmapString("Hello world",160,240,"retroFont",42) b:setModifier("curve") b:animate()
There is one down side, which I haven’t come up with an answer to yet. You can treat it exactly as a display.newGroup() object - it is one - except for the following problem:
If you animate a font, it adds an enterFrame listener so it can animate. This creates an external reference to the bitmap object, and I haven’t figured out how to autoRemove this listener.
You can remove the bitmap string just with bitmap:removeSelf() and it tidies up after itself, you can turn the animation off with bitmap:stop() and same thing happens, but Composer/Storyboard’s garbage collection doesn’t seem to have a finaliser.
So if you do purge an animated string this way, it will still be there (non visible) because of the enterFrame reference.
If you turn the animation off in the exit phase of the Scene managers, or remove the string, it works fine. If you don’t animate it it works fine, it’s just like any other graphic.
which means, even though i removed the text, the enter frame listener is still there, and probably (and will, in my opinion) cause something unexpected under Corona hood.
does removing the object clean entirely all listeners attached to it? As I understand, you also need to kill the listeners, and I don’t have any idea how to remove an enterFrame listener.
Quite splendid though. i’ll follow the progress updates. I’ll give feedback as soon as I able to use it. the library one is to use right, now the demo one?
It appears not. You don’t need to remove this listener though, just stop the animation with the :stop() method or remove the bitmap with :removeSelf().
The font-demo is usually slightly out of date ; the best one to use is the font-manager which has an assortment of simple demos that can be changed by editing the main.lua file.