Jeff Molofee - NeHe's OpenGL Tutorials

* DOWNLOAD Game GLUTCode For This Lesson. (Conversion by Milikas Anastasios)

* DOWNLOAD IrixCode For This Lesson. (Conversion by Rob Fletcher)

* DOWNLOAD JavaCode For This Lesson. (Conversion by Jeff Kirby)

* DOWNLOAD Jedi-SDLCode For This Lesson. (Conversion by Dominique Louis)

* DOWNLOAD LinuxCode For This Lesson. (Conversion by Richard Campbell)

* DOWNLOAD Linux/GLXCode For This Lesson. (Conversion by Mihael Vrbanec)

* DOWNLOAD Linux/SDLCode For This Lesson. (Conversion by Ti Leggett)

* DOWNLOAD Mac OSCode For This Lesson. (Conversion by Anthony Parker)

* DOWNLOAD Mac OS X/CocoaCode For This Lesson. (Conversion by Bryan Blackburn)

* DOWNLOAD MASMCode For This Lesson. (Conversion by Nico (Scalp))

* DOWNLOAD Visual C++ / OpenILCode For This Lesson. (Conversion by Denton Woods)

* DOWNLOAD Visual BasicCode For This Lesson. (Conversion by Ross Dawson)

Welcome to yet another Tutorial. This time on I'll be teaching you how to use Bitmap Fonts. You may be saying to yourself "what's so hard about putting text onto the screen". If you've ever tried it, it's not that easy!

Sure you can load up an art program, write text onto an image, load the image into your OpenGL program, turn on blending then map the text onto the screen. But this is time consuming, the final result usually looks blurry or blocky depending on the type of filtering you use, and unless your image has an alpha channel your text will end up transparent (blended with the objects on the screen) once it's mapped to the screen.

If you've ever used Wordpad, Microsoft Word or some other Word Processor, you may have noticed all the different types of Font's avaialable. This tutorial will teach you how to use the exact same fonts in your own OpenGL programs. As a matter of fact… Any font you install on your computer can be used in your demos.

Not only do Bitmap Fonts looks 100 times better than graphical fonts (textures). You can change the text on the fly. No need to make textures for each word or letter you want to write to the screen. Just position the text, and use my handy new gl command to display the text on the screen.

I tried to make the command as simple as possible. All you do is type glPrint("Hello"). It's that easy. Anyways. You can tell by the long intro that I'm pretty happy with this tutorial. It took me roughly 1½ hours to create the program. Why so long? Because there is literally no information available on using Bitmap Fonts, unless of course you enjoy MFC code. In order to keep the code simple I decided it would be nice if I wrote it all in simple to understand C code :)

A small note, this code is Windows specific. It uses the wgl functions of Windows to build the font. Apparently Apple has agl support that should do the same thing, and X has glx. Unfortunately I can't guarantee this code is portable. If anyone has platform independant code to draw fonts to the screen, send it my way and I'll write another font tutorial.

We start off with the typical code from lesson 1. We'll be adding the stdio.h header file for standard input/output operations; the stdarg.h header file to parse the text and convert variables to text, and finally the math.h header file so we can move the text around the screen using SIN and COS.

#include // Header File For Windows

#include // Header File For Windows Math Library ( ADD )

#include // Header File For Standard Input/Output ( ADD )

#include // Header File For Variable Argument Routines ( ADD )

#include // Header File For The OpenGL32 Library

#include // Header File For The GLu32 Library

#include // Header File For The GLaux Library

HDC hDC=NULL; // Private GDI Device Context

HGLRC hRC=NULL; // Permanent Rendering Context

HWND hWnd=NULL; // Holds Our Window Handle

HINSTANCE hInstance; // Holds The Instance Of The Application

We're going to add 3 new variables as well. base will hold the number of the first display list we create. Each character requires it's own display list. The character 'A' is 65 in the display list, 'B' is 66, 'C' is 67, etc. So 'A' would be stored in display list base+65.

Next we add two counters (cnt1 & cnt2). These counters will count up at different rates, and are used to move the text around the screen using SIN and COS. This creates a semi-random looking movement on the screen. We'll also use the counters to control the color of the letters (more on this later).

GLuint base; // Base Display List For The Font Set

GLfloat cnt1; // 1st Counter Used To Move Text & For Coloring

GLfloat cnt2; // 2nd Counter Used To Move Text & For Coloring

bool keys[256]; // Array Used For The Keyboard Routine

bool active=TRUE; // Window Active Flag Set To TRUE By Default

bool fullscreen=TRUE; // Fullscreen Flag Set To Fullscreen Mode By Default

LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM); // Declaration For WndProc

The following section of code builds the actual font. This was the most difficult part of the code to write. 'HFONT font' in simple english tells Windows we are going to be manipulating a Windows font. oldfont is used for good house keeping.

Next we define base. We do this by creating a group of 96 display lists using glGenLists(96). After the display lists are created, the variable base will hold the number of the first list.

GLvoid BuildFont(GLvoid) // Build Our Bitmap Font

{

HFONT font; // Windows Font ID

HFONT oldfont; // Used For Good House Keeping

base = glGenLists(96); // Storage For 96 Characters ( NEW )

Now for the fun stuff. We're going to create our font. We start off by specifying the size of the font. You'll notice it's a negative number. By putting a minus, we're telling windows to find us a font based on the CHARACTER height. If we use a positive number we match the font based on the CELL height.

font = CreateFont( –24, // Height Of Font ( NEW )

Then we specify the cell width. You'll notice I have it set to 0. By setting values to 0, windows will use the default value. You can play around with this value if you want. Make the font wide, etc.

0, // Width Of Font

Angle of Escapement will rotate the font. Unfortunately this isn't a very useful feature. Unless your at 0, 90, 180, and 270 degrees, the font usually gets cropped to fit inside it's invisible square border. Orientation Angle quoted from MSDN help Specifies the angle, in tenths of degrees, between each character's base line and the x-axis of the device. Unfortunately I have no idea what that means :(

0, // Angle Of Escapement

0, // Orientation Angle

Font weight is a great parameter. You can put a number from 0 – 1000 or you can use one of the predefined values. FW_DONTCARE is 0, FW_NORMAL is 400, FW_BOLD is 700 and FW_BLACK is 900. There are alot more predefined values, but those 4 give some good variety. The higher the value, the thicker the font (more bold).

FW_BOLD, // Font Weight

Italic, Underline and Strikeout can be either TRUE or FALSE. Basically if underline is TRUE, the font will be underlined. If it's FALSE it wont be. Pretty simple :)

FALSE, // Italic

FALSE, // Underline

FALSE, // Strikeout

Character set Identifier describes the type of Character set you wish to use. There are too many types to explain. CHINESEBIG5_CHARSET, GREEK_CHARSET, RUSSIAN_CHARSET, DEFAULT_CHARSET, etc. ANSI is the one I use, although DEFAULT would probably work just as well.