Making your own font

Newbie & Debugging Questions
#1

I’m in the process of making my own set of fonts and what a process it is…

I do this using an Image with a sheet of 16*8 tiles, or glyphs, as I’ve seen that they’re called. On every glyph there is a printable letter in Ascii order. Since I want a pixel-feel to my game I’ve also got a smaller set of letters and symbols on the bottom of the Image.

I position these letters with the help of a grid, which is a time-consuming process.

Now to my code - my FontHandler. In this I have the ability to render a string, render a string in the centre of two X-coordinates, and render a string “boxed”, so that automatically makes a new line. In order to do this I have a huge switch with every printable letter which gives an offset value to the specific character, so that “love” doesn’t render “l ove” etc.

I’m planning to add more fonts and every font requires its own switch statement, resulting in a long, long an messy class, but it’s the only solution I can see. My question is if anyone has any hints or tricks regarding bitmap-fonts.

#2

Download the source and learn from the God :smiley:

#3

You mean kerning? Why not use an array as a lookup table for the offsets?

#4

Thanks, but the “god” seems to be using a font where all letters have the same width and height e.g. currier new. This is of course a sane approach, but not what I want to achieve. I want to use fonts where the letters curls and entwines one another and that’s why I need the offsets and adaptable algorithms.

#5

What you described is pretty much the way to do it. It’s annoying code to write the first time, but if you get it right, you never have to touch it again.

If you want the ability to make more fonts, try loading the letter widths from a file or something rather than hardcoding it.

#6

Well you can make your own file format and store letter sizes in there, so you don’t have to do that in code.

#7

Is it kerning people call it? That could be an idea. How would one go about making this array less abstract though. In my switch it is crystal clear with:

Switch(char c)
case ‘M’ return 5;
case ‘N’ return 8;

etc.

If I’m to make an array I’d like to access it using a char, like charOffsetArray[‘M’] = {3,4}

#8

I’m not sure I’m following…

Excellent link by the way, I’m going to scrutinize that source.

#9 

{
	"chars": [
		"A": {
			"width": 6,
			"height": 8
		},
		"B": {
			"width": 6,
			"height": 8
		},
		"I": {
			"width": 3,
			"height": 8
		}
	]
}
#10

Have two background colours, not one. For the sake of exposition, I will call them “non-pixel” and “transparent”. You can calculate the width of a character by finding a minimal bounding box of the rendered and transparent pixels.

This also extends to a good approximation to proper kerning, whereby you calculate a spacing for each pair of consecutive characters rather than for each character. The way that works is to move the second character left until it can’t go any further without two pixels overlapping. If you want more explanation I can give it, but I’ll need to make some images so it might take me a day or two to reply.

#11

Yes, that sounds very much what I’m looking for. If you would I’d be very happy.

Ps,

Just to clarify my situation I’m using a 8-bit png with white symbols on a transparent background. The symbols have dark edges. I hope you metho will work with that.

#12

Ok. I’m using magenta as the “non-pixel” background, and black on white text, but you can adapt to suit. I’m taking VA as my example because that’s a classic example of how well-kerned text can have overlapping bounding boxes.

The two letters with a one-pixel border on each:

If we move them so that the bounding boxes touch we get:

If we move them so that the “pixels” touch we get:

You have to be careful with characters like punctuation to make sure there’s a line of “transparent” background all the way to the top and the bottom so that ," doesn’t have the " move above the ,.

#13

Thanks a lot! But how could I get java to do this for me?