How to draw a game font

2006-12-12T02:28:00.000-08:00

Make a font sprite, 10 blocks by 10 blocks - each block 32 by 32 pixels. Of course you can change these numbers for a bigger font.

Here is one I made earlier - there is no copyright on this font as I made it. I'm a coder though, so my idea of art is a bit different from most artists :-)

Fill it with ascii characters 32 onwards. 32 top left (ie space)

Load the graphics into c#, .net, Basic, c or the language of your choice.

Create a draw font command - something like the following

const int FONT_WIDTH = 32;
const int FONT_HEIGHT = 32
const int GRID_SIZE = 10;
const int FONT_SPACING = 4; // Number of pixels between each character to aid legibility

void draw_font(int x, int y, string data )
{
    Rectangle rec1, rec2;
    int character;
    rec1.X = x; rec1.Y = y;
    rec1.Width = FONT_WIDTH; rec1.Height = FONT_HEIGHT;
    rec2.Width = FONT_WIDTH; rec2.Height = FONT_HEIGHT;

    for (int loop = 0; loop < data.Length; loop++ )
    {
        rec2.X = FONT_WIDTH * ((character-SPACE_CHAR) % GRID_SIZE);
        rec2.Y = FONT_HEIGHT * ((character-SPACE_CHAR) / GRID_SIZE);
        rec1.Y = y;

        if( character > SPACE_CHAR )
            spriteBatch.Draw(texture_font, rec1, rec2, Color.White);
        rec1.X += FONT_SPACING;
    }
}

And that's pretty much it. Of course you can add kerning by moving some of the characters around - typically i and l will need you to move back a bit and m and w the other way - for instance;

if ((character == 'M') (character == 'W') (character == 'm') (character == 'w'))
rec1.X += 8;

compensates for most fonts having larger m and w characters

Ever yours,

The Jubbernaut