HGE:Tutorials:Fonts

From GPWiki

Files:GUITutorial_warn.gif The Game Programming Wiki has moved! Files:GUITutorial_warn.gif

The wiki is now hosted by GameDev.NET at wiki.gamedev.net. All gpwiki.org content has been moved to the new server.

However, the GPWiki forums are still active! Come say hello.

Fonts

hgeFont is an HGE helper class for rendering text with bitmap fonts. There are 2 components necessary for using fonts with HGE.

Font bitmap file: An image file (usually PNG) that contains each character in the font. Like textures, the font bitmap file dimensions must be a power of 2.
Font description file: A text file that lists the font's height and the width of each character in the font. For a more in-depth explanation, visit this link: Font description files in HGE

Defining fonts in the resource manager

Here is a sample font bitmap file, HGE's "default" font: Media:HGE_font1.png

The font description file to go along with it: Media:HGE_font1.fnt

Place these files in the current directory, named font1.png and font1.fnt, respectively.

To define a font, give it a name and specify the name of the font description file (not the font bitmap) using the filename parameter.

Add the following to the resource.res file:

Font font1
{
 filename=font1.fnt
}

Displaying text

Rendering text is similar to rendering sprites and animations. First initialize the font in the WinMain function and render the text in the FrameFunc.

At the beginning of the program, make sure hgefont.h is included, and declare a pointer to an hgeFont object, font1.

#include <hgefont.h>
 
hgeFont* font1;

In WinMain, below the sprite and animation initializations, add the following:

font1 = myRes->GetFont("font1");

This retrieves the font from the resource script file.


To render text, use either the Render() or printf() member functions of hgeFont.

The Render() function takes 4 parameters: the x and y screen coordinates, the text you want to render, and alignment. Alignment can be either HGETEXT_LEFT, HGETEXT_RIGHT, or HGETEXT_CENTER, for left, right, and center alignments respectively. The default value is HGETEXT_LEFT. The printf() function takes the x and y screen coordinates followed by a string in the C language printf-style format specification. For more on formatted strings using printf, see this link: printf statement

To set the color of the text, call the SetColor() member function with the desired color passed in. Use the ARGB() macro to set the color. Its parameters are alpha, red, green, and blue.

To set the size of the text, call the SetScale() member function with the desired size. A size of 1.0 is unscaled, a size of 2.0 is double its normal size, etc. Be sure to call the SetColor() and/or SetScale() functions before rendering the text in order for them to take effect.

Add the following statements in the FrameFunc, below the sprite and animation rendering statements:

font1->SetScale(1.0); //set text size to normal
font1->SetColor(ARGB(255,0,0,0));  //set color of text to black
font1->Render(5, 5, "This is some text");  //render text at coordinates 5, 5
int someNumber = 50;
font1->SetScale(2.0);  //set text size to twice its normal size
font1->printf(5, 30, "Here is a number: %d", someNumber);  //render text using printf-style formatting 

The frame function should now look as follows:

bool FrameFunc()
{
 float dt=hge->Timer_GetDelta();  //get the time since the last call to FrameFunc
 star->Update(dt);  //update the animation
 
 hge->Gfx_BeginScene();
 hge->Gfx_Clear(0);  //clear the screen, filling it with black
 bgSprite->RenderStretch(0, 0, 800, 600); //render the background sprite stretched
 playerSprite->Render(200, 200); //render the player sprite
 star->Render(400, 300); //render the animation of a star
 
 font1->SetScale(1.0); //set text size to normal
 font1->SetColor(ARGB(255,0,0,0));  //set color of text to black
 font1->Render(5, 5, "This is some text");  //render text at coordinates 5, 5
 int someNumber = 50;
 font1->SetScale(2.0);  //set text size to twice its normal size
 font1->printf(5, 30, "Here is a number: %d", someNumber);  //render text using printf-style formatting
 
 hge->Gfx_EndScene();
 
 return false;
}

Run the program and you should see some text rendered in the upper-left corner of the screen.

You can download the source file and resource script file for this tutorial here: Tutorial 4 source, Resource script file

Next Section: Input