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.
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.
The process is really simple, and the results can be great—an easy win! Perform the following steps:
java -cp gdx.jar;gdx-natives.jar;gdx-backend-lwjgl.jar;gdx-backend-lwjgl-natives.jar;extensionsgdx-toolsgdx-tools.jar com.badlogic.gdx.tools.hiero.Hiero
LobsterTwo-Regular.ttf
file.2.0
.0.6
as Opacity and 2.0
as the X and Y distance.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!
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!
3.12.136.119