Month: April 2015

Introduction

Last day we started creating an atlas-based font class to draw text. Today we are going to complete this work by using it to draw characters. In order to draw a piece of text on the screen, we need the following information.

• The text (a series of characters)
• Screen coordinates to draw the text
• Font
• Font size (and possibly other attributes)

Given font size, we need to scale the atlas texture accordingly before drawing characters. What we introduce later today are text sprites. Like other sprites in our framework, text sprites can be rotated, scaled, and translated. For ease of use, we associate the scaling factor of a text sprite to its font size. For instance if the scaling factor is 12, it represents a text with a font height of 12 pixels. This contrasts with a normal texture, where it means 12 times as big as the original size. In day 6 we discussed how transformations work in OpenGL ES. In order to figure out how we should apply transformations to text sprites, we have to keep the following in mind:

• Rotation should be applied to the text as a whole, not individual characters.
• Scaling can either be applied to the whole text or to individual characters.
• Translation is applied to the whole text as well as individual characters. Note that we have to position the text first, and then every character should appear after the previous.

Continue reading

Text is one of the key elements of any game and you can hardly find any game without it. Be it menu labels, instructions, or score, there are almost always pieces of text. Unfortunately graphics engines like OpenGL do not include text manipulation in their core API. Today start creating our own text rendering system to overcome this problem. This discussion is so long that I have no choice but to break this into parts. Today we only create a simple font. Next day we will discuss how we can use this font to draw text.

Background

There are two main approaches to displaying text in a 3D environment.

Outline fonts

In this method, an actual TrueType or another outline font format is used to create text. Glyphs (characters) in the font are actually converted into a series of polygons, and then rendered just like any other 3D object. This method has some advantages, namely that you can manipulate characters and transform them like any polygon, and you can create 3-dimensional embossed version of the text. However, if the characters are very detailed, your polygons can be large and rendering can take longer (unless you give up the details to some extent).

picture attributed to this article

Texture-mapped text

Using this method, glyphs are rendered onto a bitmap, which is later used as a texture to represent text. We talked about texture atlases in day 4. Now imagine an atlas that contains all possible characters of a specific font. Once we load such a texture, we can draw a full text by cutting pieces out of it and drawing them on simple rectangles. This is the basic idea behind this approach.

Continue reading