Using Bitmap Fonts with SDL

In this article were going to demonstrate how to display text on a SDL Surface in much the same way as we would draw a sprite.

CREDIT WHERE CREDIT IS DUE:

The code for this How-To was kindly donated to us by VDM of www.ubuntuforums.org who is currently acting as an adviser for us on this project.

Introduction

A lot of the time its much nicer to display text in a font that is themed the same as your game. This means you are faced with using a specially designed True Type Font or you can create one on a bitmap. Its often better to create a bitmap font because it can be more pleasing to the eye and so add to you games look and feel value.

Handling the fonts using a class

As we have said before in previous articles, C++ classes handle this kind of job really well, so we're going to stick with the paradigm and create a class that will do the following:

• Handle the loading of the font bitmap
• Exclusively deal with any information about the font
• Deal with drawing/blitting the font to a Surface

So lets define our class:

class Font
{
	SDL_Surface* m_pFontList; // this is our surface to store the bitmap font
public:
	Font(std::string src_file);
	virtual ~Font(void);
	int ShowText(std::string text, int type, int pos_x, int pos_y, SDL_Surface* pScreen);
};

• Font(): constructs the class object and loads the specified file into memory.
• ~Font(): destructs the class but currently contains no code. Its still worth having one for possible future changes
• ShowText(): handles translating and drawing a specified string onto our surface

Loading the font surface

This is the easy part! we use the IMG_Load() which we have decided to 'nest' inside thae arguments of our SDL_DisplayFormatAlpha() function. SDL_DisplayFormatAlpha() is the same as the SDL_DisplayFormat() we have used previously but also provides an alpha channel which will be handy to have in future How-Tos.

Heres the code:

Font::Font(std::string src_file)
{
	m_pFontList = SDL_DisplayFormatAlpha(IMG_Load(src_file.c_str()));
}

Lets go loopy!

Now comes the complex part of our Font class, we need to loop through every letter of the string and process which bitmapped letter to draw:

int Font::ShowText(std::string text, int type, int pos_x, int pos_y, SDL_Surface* pScreen)
{
	/* TODO: We need to calculate the fonts height into the pos_y thing. */
	// Also, id like to see this stuff gathered from an ini file.
	// That way we can alter fonts without the need for recompilcation

	if(!pScreen) return 1;
        // src_rect is the location of the character we need to fetch. 
        // rect will be the destenation
	SDL_Rect rect, src_rect; 
	rect.x = pos_x;
	rect.y = pos_y;
	SDL_Rect tmp_rect;
	tmp_rect.y = 0*type;

	for(int i=0; i < text.size(); i++) {

		tmp_rect.y = 0; // set right y axe

		switch(text[i]) {
			case 0x20:
				rect.x += 10;
				break;

			case 0x21: // !
				tmp_rect.x = 4;
				tmp_rect.w = 6;
				tmp_rect.h = 19;
				tmp_rect.y = 0;
				SDL_BlitSurface( m_pFontList, &tmp_rect, pScreen, &rect);
				rect.x += tmp_rect.w;
				break;

You'll notice that I didn't put the whole thing up for viewing! If would like to see it in its entirety you can download the source code and look at that!

you can see from the code snippet that we use a switch to test the current letter and then act upon what we find. This involves setting the values of a SDL_Rect and passing it to the SDL_BlitSurface() function which, if you have read the earlier How-Tos, is exactly the same method we have used to draw sprites and background images.

VDM and myself both agree that this could be done more elegantly by using some form of initialization file hat could be loaded at the start instead of setting the values in code. Perhaps that an idea for another How-To! ;-D

Click Here To Download the code sdl-fontfun.tar.gz

To compile and run the code:

Final thoughts

Thats the end of this How-To, we both hope this sheds some light on the game development process. If you have any comments or contribution please feel free to contact us on the ubuntu forums.

Mike & VDM