LibGDX sprite batch font bad scale rendering

Question

I am facing an issue while trying to put a text/dialog system in my game project. When I create a font and call the draw method on it passing the camera updated spriteBatch, each pixel of the font has the same dimension of one sprite.

I get the following render:

What you can see on the picture is the top of the "h" of "hello" with each pixel oversized. The same camera is used to render the tiles/sprites.

The effect I want to achieve is similar to this:

Here is the code:

    // 15 * 12 tile size
    camera = new OrthographicCamera(Const.VIEWPORT_WIDTH, Const.VIEWPORT_HEIGHT);
    BitmapFont font = new BitmapFont(Gdx.files.internal("data/fonts/myfont.fnt"));

    // ....

    // p => player position   
    camera.position.x = p.getX();
    camera.position.y = p.getY();
    camera.update();

    batch.setProjectionMatrix(camera.combined);
    batch.begin();
    font.draw(batch, "hello", p.getX(), p.getY());
    batch.end();

I have tried using font.setScale() with no success.

Does someone know how to achieve this?

Answer 1

Create a camera with a bigger viewport (for example pixel perfect of your testing device). And use that to render your font. Also do not create a new font every render, create it at the beginning and use that.

Edit:

To calculate the position you should draw the text, it would be like this. Lets suppose your world camera is called "cam", and your text camera is called "guicam". And a GameObject called "object".

ratew = guicam.viewportWidth/cam.viewportWidth;  //<--- you should calculate these 2 only once.
rateh = guicam.viewportHeight/cam.viewportHeight;

x = guicam.position.x-(cam.position.x-object.position.x)*ratew;
y = guicam.position.y-(cam.position.y-object.position.y)*rateh;
font.draw(batch, "stuff", x, y);

Answer 2

You can try Texture.TextureFilter.Linear for min & max filters.

Libgdx AssetManager loads bitmap fonts with desired filters:

BitmapFontLoader.BitmapFontParameter param = new BitmapFontLoader.BitmapFontParameter();
param.maxFilter = Texture.TextureFilter.Linear;
param.minFilter = Texture.TextureFilter.Linear;
assetManager.load(fileName, BitmapFont.class, param);