AncaA's tech journal

17 Jan, 2008

Bitmapped fonts

Posted by: Anca Alimanescu In: OpenGL ES

Due to the fact that OpenGL ES does not provide any kind of fonts, we need think a way to create the characters and display them efficiently. In order to use fonts in OpenGL ES, we will use a widely used technique called: bitmapped fonts. That is, we store into a texture all characters of a font (there are many programs that produces this kind of textures). The texture will be black (0,0,0) in the places that we want it will be transparent (we will not render the whole quad, only the character inside), and white (1,1,1) in the places we want to see (the character itself). This will allow us, with a blend function of (GL_ONE, GL_ONE).

Because we have a white color, we can safely use glColor4x call to color our font.

Also, we need the right texture coordinates to isolate the right character in the texture, so we will precompute all texture coordinates for characters from 0 to 127 (our texture has 128 characters) in order to access directly to them in runtime, and draw a textured-blended-quad (actually, a triangle strip, because we do not have quads…).

So first we will create a suitable texture, with all characters that we will need. This texture has 8 rows and 16 columns, and each cell has 16×16 texels, and the characters are stored in the ASCII order. We need to isolate the texture coordinates of a character, so we do the next computations:

const float rows = 8.0f;
const float columns = 16.0f;
const float xoffset = 1.0f / columns;
const float yoffset = 1.0f / rows;

const float cx = (float)(c % 16) * xoffset;
const float cy = (float)(c / 16) * yoffset;

Where c is the ASCII code of the character we want to access, substracting 32, because in our texture we do not store the first 32 ASCII characters. cx and cy are the initial position, in both axis, of the character. With these two values we have the texture coordinates of the first corner of the quad.

The BitmappedFont class will encapsulate all this code:

class BitmappedFont {

public:

BitmappedFont(GLuint textureFontID, int fontWidth = 15, int fontHeight = 15);
~BitmappedFont();
static void EnableStates(); //Begin Print
void Print(int x, int y, const char *fmt, ...);
static void DisableStates(); //EndPrint

private:

GLuint m_textureFontID;
int m_fontWidth,m_fontHeight;
//2 = st, 4 = vertices per character, 8 = rows, 16 = columns
static GLfixed m_textureCoordinates[2 * 4 * 8 * 16];
/*boolean to compute texture coordinates only when the first
instance is created*/
static bool m_instanced;

};

  • Share/Bookmark

5 Responses to "Bitmapped fonts"

1 | Tomis

February 5th, 2008 at %I:%M %p

Avatar

I usually use TrueType fonts. Once you get the hang of it it’s not that difficult. They look better too, and it’s less of a hastle when you want to switch the font familly.
There are a lot of TT libraries that make your life easier. Good luck.

2 | Anca A,

February 11th, 2008 at %I:%M %p

Avatar

Have you tried this for OpenGL ES or just for OpenGL?

3 | Tomis

February 12th, 2008 at %I:%M %p

Avatar

Haven’t tried it using glES, but i know it can be done. Check it out glutes.sourceforge.net .

In my opinion it’s quite useful to use something this because you can switch fonts as you please (don’t like arial? try something else..), change size dinamically (maintaining font quality) and so on.

I guess it depends on what you need the font for.

4 | Rodrigues

January 16th, 2009 at %I:%M %p

Avatar

I do openGL ES font rendering in Native Windows platform and avoid the use of wrappers like glut because the use of glut compromises with speed and performance.So, define glutTrueTypeString using windows API.

5 | Rodrigues

January 28th, 2009 at %I:%M %p

Avatar

Hahahaha! You stay happy with bit-mapped fonts lady! Tonight I’ve rendered truetype fonts in windows mobile using openGL ES APIs.
Nobody can do that except me! I challenge you over this and I ll show you my code if u come up with yours. Else, enjoy ROMANIA! Hehehe!

Comment Form

Arhive

Mobile Barcode

qrcode

This is a 2D-barcode containing the address of my mobile site.If your mobile has a barcode reader, simply snap this bar code with the camera and launch the site.

About me

Client-focused software engineer with high intellectual mobility and experience in international teams.

Some of my interests are open innovation, design patterns, networking, personal branding, blogging and study of foreign languages.

Enjoy your visit and don’t hesitate to leave me a feedback!


Software entropy

1. A computer program that is used will be modified.

2. When a program is modified, its complexity will increase, provided that one does not actively work against this.

Switch to our mobile site