Glimmr Drawing Commands

version 2/101030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next



  • Section: Steps for the creation of new bitmap fonts

    If you are interested in creating your own font for use in a game, there is a thriving online scene organized around the creation of "pixel fonts" that can serve as a source of inspiration, and even advice. Just get out your google and go!

    The characters (glyphs) of a bitmap font are stored in the "glyph map," a list of numbers with a particular format. As with monochrome bitmaps, we specify each bit of the font using 1's for on-bits and 0's for off-bits. However, we also immediately preface the bitmap with the ASCII character code for the glyph:

        The glyph map of Glimmr C&C is {
            33,[exclamation point]
            1,
            1,
            1,
            1,
            1,
            0,
            1,
            34,[quotation mark]
            1, 0, 1,
            1, 0, 1,
            35,[pound sign]
            0, 0, 1, 0, 1, 0, 0,
            0, 0, 1, 0, 1, 0, 0,
            1, 1, 1, 1, 1, 1, 1,
            0, 0, 1, 0, 1, 0, 0,
            1, 1, 1, 1, 1, 1, 1,
            0, 0, 1, 0, 1, 0, 0,
            0, 0, 1, 0, 1, 0, 0 ... }

    Bitmaps should be made as compact as possible--there should never be a row or column of all zeros at the edges of the map, as this adds unnecessary processing time.

    The glyph map provides only the shape and the character code for each glyph. It does not describe how the character should be positioned with the total available font height, nor does it indicate how the glyph relates to the glyphs around it. All of this information is provided in the font table.

    [ADD SOME STUFF HERE...]
    A font table will have 7 columns:

        glyph - char - index - width - height - yoffset - advance

    The glyph column is a text column that provides a visual reference, and is intended only for human readability--it is not consulted in the rendering of text. It is used to depict the character described by the rest of the table row, e.g. "space", "!", "quotation mark", "A", etc. The actual lookup is done using the character code, provided in the char column.

    The char column contains the character code, a number. This code is what the extension will use to match against the text-string provided. The easiest way to see what char code is assigned to a character (or at least one that can be typed on the keyboard) is to include Basic Screen Effects and use this phrase:

            say "[the chosen letter]."

    When it hits this code, the game will wait for you to tap a key and then print the corresponding character code.

    The width column is the width of the character's bitmap in bits, and the height is, of course, the height. These numbers must correctly describe the dimensions of the bitmap or it will be incorrectly drawn. These dimensions are also used to calculate the index column (see below).

    Bitmap fonts are rendered starting from the upper-left corner. The yoffset column tells how many bits down from the imaginary top line of the font the glyph in question should be drawn. An uppercase "A", for example, which is a tall character, likely will have a y-offset of 0. A character like lowercase "y", however, is a short character and will likely have a positive y-offset. A negative offset can be used, if necessary, to make characters taller than the standard.

    The advance column describes how many bits to the right we should scan in order to draw the next character in the string. The advance is calculated based on the left edge of the character, so the number will usually be at least one more than the character's width, to be sure that the next glyph drawn will not touch or overlap it.

    The index column has been saved for last, but it is very important. The index refers to the position of the character code reference within the font's glyph map. The index is used like the track spacing grooves in an LP: by jumping straight to this entry when we are ready to draw a glyph, we can avoid iterating through all of the entries that come before it. Here is the glyph map excerpted above again, with arrows marking the indices:

        The glyph map of Glimmr C&C is {
            33, <------
            1,
            1,
            1,
            1,
            1,
            0,
            1,
            34, <------
            1, 0, 1,
            1, 0, 1,
            35, <------
            0, 0, 1, 0, 1, 0, 0,
            0, 0, 1, 0, 1, 0, 0,
            1, 1, 1, 1, 1, 1, 1,
            0, 0, 1, 0, 1, 0, 0,
            1, 1, 1, 1, 1, 1, 1,
            0, 0, 1, 0, 1, 0, 0,
            0, 0, 1, 0, 1, 0, 0 ... }

    Counting each entry in the glyph map by hand to determine the index would be a chore, so there is a utility provided that will automatically populate blank index values. There are two prerequisites for this process to work: We must have correctly filled out the other columns in our table continuation, and the order in which characters are listed in the table continuation must be the same as the order in which their glyphs are defined in the glyph map. So long as both of these are true, we can leave our index column(s) blank, like so:

        Table of Glimmr C&C Parameters (continued)
      glyph  char  index  width  height  yoffset  advance  
      "happy face"  1  --  7  8  1  8  
      "happy face reversed"  2  --  7  8  1  8  

    And then, add a rule like this to the game:

        First when play begins:
            set blank indices for Glimmr C&C, verifying glyph map and writing table to disk.

    This will number the indices for you, verify that the newly assigned index numbers match the glyph map, print the results to the screen, and write a file, "FontTable", to your hard disk (if you run the game in the IDE, it should wind up in the game folder.) This will be your font table, now with index numbers in place and correctly formatted. It is ready to be copied and pasted back into your game. (Don't forget to remove the "set blank indices" code from the game after completing the process!)

    And that completes the process of creating a bitmap font.