Bitmap Font Online Editor

Bitmap Font Online Editor (joshuahxh.com)

When I wrote my own watch face app, I need to pack a few PNG icons into a custom font. Instead of manually packing them with photoshop, I wrote a few scripts to automatically add them into existing bitmap font files, generated from BMFont.

Today I published it online and maybe it will help someone who needs it.

https://joshuahxh.com/bitmap-font-editor/

Travis.ConnectIQ over 3 years ago

Nice.

I hate to be a party pooper, but BMFont can already do this for you. I'm not sure how to add icons via the application, but you can do it pretty easily using the a text editor to modify the .bmfc file. You just need to add icon= entries for your icons like this..

# imported icon images
icon="../doc/plus/00.png",48,0,0,0
icon="../doc/plus/11.png",49,0,0,0
icon="../doc/plus/22.png",50,0,0,0
icon="../doc/plus/33.png",51,0,0,0
icon="../doc/plus/44.png",52,0,0,0
icon="../doc/plus/55.png",53,0,0,0
icon="../doc/plus/66.png",54,0,0,0
icon="../doc/plus/77.png",55,0,0,0
icon="../doc/plus/88.png",56,0,0,0
icon="../doc/plus/99.png",57,0,0,0

I know the first number is the code point for the character to use. I think the other fields are x offset, y offset and advance, but those fields can be omitted.

joshuahxh over 3 years ago in reply to Travis.ConnectIQ

Good to know. At least I don't need to borrow my kid's game PC to install BMFont. ;-) This can be done at any computer with latest browser installed.

PUFFOLINO over 2 years ago in reply to joshuahxh

Not online and only for windows - the ScreenyFont Editor.

With that portable tool you can change single characters of a font easily - no matter if you just want to change the preferences or edit the bitmap directly. The negative point is the documentation: there is none ,,, so you need to play around a little bit with an existing font (please make a copy of the font before that) and take a look into the help pages by pressing F1.

8636571 4 months ago

Great job! Tried to find a tool for mac but it was not easy. Was very easy to convert google font using your tool. Perhabs, it worth mentioning a new link: https://garmin.watchfacebuilder.com/bitmap-font-online-generator/