Loading news...
Utility Toolbox

Godot Bitmap Font Editor

Utility Toolbox - Godot tool

Godot Bitmap Font Editor

This takes a font file and turns every character in it into the grid of on and off pixels that a Godot LED or dot matrix display needs. You can then draw on the grid yourself to fix anything that did not come out right and copy the finished GDScript straight into your project. It all runs in your browser and it is completely free.

Godot Runs in browser
What it is for

I made this while I was building a working LED platform board for The Empty Halls. A board like the ones you find in the London underground. I found the best way to have custom fonts was using a font atlas. In GDScript that ends up as a match statement where each character returns a list of row values and a width.

"A": return [[0x00, 0x0E, 0x11, 0x11, 0x1F, 0x11, 0x11], 6]

Each number in that list is one row of the character and each bit of that number is one pixel across, with bit 0 being the leftmost column. I started with a very basic python tool that took a font file and generated that match statement for me, but it was not perfect and I had to go in and fix a lot of the characters by hand.

How it works
  1. Set up the grid Pick how many rows tall your display is and which row you want the letters to sit on. You can change both later without losing anything you have already done.
  2. Import a font or paste what you have Load in a .ttf, .otf, .woff or .woff2 and every character gets drawn onto the grid for you. If you already have a table in GDScript you can paste that in instead and carry on from there.
  3. Tidy up the awkward ones Small text never converts perfectly so you will probably need to fix a few characters. Click or drag on the grid to turn pixels on and off, nudge a character about, change its width, or flip and invert the whole set at once.
  4. Copy it into Godot Export writes out the whole _get_char() function for you, ready to paste into your script or save as a .gd file.
The tool

Nothing you load here gets uploaded anywhere. Your font file is read and converted inside your own browser, and the characters you end up with are saved in your browser's local storage so that refreshing the page does not lose your work. Clear everything wipes that if you would rather it did not stick around.

Paste in the match c: cases from a _get_char() function you already have, or import a font file if you are starting from scratch.

No characters loaded yet

Import a font file

Characters to import
Font size compared to the grid height
How bright a pixel has to be to count
Move the characters up or down the grid
Blank columns added after each character
Preview
Choose a font file to see a preview
Importing replaces any characters you already have with the same name.
Notes

Rows are stored as 32 bit integers so a character can be at most 32 pixels wide and the grid at most 32 rows tall. Anything sitting past a character's width gets stripped out when you export, so what you see on the grid is exactly what ends up in the atlas.

Fonts really start to fall apart at small pixel sizes. Thin strokes disappear completely and round letters go lumpy. If the whole set looks off then it is usually worth nudging the size or threshold sliders before you start editing anything by hand, but if it is only a few characters that came out wrong it may be quicker to just redraw them.

Licences & Credits