LibGDX sprite batch font bad scale rendering

3k views Asked by At

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:

font draw scale issue

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:

Elliot quest example

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?

2

There are 2 answers

2
Daahrien On BEST ANSWER

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);
0
ilkinulas On

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);