voycawojka / calligro

Online bitmap font creator

Calligro

Online bitmap font creator.

Available at calligro.ideasalmanac.com

Desktop version is hosted on itch.io

Calligro generates bitmap fonts in the AngelCode's BMFont format. It can be used to convert a TTF but unlike the original BMFont and other tools it can also generate bitmap fonts from custom images.

The workflow is as follows:

• generate a Calligro template (which is a .png image)
• draw your characters on the template in any graphics editor (Photoshop, Gimp, Aseprite, anything else)
• upload the filled template back to Calligro and download a bitmap font

Everything is calculated on the client side. No files are sent or stored on the server (we use gh pages anyway).

There is also an offline version available for Windows and Linux. It has the same core features but is a little bit more convenient to use. It also detects system fonts better.

Samples

The BMFont format has existed for a while and a lot of game frameworks, libraries and engines support it out of the box. Some examples and more details on compatibility can be found in the samples/ directory.

Use case

Calligro is useful when you need to draw a custom font stored as a spritesheet. Pixelart font would be a good use.

If you only want to convert an existing truetype font into a bitmap font, you can also try one of those tools instead:

• AngelCode's BMFont
• Hiero
• ShoeBox
• Littera (requires Flash)

Contributing

If you'd like to contribute: thanks!

This is a regular create-react-app project in TypeScript using npm (not yarn) so:

# install dependencies and start a dev server with hot reloading
npm install
npm start

# then optionally start the desktop app
cd electron_resources
npm install
cd ..
npm run electron:dev

# run unit tests
npm run test

Our actions use Node 14.

Production builds

Web

Create the production web build in the build/ directory:

npm run build

Desktop

Create the production destop build for Windows and Linux in the electron_build/ directory:

npm run electron:build

Note this command only works on Windows.

calligro's Issues

Prefill from vector font

Is your feature request related to a problem? Please describe.
Right now a font has to be created from scratch

Describe the solution you'd like
It'd be helpful to be able to prefill the template based on an existing vector

Additional context
It would also make Calligro directly compete with other bmfont tools which focus on this functionality alone.

Hiero Link is Broken

The website (and README) links to here: https://github.com/libgdx/libgdx/wiki/Hiero
But the libGDX wiki was moved to libgdx.com so the link is broken.
The new link is here: https://libgdx.com/wiki/tools/hiero

Update info popup not working

Describe the bug
A popup with information about a new version should appear when using an old one. It doesn't show up at all.

To Reproduce
Steps to reproduce the behavior:

1. Install desktop version
2. Switch to version 1.0.0
3. Open the app

Expected behavior
A popup with information about version 1.0.1 appears

Environment:
Desktop, Windows (potentially Linux too)

New UI for per character settings

Is your feature request related to a problem? Please describe.
Step1CharacterList component is slow. Currently we update it on character set blur instead of change as a workaround. Otherwise it's very noticeable while creating a custom preset.

React profiler:

It's also inconvenient to scroll to the appropriate character to adjust its settings.

Describe the solution you'd like
Redesign the character list to only include characters that have non default settings.

Support common graphics editors formats

Is your feature request related to a problem? Please describe.
Calligro can only generate png templates which are not convenient to edit.

Describe the solution you'd like
Additionally generate templates with layers compatible with all or any of:

• gimp
• photoshop
• aseprite

Cursor moves to the end when creating a custom character set

Describe the bug
When editing a characters preset the cursor moves to the end of the input after first edit.

To Reproduce
Steps to reproduce the behavior:

1. Open Step 1
2. Choose a preset, for example Basic Latin
3. Add or remove a character in the middle of the text
4. The cursor moves to the end of the input

Expected behavior
The cursor stays in place like it should when editing text

Environment:
Browser, probably also desktop

Generated font requires a manual workaround to work with raylib

Describe the bug
Generated font requires a manual workaround to work with raylib

To Reproduce
Steps to reproduce the behavior:

1. Generate a font in the TXT format
2. Use it in raylib (see example in samples/)
3. Program crashes

Expected behavior
Font is displayed

Workaround
A workaround is described in the raylib sample. Maybe it can be incorporated in generation without breaking compatibility with other frameworks?

Generated .PNG in template is not pixel-perfect

Describe the bug
I'm trying to make a pixel-perfect font for use in Aseprite, in this case I specifically made every character 8 pixels wide and 12 pixels tall. However, the generated template .PNG in the template is not pixel-perfect, and it is hard to tell where those 8x12 boundaries are.

To Reproduce
Steps to reproduce the behavior:

1. Make a font template with very low dimensions, e.g; 8x8, or 8x12 if you want what I specifically did.
2. Download the template and view the generated .PNG up close, it should be anti-aliased and hard to see the boundaries.

Expected behavior
Crystal clear borders that have no anti-aliasing or blurring, where the borders are nice and clean and easy to see for making pixel-art fonts.

Screenshots

Environment:
I did this in the online browser edition.

Love 2D and Raylib examples

Add Love 2D and Raylib example

Glyph cells in the template image are 2x2 pixels smaller than stated

First, thanks for a great piece of software!

I'm adapting a preexisting bitmap font. I painstakingly measured every single glyph and typed the dimensions into the boxes, as per the instructions. The template image that was generated, however, included the yellow border in those measurements, ultimately cropping every cell by 1 pixel.

Also, the spaces are rendered as boxes, but that's a separate issue, I guess.

Binary bmfont format

Is your feature request related to a problem? Please describe.
Bmfont standard describes a binary version of the format which calligro doesn't support.

Describe the solution you'd like
Support the binary version.

Changing size settings have no effect on repeated downloads

Describe the bug
Changing size settings after download doesn't affect new downloads.

To Reproduce

1. Configure any template in Step 1
2. Download it
3. Change default character size (and possibly other settings [?])
4. Download it
5. New template is the same as the previous one

Expected behavior
New template should be different size

Environment:
Browser, possibly also desktop

Separate a landing page

Is your feature request related to a problem? Please describe.
The UI is too dense

Describe the solution you'd like
A lot of information can be taken out from the core app and moved to a landing page of some kind