How to create a font from an image for a game?

I found a font in a free pack of sprite as an image:

I'm wondering what would be the best way to use it in a game?

Is there tools to create a font from this image? Do i have to code it myself? I think of using this only for area with few text (like menus) so maybe a simple system converting a string to a sequence of image representing letters would be enough and it's not worth trying to use a complex font system?

What do you think?

• I posted an answer that may address your question. You may want to take a look at it. – Panda Pajama May 13 '13 at 2:46

Do you know how to implement sprites? If yes, then drawing text from a character sheet is easy: just treat each character as a sprite and draw them one after the other.

The details depend on the font you have and on how fancy you want your typography to be. Obviously, the simplest case would be a monospace font, where each character is a constant-size rectangle.

The font shown in your question appears to have variable character widths, which just means that you need to have a table giving the width of each character. If you already know how to work with variable-size sprites, this shouldn't be any more complicated. Just keep track of the current coordinates of the end of the text, and add the width of each character to the x-coordinate as you draw it.

One minor complication is that, if you want to draw that can wrap over multiple lines, you may want to make your drawing routine split the text into words and calculate the width of each word before drawing it, in order to check whether it fits in the remaining space. (Of course, there are even fancier microtypographical tricks you can do, like non-greedy line length optimization and dynamically adjusting word and character spacing to justify both margins, but those are probably overkill for your needs.)

Also, for fonts with less "blocky" shapes than the one in your example, you may want to implement kerning to make letter combinations like AV look nicer. A basic way to do this is to just calculate the minimum distance between two non-transparent pixels in a letter pair, and then move the letters to set this distance to the desired value. In practice, to improve performance, you may want to do this using downscaled bitmaps, or even a simplified model where each letter is first cut into a small number of horizontal slices, and each slice is then mapped to a pair of numbers giving the position of the leftmost and rightmost non-transparent pixel in the slice.

For even fancier effects, like emulation of hand-written calligraphic text, you could implement things like ligatures and context-dependent letter form variants (which are actually pretty simple to implement, basically just a lookup table mapping pairs of letters to the appropriate variants; the hard work is in drawing the ligatures to begin with), but you probably don't need any of that stuff. For most purposes, just drawing simple rectangular character blocks in a row is more than good enough.

Tool to create a bitmap font from a true type font there is a list of tools. Usually with this bitmap there is a file describing separate letters coordinates inside bitmap, so you generate font with some program. Then you parse that describing file, many tools provides their own parsers. So your task is to render string from separate rectangles to screen.

foreach letter in string
get letter rectangle
render_sprite (font_sprite, letter_rectangle, current_letter_index*letter width)