Baking effects into fonts using Hiero

Let's be completely honest: the standard fonts generated with Hiero are pretty boring, and the quality is not bad but they don't stand out. Certainly, these will do just great for bulk of text in an RPG-like conversation scene but will look slightly boring as menu headers. Typically, user interface designers add effects such as drop shadows or strokes to important pieces of text in order to make them stand out.

In this recipe, we will show you how to create a font texture with Hiero, with an outline and shadow effect, and add it to your game.

Getting ready

This time we will use the data/fonts/lobster.fnt file. Hiero is also needed; download the latest Libgdx package from http://libgdx.badlogicgames.com/releases and unzip it somewhere safe.

Additionally, you will need the samples projects.

How to do it…

The process is really simple, and the results can be great—an easy win! Perform the following steps:

1. Open up Hiero from the command line. Linux and Mac users only need to replace semicolons with colons and back slashes with forward slashes:

   java -cp gdx.jar;gdx-natives.jar;gdx-backend-lwjgl.jar;gdx-backend-lwjgl-natives.jar;extensions\gdx-tools\gdx-tools.jar com.badlogic.gdx.tools.hiero.Hiero
   

2. Click on the … button next to the File entry and select the LobsterTwo-Regular.ttf file.
3. Inside the Rendering panel, select a gray background so that you're able to visualize the result better. This will not affect the output texture.
4. Direct your attention towards the Effects panel. Effects are applied in order, from top to bottom. Remove the existing color effect with the x button.
5. Add a black Outline effect with a width of 2.0.
6. Add a black Shadow effect with 0.6 as Opacity and 2.0 as the X and Y distance.
7. Add the previously removed white color.
8. Increase the padding in the Padding panel so that the characters have enough space to accommodate the newly added effects.
9. Feel free to tweak the values as well as add or remove effects until the results fit your needs.
10. Once you are happy with the result, generate the font by going to File | Save BMFont files (text).... We will save it as data/lobster.fnt inside the Android assets folder.

The following screenshot shows the Hiero UI with some effects applied to a font:

The code for this recipe can be found in the HieroFontEffectsSample.java file, and it is practically identical to BitmapFontSample from the Generating and rendering bitmap fonts recipe. However, this time, we load data/fonts/lobster.fnt as well as data/fonts/play.fnt so that we can compare both the fonts. We have a camera, viewport, and batch and two BitmapFont objects; the rendering process stays the same.

The following screenshot clearly illustrates the differences between the two fonts. Use the effects wisely!

How it works…

All font texture generators operate in a similar manner, including Hiero. They use a library to render characters from TTF files onto a texture. The rendering process can be configured, normally by selecting a font color, size, padding, and so on.

This time round, we also add effects. Internally, this can be achieved using shaders. For instance, the tool can fairly easily render the font on a semi-transparent black color onto a texture and add it to the result, creating a shadow. Everything is baked into the output texture for you convenience:

A quick and dirty alternative to achieving effects such as shadows or outlines directly in the code is to render the same text twice using different colors, sizes, and positions. Take a look at the previous screenshot; to get this result, we could render Libgdx in semi-transparent black and then the same text in opaque red, just a bit up and to the left. While this might give you what you want, you should be aware that it is significantly worse performance-wise. It also results in messier code!

See also

• Read the Dynamic font effects using distance fields recipe if you don't want prebaked effects and prefer on-the-fly ones instead.