Non-uniform width retro font png

I’m trying to render a png font using Phaser.GameObjects.RetroFont.Parse but my font png doesn’t have uniform width for all characters. All the examples I’ve seen that use Phaser.GameObjects.RetroFont.Parse deal with uniform width fonts. Am I going to have to manually edit this .png to make the characters equally spaced out or is there some way to make Phaser handle this automatically? Or perhaps a sprite/font program that will convert it for me?

So I’ve manually edited the font file with GIMP so that it is fixed width. Now text with mixed case letters clearly have uneven spacing.

Even when I play with the spacing on the font, it never quite looks right because of inconsistencies across letters. Is the only solution for this to just use a full on .tff font or is there any way to use pixelated fonts and have them show with nice spacing?

You can use a BitmapText instead. You’d have to write the data file yourself, though. :frowning:

Is there a preferred method of writing the file? I’ve tried to find font creators where I can import letters, piece by piece, but it seems like they all require vector graphics or some other type of complex font creation techniques. Based on your :frowning: I’m guessing this might be the only way but I’m curious if anyone has tips here, even if it’s just what application to use to do this.

I assume you’d have to figure out the character coordinates and then write the data file by hand.

1 Like

It sounds like you might be better off using Bitmap Text, as @samme suggested above, and starting off with either an existing bitmap graphic and font/character data, or converting from an actual font file.

If you end up doing the later, and you’re on a Mac, I’d recommend bmGlyph.

1 Like