Learning 2D Game Programming: Max2D Fonts

Introduction

The BlitzMax Max2D font functions allow game programmers to use the versatile truetype font format (ttf). TrueType is now the most common format for fonts on today's Mac OS X and Windows XP.

There are numerous sites on the web where free wild and funky ttf fonts can be downloaded (see links at the end of this tutorial). Windows itself comes with a lot of fonts (see the windows/fonts folder).

To display these fonts on the graphics screen, we first need to familiarise ourselves with the DrawText function.

Drawtext

To write text on a graphic screen we use the DrawText function with the following syntax:-
Function DrawText( t$,x#,y# )

Lets take a look at the following simple example:-
    Graphics 640,480

DrawText "Hello World", 200,100
Flip
Repeat
Until KeyDown(KEY_ESCAPE) Or AppTerminate()

End


The above program draws a the phrase "Hello World" at location 200,100 on our graphics screen then waits for the escape key or window close click.




Unfortunately the default BlitzMax font is not very pretty :)

LoadImageFont and SetImageFont

Rather than use the default font, we can load other types of fonts using the LoadImageFont function with the following syntax:-
Function LoadImageFont:TImageFont( url:Object,size,style=SMOOTHFONT )

And then to use the loaded font, we need to set it using the SetImageFont function with the following syntax:-
Function SetImageFont( font:TImageFont )

Lets take a look at the following simple example:-
    Graphics 320,240
Local font:TImageFont=LoadImageFont("C:\WINDOWS\Fonts\arial.ttf",36)
SetImageFont(font)
DrawText 
"Hello World",20,20
Flip

Repeat
Until KeyDown(KEY_ESCAPE) Or AppTerminate() 


This is Arial font at font size of 36 points. If you do not see this but instead gets the same text as above then chances are the font does not exists in your system. Just move on and I'll explain later.




You can also load a font from a website as follows:-
    Graphics 640,480
Local url:String="http::www.2dgamecreators.com/tutorials/gameprogramming/fonts/pdark.ttf"
Local font:TImageFont=LoadImageFont(url,72)
SetImageFont(font)
DrawText 
"Hello World",20,20
Flip

Repeat
Until KeyDown(KEY_ESCAPE) Or AppTerminate() 


Notice that in this particular instance I have use a fontsize of 72




You can also use BOLD and ITALIC fonts as well

    Graphics 640,480
Local font72:TImageFont=LoadImageFont("C:\WINDOWS\Fonts\arial.ttf",72)
Local font72Bold:TImageFont=LoadImageFont(
"C:\WINDOWS\Fonts\arialbd.ttf",72)
Local font72Italic:TImageFont=LoadImageFont("C:\WINDOWS\Fonts\ariali.ttf",72)

SetImageFont(font72)
DrawText 
"Hello World",20,20
SetImageFont(font72Bold)
DrawText "BOLD world",20,100
SetImageFont(font72Italic)
DrawText "ITALIC World",20,200
Flip

Repeat
Until KeyDown(KEY_ESCAPE) Or AppTerminate() 

Notice that I had to load in 3 different types of fonts. The LoadImageFont function has styles for BOLDFONT and ITALICFONT but I cannot get them to work so this is a workaround. I suspect that the font files needs to have these different styles for it to work.




A common mistake is to use the name of the font instead of it's actual name, for example if we re-run the above program loading the bold font with the name Arial Bold instead of Arialbd :-
    font72Bold:TImageFont=LoadImageFont("C:\WINDOWS\Fonts\Arial Bold.ttf",72,BOLDFONT)

Notice on the screenshot below that the bold World text is using the default text. When there's a loading error, Blitzmax will default to the built-in font.



Transforming the Drawn Text

The transformation and blend modes that we saw in our Image Tutorials can also impact the DrawText function
For example
    Graphics 640,480
Local url:String="http::www.2dgamecreators.com/tutorials/gameprogramming/fonts/pdark.ttf"
Local font:TImageFont=LoadImageFont(url,72)

SetImageFont(font)
SetColor 255,0,0
SetRotation 45

DrawText 
"Hello World",20,20
Flip

Repeat
Until KeyDown(KEY_ESCAPE) Or AppTerminate() 

 Setting the color to red and the rotation to 45 degrees produces the following effect:-



This is how you could do text with shadows:-

    Graphics 640,480
Local url:String="http::www.2dgamecreators.com/tutorials/gameprogramming/fonts/pdark.ttf"
Local font:TImageFont=LoadImageFont(url,72)

SetImageFont(font)

SetColor 255,255,255
SetAlpha .3
SetBlend ALPHABLEND
DrawText "Hello World",20+5,20+5

SetAlpha 1
SetColor 255,0,0
DrawText "Hello World",20,20
Flip

Repeat
Until KeyDown(KEY_ESCAPE) Or AppTerminate()





Text Height and Width

Max2D offers functions to allow us to get the height and width of the text of the current fonts. We can utilise this capability in a program like this:-

    Graphics 640,480
Local url:String="http::www.2dgamecreators.com/tutorials/gameprogramming/fonts/pdark.ttf"
Local font:TImageFont=LoadImageFont(url,72)

SetImageFont(font)


Local Text:String="Hello World"
Local x:Int=10
Local y:Int=20

For Local i:Int=0 Until Len(Text)
    SetColor Rnd(255),Rnd(255),Rnd(255)
   DrawText text[i..i+1],x,y
   x :+ (TextWidth(Text[i..i+1])+2)
Next

Flip

Repeat
Until KeyDown(KEY_ESCAPE) Or AppTerminate()





Here we increment the X position of the next character we want to draw using the width of the drawn character plus an additional 2 pixels to give a bit of space.
       DrawText text[i..i+1],x,y
   x :+ (TextWidth(Text[i..i+1])+2)

TextHeight works in a similar manner. Note that these functions returns the number of pixels, not to be confused with the fontsize which are in points.

Note that except for monospaced fonts like courier, the textwidth of each character in a font is likely to be different.

Smoothed Fonts

Some types of fonts do not look very smooth when loaded. Consider this code and its associated output
    Graphics 640,480
Local font:TImageFont=LoadImageFont("C:\WINDOWS\Fonts\arial.ttf",72)
SetImageFont(font)
DrawText 
"Hello World",20,20
SetBlend ALPHABLEND
DrawText "Hello World",20,150
Flip

Repeat
Until KeyDown(KEY_ESCAPE) Or AppTerminate() 


Note that the second Hello World is a lot smoother than the first one



If you look closely again at the code above, you will see that we use the SetBlend ALPHABLEND command before issuing the drawtext command for the second Hello World.

The first Hello World uses the default blendmode which is MASKBLEND as we did not specify anything..

Fonts in BlitzMax are loaded as bitmaps with anti-aliased (smoothed) edges. These smoothed edges will only show up in ALPHABLEND mode.

The astutes one amongst you would have noticed that the syntax for LoadImageFont has a style which is defaulted to SMOOTHFONT. Try and experiment with loading using a style of zero and see what happens.
Function LoadImageFont:TImageFont( url:Object,size,style=SMOOTHFONT )

Converting Fonts into Images



Summary

This was a short tutorial to show you how fonts can be used within the context of a BlitzMax program.
As BlitzMax uses truetype fonts, fonts of various sizes can easily be loaded from a single ttf file. I've also shown you the various ways you can use the Max2D built-in functions to further manipulate your fonts for more effects. Go on and experiment and explore the many capabilities of Max2D.


Back to the index