Page 1 of 1

Convert a pixel-perfect ImageFont to a TrueType font?

Posted: Mon May 20, 2019 7:14 pm
by V360
Does anyone know a way to convert an ImageFont to a TrueType font? I've tried FontStruct and FontForge, but neither of them give me any good options other than "recreate the entire thing".

Re: Convert a pixel-perfect ImageFont to a TrueType font?

Posted: Mon May 20, 2019 8:32 pm
by zorg
Why do you need to do the conversion?

Re: Convert a pixel-perfect ImageFont to a TrueType font?

Posted: Tue May 21, 2019 4:10 pm
by pgimeno
What's an ImageFont, anyway? The Google references I can find are a Python library with that name.

If you just mean an image-based font, I've seen such conversions done with a couple fonts (ZX81 and Frontier). I suspect they were not done with an automatic program, but I can't tell for sure.

Re: Convert a pixel-perfect ImageFont to a TrueType font?

Posted: Tue May 21, 2019 4:16 pm
by grump
pgimeno wrote: Tue May 21, 2019 4:10 pm What's an ImageFont, anyway?
https://love2d.org/wiki/ImageFontFormat

Re: Convert a pixel-perfect ImageFont to a TrueType font?

Posted: Tue May 21, 2019 4:44 pm
by pgimeno
Gah, should have looked that up first. Thanks.

Re: Convert a pixel-perfect ImageFont to a TrueType font?

Posted: Wed May 22, 2019 3:41 am
by raidho36
There are online font generators that can create fonts from images. So, you can try generating a font image from your image font, and then feed it to one of those font generators.

Re: Convert a pixel-perfect ImageFont to a TrueType font?

Posted: Wed Jun 05, 2019 3:06 am
by V360
2020 Edit: Seems Fontcutter is down. You should use this recently-released tool instead. Much easier to use.

TL;DR: http://fontcutter.fbksoft.com/ is useful, mess around with values in the resulting .fnt file using this, everything before the "Binary file layout" header

Unfinished garbage tutorial draft below:

Whoops, I abandoned this thread after making it. Good news though: I found a basic workflow that's pretty good! Gonna write this blog-style, starting from the top.

So, a lot of game engines support "Bitmap Fonts", which are made up of an image file and a .fnt file. Bitmap fonts are typically made from existing fonts you have installed to your font folder, generated using this tool. However, there is a way to make your own Bitmap font. And no, it won't force you to waste hours recreating it in FontForge. (I didn't know you can't overlap points until I went to export it... :cry:)

There's an open-source tool called "Fontcutter". It's a bit old, and it has quite a few bugs, but it's a great starting point. It takes in image files that are somewhat like the Love2D image fonts, and slices them and outputs a .fnt file. I say "somewhat like" because there's a catch: you can't just throw in a normal Love2D and expect it to immediately work. There's two catches actually. First: the program only supports monospace fonts. Second: you're gonna have to remove the background color that separates each glyph. (If you don't have a monospace font, keep a backup!)

Don't be discouraged by either of these! A little tweaking and it will work. Set the text lines to one, dump in your glyph string, (don't forget to correct the escaped characters!) and make sure that the glyph string neither begins or ends with a space, as that space will get removed! Then, adjust the char width and char height parameters to fit at least one of your characters.

Now, check the preview tab. If you didn't make a monospace font, keep moving and try not to throw up. Don't worry, we'll fix this in a second. Even if your font looks good in the preview tab, there's a few things we'll have to change. Check the Ouput [sic] tab and select all the text. Copy it into a new text editor window. Save it as whatever you want, just don't forget to give it the .fnt extension. Wait a sec-- did we just make a .fnt file? Yep. Internally, it's that simple.

Now, this is the hard part. If you have a monospace font and your font looks good, skip the next paragraph.

You're gonna have to open a good pixel-perfect image editor like Aseprite or Paint.Net, and go through, glyph by glyph, correcting each of the parameters. todo finish draft

Re: Convert a pixel-perfect ImageFont to a TrueType font?

Posted: Wed Jun 05, 2019 3:20 am
by zorg
You still managed to not explain why you are not satisfied with löve's style of imagefonts...

THEN AGAIN, the wiki clearly states that löve ALSO supports the bmfont format, so i'm unsure what you're on about with the fontcutter thing, since i feel like that's also useless in this context.

Re: Convert a pixel-perfect ImageFont to a TrueType font?

Posted: Wed Jun 05, 2019 3:38 pm
by pgimeno
Yeah I have that feeling that this a case of seeking help with an extremely convoluted solution for a problem that should be simpler to solve.