7 – DISPLAYING TEXT

BITMAP FONTS

LibGDX uses bitmap fonts instead of the usual true type fonts. Bitmap fonts are drawn more efficiently. However, their size and colour is predetermined.

CREATING BITMAP FONTS

There is a tool called Hiero that can convert a ttf font on your computer into an bitmap font. It conveniently creates the files (FNT and PNG) that you need for text in LibGDX.

HIERO

You can use Google to find the most recent version of Hiero or you can find a local copy below. You can choose from the jar file or the zip file versions.

Hiero.jar

Hiero.zip

FONT FILES

A bitmap font has two files – a PNG file and an FNT file. Both files need to be placed inside the asset folder of the core project. Just like for Sounds, you need to make sure that you can see these files from inside Eclipse.

FONT CLASS

From our bitmap font files, we will create a Font object. This font object can drawn on the screen. It can also give us the size of the bounding box for a specific message which allows us to place that font in the center of the screen.

SPRITERENDER CLASS

We will use a SpriteRenderer object to take care of rendering text. This object specializes in displaying sprites on screen. And since bitmap fonts are similar to sprites, this object also deals with them.

DRAWING COORIDNATE

The coordinates provided to the draw method refer to the top left point of the bounding box (as opposed to the bottom left which one might expect.)

public class TextDisplayer extends ApplicationAdapter

{

private SpriteBatch spriteRenderer;

private BitmapFont font;

public void create ()

{

FileHandle myFile3 = Gdx.files.internal("PressStart2p.fnt");

font = new BitmapFont(myFile3);

spriteRenderer = new SpriteBatch();

}

public void render()

{

//Update (None)

//Render text

spriteRenderer.begin();

String msg = "Campeau";

font.draw(spriteRenderer, msg, 200, 200); //top left corner of text

spriteRenderer.end();

}

}

TEXT BOUNDS

The Font class has a method that returns a TextBounds object. From this object, we can get the width and height to the text. This allows us to center our words vertically, horizontally or both.

Here is the render method from above with the added work around the TextBounds objects.

public void render()

{

//Update (None)

//Render text

spriteRenderer.begin();

String msg = "Campeau";

//Calculating x coordinate for centered text

TextBounds tb = font.getBounds(msg);

float centerX = Gdx.graphics.getWidth() / 2;

float textX = centerX - (tb.width/2);

//Calculating y coordinate for centered text

float centerY = Gdx.graphics.getHeight()/2;

float textY = centerY + (tb.height/2);

font.draw(spriteRenderer, msg, textX, textY); //centered text

spriteRenderer.end();

}

}

We will use this knowledge in our next section for the Pong Game.