Displaying Text – OpenGL Tutorial 5 by Osama Hosam

Introduction

Text is the way of delivering messages. It is a way of interactivity between the user and the game. It can be used to post messages in multiplayer environments game. Also when programming, text can be used as a tool of debugging. For example, suppose there is a function to create a line rotation. The output of the function can be displayed at the top of the screen, so it will be easy to make sure if the output is true or not. In OpenGL’s GLUT library we have two types of fonts

• Bitmap fonts, and
• Stroke fonts.

In this article we are going to show the difference between Bitmap fonts and Stroke fonts, we will demonstrate by example how to use both of them.

Bitmap Fonts

Bitmap fonts are basically 2D fonts. They can’t be rotated or scaled, they can only be translated. This type of fonts is suitable for the 2D games to display for example the current score or level of the viewer. The function to draw bitmap fonts is

void drawBitmapText(char *string,float x,float y,float z) 
{  
	char *c;
	glRasterPos3f(x, y,z);

	for (c=string; *c != ''; c++) 
	{
		glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_10, *c);
	}
}

When you draw a text you have to define “Where” it will be drawn, the following functions are responsible for this role

void glRasterPos2f(float x, float y);
void glRasterPos3f(float x, float y, float z); 

The function takes the x, y, z coordinates of the text which will be displayed. The suitable one here is glRasterPos2f() because the z coordinate will not be needed in the bitmap fonts since it is basically 2D.
We iterate through the string character by character to display it by using the function

glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_10, *c);

which takes as an argument the font type and the character to be displayed. The font type can be one of the following fonts

GLUT_BITMAP_8_BY_13
GLUT_BITMAP_9_BY_15
GLUT_BITMAP_TIMES_ROMAN_10
GLUT_BITMAP_TIMES_ROMAN_24
GLUT_BITMAP_HELVETICA_10
GLUT_BITMAP_HELVETICA_12
GLUT_BITMAP_HELVETICA_18 

You are invited to try all of them, also you can create a menu in your application and try to select from a font from the menu and see each font separately.
The function glutBitmapCharacter() renders the character at the required position and advances the current raster position by the width of the character. Therefore, to render a string, successive calls to glutBitmapCharacter() will suffice to achieve the desired output.
After coding the function to draw a bitmap font, it is time to use it in our program, we will do that in the render() function, here is a code showing how to display the text “Osama Hosam’s OpenGL Tutorials” at the raster position 200,200 of the window

void render(void)
{ 
	glClear(GL_COLOR_BUFFER_BIT); 
	glLoadIdentity();

	drawBitmapText("Osama Hosam's OpenGL Tutorials",200,200,0);
	glutSwapBuffers(); 
}

The output is shown in Fig.1

Stroke fonts

Stroke fonts are basically 3D fonts. OpenGL deals with them as any other object in the scene. They can be rotated, scaled, or translated. The basic function which is used in displaying stroke fonts is

void drawStrokeText(char*string,int x,int y,int z)
{
	  char *c;
	  glPushMatrix();
	  glTranslatef(x, y+8,z);
	  glScalef(0.09f,-0.08f,z);
  
	  for (c=string; *c != ''; c++)
	  {
    		glutStrokeCharacter(GLUT_STROKE_ROMAN , *c);
	  }
	  glPopMatrix();
}

The function iterates on all the characters and displays them. The function which display each character is

glutStrokeCharacter(GLUT_STROKE_ROMAN , *c);

The first argument is the font’s name; a font from the following list can be used

GLUT_STROKE_ROMAN
GLUT_STROKE_MONO_ROMAN (fixed width font: 104.76 units wide).

OpenGL renders stroke fonts with lines, the line width can be specified by using the function glLineWidth() which takes only one parameter represents the width of the line. Also the stroke width can be specified by using the function

int glutStrokeWidth(void *font, int character)

which takes the font name (one of the above mentioned list) and the character.
Now, we have implemented the function to display the text, we will use it in the render() function to display the text “Osama Hosam’s OpenGL Tutorials” as follow

void render(void)
{ 
	glClear(GL_COLOR_BUFFER_BIT); 
	glLoadIdentity();
 
	glColor3f(0,1,0);
	drawStrokeText("Osama Hosam's OpenGL Tutorials",200,200,0);

	glutSwapBuffers(); 
}

We have colored the font with green, the output will be as shown in Fig.2. The width and height of the font can also be done with the function

  glScalef(0.09f,-0.08f,z);

We have scaled the font with negative value in the y direction since the origin of our coordinate system is located at the top left corner of the screen. If we don’t use the glScalef() function the output will be the text flipped as shown in Fig.3.

Source Code

To download a sample code of the above tutorial click here.