Bitmap Font Converter

Posted on
  • In my DIY Gamer Project I needed the ability to show a score at the end. Having looked at the built in bitmap / vector fonts, these weren't really what I wanted. I wanted something that would fill the screen, so had a look into creating a bitmap font.

    There are some docs here on the subject, but it requires you to do some initial steps with some other software, and the code for the conversion seems to be a bit out of date aswell.

    So after figuring out how it all worked, I thought I'd throw a simple web page together to help do the conversion for you, so here it is.

    Simply upload a local bitmap image file containing the graphics charset (in ASCII code order as black text on a white background), tell it what the first character is (just type the character, no need to know the ASCII code), tell it the width / height of the character bounds and whether it is a fixed width font, or whether it should calculate the smallest possible width for each character then hit the "Convert" button.

    It'll then generate the code you need to drop into your Espruino sketch and you hey-presto, you have your custom bitmap font ready to use.

    Hope it helps some folk.


    1 Attachment

    • Capture.PNG
  • Brilliant - thanks! Would you be happy to add it to the EspruinoDocs repo? A bit like:­no/EspruinoDocs/master/tasks/File%20Conv­

    Given the recent addition of bitmaps, I wonder whether we couldn't have an online bitmap editor ;)

  • Absolutely great !!!

  • @Gordon you mean share the source code? I'd be happy to, although it is written in .NET (not that it needs to be, but it's what I know).

    I was going to do a full on font editor, but thought I'd do the simplest thing first :)

    Question, how performant is rendering a font? I was wondering about using custom bitmaps in a font for things like splash screens on my DIY gamer, saving having to do a bunch of fillRects. It could also be used as a pseudo level builder for certain games (a 100 x 8 character sort of thing).


  • Ahh! I didn't realise - I just assumed it was all done client-side :) I wouldn't worry then.

    The font rendering isn't too slow - however it's not amazing. Personally I'd use the new Graphics.drawImage stuff for splash screens - that can store 2 bit colour too, which could be handy for your display.

  • @gordon I may convert it to JS at some point, but like I say, I just wanted to throw something together quickly.

    RE drawImage, is there any docs / examples for this yet?

  • Great stuff, thank you.

    That reminds me, I need to raise an issue with drawLine not working correctly (didn't always draw a full line to the coordinates supplied).

  • Interesting - there are some test cases for graphics in the Espruino repo - maybe you could modify one of those to make it exhibit the problem?

  • @gordon not sure if I'm missing something, but how could I define a really wide image to render (I'm thinking platform game level graphic)? In the examples here­/blob/master/tasks/, it assumes the image is 8 bits wide, and given we only have up to unit32array, does that mean the max image width is 32 pixels?

    one other thing, there is an issue with that demo code, if you set some pixels to '1' in the bottom row, they don't render (i'm having to fudge it by adding an extra '0' row afterwards).

  • Ahh. I'll file a bug for that - the bottom row will be something pretty simple.

    It won't matter whether the image fits into a Uint32 or not - it can be any width at all. If it overflows the first byte it just moves into the next :) In the example on loading an image in, you can use whatever size you want...

  • I used this great tool online and made this new font. The converter works like a charm... but it puts the wrong value for firstChar into the call of setFontCustom (it should be the same value entered above).

  • I totally missed the tool - hope you don't mind but I just linked it from the font page...

  • is the Online Converer still working? i got a server error using it

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

Bitmap Font Converter

Posted by Avatar for mattbrailsford @mattbrailsford