Wolfsbane

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

Recommended Posts

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.

image.thumb.png.3942b62e40bbd2ab5566729dea7a46df.png

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.

image.thumb.png.0fde7e4d5792f984bb216a80a08c1837.png

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.

image.png.22f1dd4e887b5c4d6745d8883671d011.png

 

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

arial.fnt

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

image.png.233f3671a17edbd94aa86347b79a0785.png

 

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,

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

image.thumb.png.c298e41f94b28bca835b3a8adf285fca.png

 

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:

image.thumb.png.cc5c5c6417a119b2de04983aaf37b72d.png

image.png.1950121a9048f0e8f92bd160943f15b7.png

 

 

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()

image.png.e3fd45fb8dd8806e8ecca1fb55e958f0.png

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.