Loading Custom Fonts

[CaseyB]

What tool are you using to create your bitmap fonts? I found one that creates the png and the fnt file but the fnt file is just xml whereas the ones in the examples folder are binary. I tried loading the one I made and I get an error that says: ### Error: Invalid BMF header but I've not been able to find any information online about what a BMF header is.

[andycarle]

@CaseyB We typically use a tool called Glyph Designer. Check out the Creating fonts for applications built on the Moddable SDK document for more details.

 - Andy

[CaseyB]

Thanks for the info. Just an update in case anyone else has the same question. I found an open-source bitmap font maker called FontBuilder and I wrote a little tool that translates the FontBuilder output into the BMFont format. You can find that on my Bitbucket

[andycarle]

@CaseyB Very interesting... Out of curiosity, are you building FontBuilder from source with qmake? Or did you find a source for updated FontBuilder binaries? I'd love to be able to point people to a free font tool, but asking everyone to get a Qt environment up and running for it is probably too much to ask. :)

[CaseyB]

I just pulled the most recent release. It's old but still worked on my Mac.

[andycarle]

Ah, I see. I was trying out the Windows release of that same version, which does not have Sparrow output support.

[wilberforce]

@andycarle
I found this one, targets for win/lin:
https://github.com/vladimirgamalyan/fontbm

in windows I'm using:

F:\fontbm>fontbm --font-file C:\Windows\Fonts\Arial.ttf --output arial-regular-32 --chars-file chars.txt --color 0,0,0 --font-size 32--texture-height 96 --data-format bin

chars.txt:

°0123456789.:

This allows the wanted chars to be added to a file.

[phoddie]

Hey, that looks great. Thank you!

We'll have to give it a try and update the docs. It might also help solve a problem with an upcoming project we're working on.....

[wilberforce]

1. The png file generated gets a paging number that in our case needs to be removed, e.g.:
   arial-regular-32_0.png

https://github.com/vladimirgamalyan/fontbm/blob/master/src/App.cpp#L169

2. The sizing defaults to 512x512 so the final png is not cropped to the minimal size - so the final png has extra transparency that makes the png slightly larger - I'm not sure if thus means the final .bf4 file is larger or not.

If this can be make to compile on the mac, then you'll have a cross platform tool!

[phoddie]

The lack of a Mac version is definitely a headache. They have a Linux build so Mac shouldn't be so bad.

The image dimensions don't matter when using compressed fonts (which is the default).

[andycarle]

@wilberforce That's a great find—thank you for the pointer!

@phoddie For what it's worth, I was able to get fontbm building and running on macOS with no trouble. On a mac that is already set up for our ESP32 builds (i.e. has a modern CMake and Homebrew installed) you just need to:

brew install freetype
git clone https://github.com/vladimirgamalyan/fontbm.git
cd fontbm
cmake .
make

[wilberforce]

Excellant - so we have a cross platform font creation tool!

[phoddie]

So it seems! I was able to build and run following @andycarle's instructions. I haven't tried the output yet in a project, but it did work for you.

The glyphs are very tightly packed. That should be OK, but I want to check as it could easily uncover a (real) edge case,

There's no option to have the tool choose an optimal texture size. For compressed fonts in the Moddable SDK that doesn't matter since the bitmap isn't deployed. That's the usual case. For uncompressed fonts it means a little bit of manual work to find optimal dimensions.

[wilberforce]

Perhaps we could add a flag that clips to the bounding box so that the png is as small as it can be. Worst case run through another external tool.

[vladimirgamalyan]

Hi guys!
I eventually added some new options to fontbm which may be useful for you:
--texture-name-suffix none to remove paging number from filenames
--texture-crop-width and --texture-crop-height to crop output textures
--texture-size to set allowed texture size list

I don't know if this is needed yet, but thanks anyway for the ideas!