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:-

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

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. You can find out more on how fonts are measured by following this link.

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. (If you want to know more about Blending modes go to this tutorial here.

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

Download this source code here which shows you a technique where you can convert a normal text into an image file whilst at the same time adding a cool gradient using blitmax drawline and setcolor functions.

Summary

This was a short tutorial to show you how fonts can be used within the context of a BlitzMax program.

The DrawText function writes text on the graphic screen
based on the current font which is set using the SetImageFont function
loaded via the LoadImageFont function

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

Useful Links
http://www.blitzmax.com/Community/posts.php?topic=53713#600016
http://www.blitzbasic.com/Community/posts.php?topic=52893 - bitmaptext module

Links to Font Sites
http://www.fontsnthings.com/themes/futuristic.shtml
http://www.dafont.com/
http://www.fontsnthings.com/