Libgdx – drawing text using truetype fonts

As mentioned in one of the previous posts, in Libgdx you cannot just write – print “Hello World”, in Times New Roman, size 12. You need bitmaps for each of the letters.

One way to create such bitmaps is to use FreeTypeFontGenerator which comes in Libgdx package.

Installation of FreeTypeFontGenerator

You can either add it during the installation of Libgdx by ticking “Freetype” checkbox:

installing FreeType

or by editing (Eclipse) the “build.gradle” file which can be found in your “Project” folder. In that case you need to add some code to “dependencies” subsections of the following sections:

  • project(“:desktop”)
compile "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-desktop"
  • project(“:android”)
compile "com.badlogicgames.gdx:gdx-freetype:$gdxVersion"
natives "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-armeabi"
natives "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-armeabi-v7a"
natives "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-x86"
  • project(“:ios”)
natives "com.badlogicgames.gdx:gdx-freetype-platform:$gdxVersion:natives-ios"
  • project(“:core”)
compile "com.badlogicgames.gdx:gdx-freetype:$gdxVersion"

After you have done all of that select all your projects -> Right-click -> Gradle -> Refresh All

Drawing text using FreeTypeFontGenerator

FreeTypeFontGenerator uses a font in “.ttf” format – you can easily find some by googling e.g. “royalty free truetype fonts” (just make sure you are not violating any copyrights – you would not want to give away the millions you made on your game to someone else!).

Save the font you are planning to use in the “assets” folder in “Project-android” subfolder.

Font has to be prepared and loaded – ideally you will do it once as this is a resource intensive process:

FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("name_of_your_font_file.ttf"));

FreeTypeFontParameter parameter = new FreeTypeFontParameter();
parameter.size = size_of_the_font_in_pixels;
parameter.characters = "characters you want to use";
//e.g. abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.!'()>?: 
// These characters should not repeat! 

BitmapFont font = generator.generateFont(parameter);
generator.dispose();

Once you have the “font” ready you can use it like this:

font.setColor(Color.GRAY);
font.draw(batch, "your text", x, y);

or if you want to draw a multi line text center aligned:

font.drawMultiLine(batch, "your text", x, y, widthOfTheLine, HAlignment.CENTER);

or simply aligned to the left:

font.drawMultiLine(batch, "your text", x, y, widthOfTheLine, HAlignment.LEFT);

Once you are done don’t forget to dispose of it by writing:

font.dispose()

If you need to have the text in different sizes, you will need to create couple of “font”s objects – unless you want to scale them which might lead to loss of their quality.

In Ready Steady Teddy, my puzzle game, I’ve used this method e.g. for purposes of score (“37”) and text buttons (“Show legal move”) – that way they scale properly no matter the resolution of the screen:

truetype fonts


←Table of contents
←My apps, games and other projects

Advertisements
Libgdx – drawing text using truetype fonts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s