Bitmap Fonts

Keep in mind that this module is actually functions from several different WordWars modules. They were combined for this tutorial, and were designed strictly for the game...you will most likely want to modify parts of it, but this tutorial will explain how it's done in WordWars.

First, let's take a look at a couple of UDTs needed:

Private Type tFont
    InUse As Boolean ' is this font in use?
    LettersBig(127) As Long ' reference to letter sprites,
    LettersSmall(127) As Long ' characters 32 to 159
    SizeLarge As Single ' original font size
    SizeSmall As Single ' ditto
    WidthBig(127) As Long ' reference to character width
    WidthSmall(127) As Long ' ditto
End Type

This type stores the actual font information. In WordWars, sets have a large font, and a small font. The comments explain the parts of the type fairly well, so we won't go into them too much here. One important thing to note is that the characters in the bitmap font are ASC 32 to 159...we'll use that later. And here you can see why we said to record the font sizes we used in Bitmap Font Builder.

The next UDT stores information about individual letters:

Public Type tLetter
    Color As Long ' color of this letter
    Scaling As Single ' scale of this letter
    SpriteRef As Long ' reference to sprite object
    x As Single ' x coordinate of this letter
    y As Single ' y coordinate of this letter
End Type

An array of tLetters will store all the display information for a given word, and will be passed to a function later to actually display the text.

Public bFonts() As tFont
Public PLAYERFONT As Long
Public ENEMYFONT As Long

bFonts is an array of loaded fonts, stored in a custom font pool. PLAYERFONT and ENEMYFONT are just what they say, and are the only fonts used in WordWars.

Next, a look at the InitbFont function.

Are you playing?

SetUpbFontWord is a long and painful function, but it does the real work. Let's start by taking a look at the Function call header.

Public Sub SetUpbFontWord(LetterArray() As tLetter, _
    FontNum As Long, _
    Text As String, _
    FontSize As Single, _
    Optional BigFont As Boolean = True, _
    Optional VertAlign As String = "CENTER", _
    Optional HorizAlign As String = "CENTER", _
    Optional rLeft As Single = 0, _
    Optional rTop As Single = 0, _
    Optional rRight As Single = 800, _
    Optional rBottom As Single = 600)

Wow! Let's go over these parameters:

LetterArray - A dynamic array of letters that will be loaded with texture and position information.
FontNum - A reference to a font previously created by InitbFont
Text - The actual text to be displayed
FontSize - The actual font size (not pixels)
BigFont - Specifies whether to use the top (larger) font, or the smaller one.

The rest are alignment settings, set for a screen with a default resolution of 800x600 pixels.

Next is a Do loop, that divides the words of Text into multiple rows, based on the dimensions passed to the subroutine. This loop repeatedly uses the WordSize function (also included in the source) to evaluate the pixel width of text as it builds the rows. Inside this loop is a Select Case statement that watches for formatting tags. All tags and words must be separated by a space to be properly parsed, and as they are reassembled spaces are actually added to keep the words from running together. This is why there is a /NOSPACE tag. It allows multiple /COLOR tags to be used within the same word without spacing it apart.

After the row building loop, the subroutine calculates the total height of the rows, so that it can properly perform any specified vertical alignment.

Without confusing everybody, suffice it to say that the rest of the function simply works its way through the rows, creating tLetter objects and setting their x and y coordinates. At the start of a new row, the x position is reset to zero, and the row height is added to the y position.

When finished, the passed LetterArray dynamic array contains a collection of sprites to the needed letters, all set with the proper position and the proper scale for the specified font size.

Next, a look at the hideous DrawbWord function.

Are you playing?