Possible Bug with .fnt files from Hiero [Marked as resolved]

[Wolfsbane]

Hi Team,

Quick post before I sign off for the night.

I spent a little time trying to add a .fnt file created with Hiero: https://libgdx.badlogicgames.com/tools.html 

I ran into this issue: It would fail on load.

I did a little digging into the files, and the source code. The file generated by Hiero looks like this: Note the white spaces highlighted by the blue arrows.

I tried to do a quick search on the .fnt file format definition. I didn't find any good source (if you know one, please share!).

As a temporary fix, I went into loader.js->parseFont() method, and at approximately line 357, I added:

text[i] = text[i].replace(/\s\s+/g, ' ').trim();

This strips out the the multiple spaces, and also trims the end whitespace, before it tries to parse each elements. Font now correctly loads.

 

As I mentioned, I couldn't find any resource defining what a .fnt file should look like. It's possible that Hiero is the one that's wrong here. Something to look at tomorrow if I find time.

Edit: Sample fonts attached.

 

arial.fnt

[enpu]

Good find. I don't think there is any official specs for fnt files. Most bitmap font generators can create font files in at least XML and BMFont format.

Seems that some generators include whitespaces in the BMFont format, and some doesn't. Will push that fix, thanks!

[Wolfsbane]

Yeah, legacy files tend to have 101 ways to implement them. I'm not really a GFX guy. But when I googled .fnt, virtually all the links said something like "it's been superseded by .TTF or OTF. Does Panda load them, too, or just .fnt? 

Will push that fix, thanks!

Great, thanks! Just curious.. What's your process for controlling the Engine source? I just checked the GitHub project, it seems that we can make commits to the Dev branch, too? Then you review/push to main as appropriate?

I haven't contributed to open-source projects before, but I don't mind checking in small things like this if I find. 

[enpu]

Currently Panda only supports bitmap fonts.

Yes you can fork the panda-engine project, make changes to dev branch, and then send pull request to me. I will then review it and merge to the official repo.

https://github.com/ekelokorpi/panda-engine/blob/master/CONTRIBUTING.md

[Wolfsbane]

Hi @enpu , just a little followup on this one:

Some fonts produced by Hiero look like this:

info face="Arial Narrow" size=32 bold=0[...etc]

So the face name is in quotes, and it contains a space. This doesn't work, as Panda's loader splits the line on spaces.

As a temporary fix, inside loader.js, at around line 360, after we trim the line data, I used a custom Regex to split the string. E.g.

if (text[i].length === 0) continue; // Skip empty lines
text[i] = text[i].replace(/\s\s+/g, ' ').trim();
var lineData = text[i].match(/(?:[^\s"]+|"[^"]*")+/g); //new line.
var name = lineData.shift();

(Regex courtesy of kch).

A quick test: Works o.k..

 

Potential issue: If the user is loading a font which contains multiple spaces in the font face, then, although panda won't break (it'll still load it) the space trimming Regex is going to strip out the extra space as it loads it.. this may mean they will expect to do something like this:

text.setFont("SomeName     EndName");
//won't work.. it'll be loaded as "SomeName EndName"

But as far as I'm concerned, that's fine. (If it contains that many spaces, it may as well be considered a bugged file..!)

Cheers,

 

[pstrejczek]

I have encountered this problem a few days ago .. but I have edited the .fnt file and simply changed the font name

[Wolfsbane]

Yeah, I was tempted to do that when I saw all the different Regex options for the fix, haha. But one of the best parts of Panda is that the engine is open-source, so I'm happy to help enpu out if I can clock a bug or two.

[enpu]

Good find! Just pushed that fix to dev branch. Thanks @Wolfsbane

[Wolfsbane]

Hi @enpu

Quick post before bed.. a little more fun with fonts! I think I have found another (possible?) bug with either the way panda does the .fnt's, or, with bloody Heiro being finicky again.

I'll attach   a sample project that displays the error. But basically, when trying to do a newline character, it's bugging out.See attached screenshot (it bugs out differently for each different font). One ends up looking a bit more terrible than the other.

 

This is because each of these fonts actually have a new line character defined: One as an actual char (the square looking one) and the other.. well, just it's defined in the file, but all values are zero. Screenshot, for convenience:

 

 

Now: we can just remove these definitions  from the .fnt file, and the Text will display fine.

Alternatively, we can add this check into text.js->_generateText()

..to skip trying to add 'newline' to the texture.

While it's possible that maybe some people want to have some custom 'new line' character texture... I think this is unlikely, so this fix should be satisfactory.

Sound good?

sokobanFontError.zip

[enpu]

Hi @Wolfsbane

Sorry for my late reply on this one. Thanks for finding out the bug and suggesting a fix for it, really appreciate it. I have now pushed it on to the develop branch!