Rendering Smooth Text in Libgdx

Question

I am trying to draw text onto the screen but it always ends up being pixelated no matter what I try. A lot of people say that adding the Linear TextureFilter works or offer other solutions but they don't really work for me. This is what I have now (I'm also using a ttf font):

public BitmapFont generateFont(String path, double size)
{
    FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal(path));
    FreeTypeFontGenerator.FreeTypeFontParameter parameters = new FreeTypeFontGenerator.FreeTypeFontParameter();

    parameters.genMipMaps = true;
    parameters.color = Color.BLACK;
    parameters.size = (int) Math.ceil(size);
    parameters.magFilter = TextureFilter.Linear;
    parameters.minFilter = TextureFilter.Linear;
    generator.scaleForPixelHeight((int) size);

    return generator.generateFont(parameters);
}

I've also changed the parameter size to (int) Math.ceil(2 * Gdx.graphics.getWidth() / 9); and while that makes things a little bit smoother, it's nowhere near as crisp as some other texts are.

I'm wondering what I need to do in order to get smooth text along with how I can maintain that smoothness in different text sizes across different resolutions (I'm only targeting desktop right now since I'm really just messing around with Libgdx). It just seems like there are several different ways of doing this but I just want to know what's the best way to go about doing this.

Answer 1

After doing some testing it seems the problem is caused by a large font size and a large viewport size. Luckily this is easily fixed by following these simple steps:

1. Reduce Font size by half.
2. Reduce Viewport size by half.
3. Make sure the font minFilter is MipMapLinearNearest and the magFilter is Linear.
4. If this doesn't work go to step 1.

(In your case though I think the font size is just fine so I would suggest just reducing viewport size at first. If that doesn't work follow the steps above.)

To be clear try reducing your font size to 32 and your viewport size to (500, 500 * aspectRatio), then if that doesn't work try 16 and (250, 250 * aspectRatio).

This method does require you to use a separate viewport to render text with unless you want to change the viewport size of your actual game as well, so just create a new viewport of any type and make sure to apply it before rendering text:

gameViewport.apply();
batch.setProjectionMatrix(gameViewport.getCamera().combined);
batch.begin();
// Draw game stuff

textViewport.apply(true); // Center camera
batch.setProjectionMatrix(textViewport.getCamera().combined);
// Draw text
batch.end();

For me this produces quite satisfactory results

Answer 2

This is the only solution for LibGDX:

https://github.com/libgdx/libgdx/wiki/Distance-field-fonts

Once you get through all the possibilities of rendering huge text smoothly, you'll end up in this link.

Keep in mind that when you write a game, you have to think of all possible phone/tablet resolutions so you'll need to render a much bigger text on a tablet.

I had a great time with Distance Field Fonts. Here you can find a free generator:

https://evanw.github.io/font-texture-generator/