Looking for feedback/suggestions on my free bitmap font library (bit like TextCandy ...)

Solar2D General Questions/Discussion
#101

Just for information ; thinking about what Richard and others said I am completely reengineering it. However, this is a  minimal change reengineering, not a complete rewrite with different calls !

The Font thing suffers a bit because it’s the first Corona thing I did of any consequence :slight_smile:

However it will be pretty much identical, in fact slightly easier. If anyone is using the old one it will be pretty much the same as far as possible. (which is most of it) - it will work the same way, do the same things etc. but be cleaner and more robust.

The main differences are ; this is a lot more robust and well constructed, but also the object is now a display group sub class, so it fits much better into Corona. It’s a view group so it will behave like one (except that anchorChildren will not work if you animate because the enclosing rectangle will cause it to jerk about a lot !)

It allows stuff like this - I will put display.newBitmapFont() back and hopefully I can make anchorX, anchorY and text (the most problematic) work as properties rather than methods (so you can do bms.text = “Hello world !”) - this partly depends on how I can wire it into Corona :slight_smile:

This is actually now working, below :slight_smile:

bms = fm.BitmapString:new("demofont",100) -- will change to display.newBitmapText() bms:setText("Hello world\nAgain.\nLine 3") -- hopefully bms.text = bms.x = 160 bms.y = 240 bms.xScale = 0.5 bms.yScale = 0.5 bms.rotation = 10
#102

Hey PSR,

So I’m taking a closer look at the old code, and a few things puzzle me:

  1. Are you doing auto-linebreaks? (I saw “if code == 10 or code == 13 then”)

  2. How are you interpreting control codes? (i.e.: colour tint)

I’m tempted to go with your font library but to be honest I need a much more extensible control code system (I have to support things like {shake}, {fast}, {slow} and {icon}. My basic implementation uses a string processor to record code instructions and then return a clean string, so I’m curious how your method works. (I admit I have trouble seeing through the unicode implementation that may be obscuring the method)

EDIT: I can provide my processor code; but mostly interested in your approach because as it is I’m not sure our approaches are compatible?

#103

Yes ; it does line breaks by having \r or \n (13 or 10) in the code. The new branch allows you to control the justification as well.

Much clearer too ; the previous one suffers from being experimental and expanded - the newer one is much more robust, and it also decorates a group to get its functionality, so it behaves almost exactly as a group does (the one difference is that it has a runtime listener to do the animation if you turn the animation on).

The control system is only for tinting (e.g. {red} is red {1,0,0} is also red. I’m a bit puzzled by the {shake} {fast} {slow} thing - do you mean you want to be able to specify these things purely in text for the whole thing or that  you want different effects and speeds at different points in the string ?

e.g.

This {shake}{fast} shakes {off} this {wobble}{slow} wobbles {off}

This is a bit more complicated, not much but a bit.  Bit like extending the tints so you could change them in code. 

Really depends how much flexibility you want, writing something so you could do

{shake}this shakes  

and the whole thing shakes via some sort of scheme like

BitmapString:addInlineCommand("shake",function(bitmapString) bitmapString:setModifier(\<some such\>) end)

is much easier but this would apply shake to the whole thing, it would be a way of putting API calls into the string.

TBH I didn’t perceive it as for anything much more than some pretty text displays for scores, HUDs, title pages, high score tables and so on. Bit like the old Amiga demos. I do sometimes think the functionality is a bit excessive anyway, it can do some eye-exploding things :slight_smile:

The other thing would be to subclass the BitmapString;setText() method so that it extracted the various requirements and write a modifier that worked on that data.

Basically - there is a group containing the bitmap characters - this is mirrored in classes for the strings and characters. The basic implementation just allows ordinary text, any size, static, basic tinting. But the modifiers allow you to butcher the scaling/position/rotating/tinting of each character on the fly

#104

I like the ease of use and the system (so far) seems to do what it says it will do.

Great work!

Cheers.

#105
  • Not really aware of the use of \r , and typically \n just line breaks where you want it, so wasn’t sure what the 13/10 statement meant. Word count per line? Character code?
     
  • {fast}, {slow}, {mid} are speed presets. When I wrote the old typer() library on the code repository, the idea was eventually that you could change the speed at which words or characters print out, rather than just applying a speed to the entire string. Useful for both RPGs and narrative adventure games (ex: Phoenix Wright)
     
  • {shake} would call a (seperated) screen shake function. Useful for moments where someone shouts or something ridiculous happens. Abused quite often in narrative adventures.
     
  • {icon} calls ({item}, {weapon}, etc.) would just call special characters or images that take the space of a single font character. 

Anyway, what I’m trying to do is understand where your code interprets these control codes and records or acts upon them. ie: in my instruction recorder function, I use string.gsub to search out {} placements, record them and their position, and then return the cleaned string.

#106

When the text is set (setText() mostly) it parses out anything in between {} (it is possible to change these delimiters) and tries to convert it to a named colour or a r,g,b value - {red} or {1,0,0.5}.

I can see a fairly simple way of doing it. If it comes across {xxxx} - where x is alphanumeric or a comma -

  1. Call self:extensionCommand(xxxx) (used for commands)

  2. Call self:extensionImage(xxxx) if the above returns nil, if this returns a display object use this as a ‘font character’.

  3. if *that* returns nil, look to see if it is a known colour or a numeric RGB value, and if it is tint accordingly.

  4. Cause an error if that fails.

What do you think ? Could just have a dummy extensionCommand() and extensionImage() which could be overridden.

(I must see if the class system works. The ‘problem’ is that the BitmapString is not technically a class, it is an object decorated with the BitmapString methods. I think it will work if you subclass it :slight_smile: )

#107

I guess…your code structure is completely alien to me, so it’s hard to say?

My structure worked like this:

-- Use a Lua table to define control codes local codes = {] codes[1] = { code="red", mode="color", details={1,0,1} } codes[2] = { code="fast", mode="speed", details={ speed=50 } } -- Expose this somewhere coder-friendly

-- Use a converter function to process the string local function convertString( str ) -- use string.gsub to return all instances of {} and start/end position -- use an offset to count where that point will be after the code is removed -- store those instances in an instruction table -- at the end string.gsub returns the cleaned string. -- this is all done in \<10 lines, actually more chars spent talking about it... return new\_str, instructions end

Finally, whenever you start displaying each character of the string, consult the instruction table to see if anything should be applied.  Actions (functions) are assigned to the same functions as the ‘mode’ would indicate. (self.color, self.shake, etc.)

It sounds like in your OOP style, you’re instead:

  1. calling a function to register (add) a command, if it’s special

  2. using the special case “extensionImage” for image characters

  3. falling back on assuming an RGB color.

It’s not bad, and certainly would work for your setup, but I’ll admit it seems a little special-case focused?

#108

It’s not a dissimilar idea. As I start displaying, or refreshing each character of the string (it’s continually refreshed to animate) the system asks the modifier class/function, “what do you want me to do with this line ?” along with a pile of other information. The text modifiers “wobble” and so on, are just classes/functions that do standard things stored in a library.

There’s really two separate issues. The system uses images as font bitmaps already, but it is about having alternatives to that so you can place any arbitrary image in the structure instead of requiring it from the Font. The BitmapFont has a factory method which creates images on demand. I just need to generalise the Factory method out a bit. (All these comments refer to the reengineered v2)

Then there’s the other stuff ; the library is about manipulating and animating text fonts - this it can do - this modifier reveals the text a bit at a time (and if you put other images in there, it will do the same thing) - as time elapses it reveals more and more characters and the characters alpha makes them become visible. 

bms:setModifier(function(modifier,cPos,infoTable) local pos = math.floor(infoTable.elapsed / 2) modifier.alpha = 0 if infoTable.totalIndex \< math.floor(pos/100) then modifier.alpha = 1 elseif infoTable.totalIndex == math.floor(pos/100) then modifier.alpha = pos % 100 / 100 end end)

You can easily twiddle with this without changing the core so, for example to make it rotate the currently waiting character just put in.

modifier.rotation = pos % 100 \* 360 / 100

Executing arbitrary code probably belongs separately. Something like {shake} probably needs to be separated out, because it’s nothing to do with the Text per se, it’s the whole screen that shakes. Stuff like {fast} and {slow} is really just a synonym for different modifiers (or instances of a modifier class) so putting {fast} in the text does much the same as

myString:setModifier(RollOutTextModifier:new(3))

and to change the speed just change the constructor parameter.

#109

Cool. I guess I’d need to see some example documentation understand that last line there - :setModifier() makes sense, but the call inside just appears to be gobbledygook to me. My code is pretty corona specific because I don’t have any sort of C background. 

The point of having {fast} and {shake} is that there may be times in text where you need to change speed or perform an action while the text is printing. So rather than just apply speed to everything, just make this word appear fast. Only shake when somebody screams, etc. So maybe that’s what you’re saying?

The animation stuff is interesting, though I only need to just turn on characters as time progresses (.isVisible or alpha=1, whichever), so I suspect I would have to dumb that function down a bit.

Regarding images, I think the safest way might be to just have some kind of method where people can reference in their own display calls. For example, my projects use a custom imageSheet manager, so I can already, say, call display.visSprite(“dude”) and have it automatically find the right frame from the right sheet without any other trouble. Just an idea, though.

(You can take all of my blabbing as me hoping I can use this instead of my own control code structure…really would rather not have to build a unicode framework! ;) )

Anyway if everything you’ve said is mostly possible I’ll take another look at your latest code.

#110 
myString:setModifier(RollOutTextModifier:new(3))

Creates a new RollOutTextModifier object with a speed of 3. It’s the same as new RollOutTextModifier(3) in Java, except that lua doesn’t support this syntax. It is then used as the modifier for myString, 

Having given it some thought, the library is not about actions that take place in mid strings - the alternate images fit the model, but the shaking and speed changing doesn’t.

The best way to do it , IMO, is to have the alternate images - icons or whatever - as part of the library but implement the roll out text with events as a modifier class which has an event queue which it fires as time goes on.

So basically the text would be scanned for things like {fast} and {slow} and the like at the start, these would be pulled out of the text and added to the event queue “when the 10th character appears, do this”. As the animation goes on, revealing the text, this would call code to process these events accordingly, thus you could arbitrarily execute any code you like as the text appears.

This way the core purpose of the library, rendering animated bitmaps stays the same, but it can do what you want.

I will do a mock up of the sort of thing I have in mind (the event queue) so you can see what I mean. I’ll let you know when it’s done, probably be tomorrow.

#111

Your plan (to pre-queue commands) sounds identical to my system, except that I use gsub to search for anything in {} rather than specific things. To save time, here’s what it looks like. You could easily adapt this to your structure with a few modifications, I think…

function convert(str) local steps = {} local offset = 0 local function iterator( start, code, finish ) steps[#steps+1] = { code=code, start=start-offset } offset = offset + (finish-start) return "" end local result = string.gsub( str, "()(%b{})()", iterator) return result, steps end
#112

There’s a demo of the pre-queue version on https://github.com/autismuk/Font-Manager/tree/revamped-version - it doesn’t have the icon characters (yet). It allows speed changes of the ‘roll out’ - and does a shake event, even though it only actually prints “Shake” to the console :slight_smile:

#113

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

#114

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.

crab.png

#115

This looks really great; nice to see people making paid library alternatives :slight_smile:

I have a couple of suggestions…

  1. 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
#116

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 :slight_smile:

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 :slight_smile: 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 :slight_smile:

#117

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.

  1. fontmanager is misspelled at the beginning of fontmanager.lua :wink:

  2. 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…

  3. 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”)

  1. In your doc.html, you say “Curly Brackets can”. That’s the entire paragraph.

  2. You say to run main.lua in the simulator but that (intentionally) has no code to run with font manager.

  3. Where is the list of sample modifiers? Just seems pretty intimidating from what little description I see of how to roll that out.

  4. 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!)

#118

Not sure if any upgrades have been done here since June, but I did notice that the github version fires a warning if you don’t have @2x/@4x files now?

Guess I need to dig in and find a way to disable that…(GL_NEAREST doesn’t require different size assets; it’s strictly optional and silently just does Corona scaling otherwise)

#119

I have merged Ingemar’s changes to use config.lua to use imageSuffix - I added an or {} so that it still works if there isn’t an Image suffix. AFAICS the changes work fine.

#120

Hi. Thanks for that. Some specific comments:

  1. 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 :slight_smile:

  1. I see your point. They are prototypes, but Corona just calls them ‘objects’ generally.

  2. 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.

  3. 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. 

  4. 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 :slight_smile: 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.