Problem to match font size to the screen resolution in libgdx

Posted by Iñaki Bedoya on Game Development See other posts from Game Development or by Iñaki Bedoya
Published on 2014-06-29T14:32:37Z Indexed on 2014/08/22 10:28 UTC
Read the original article Hit count: 556

Filed under:
|
|
|
|

I'm having problems to show text on my game at same size on different screens, and I did a simple test.

This test consists to show a text fitting at the screen, I want the text has the same size independently from the screen and from DPI.

I've found this and this answer that I think should solve my problem but don't. In desktop the size is ok, but in my phone is too big.

This is the result on my Nexus 4: (768x1280, 2.0 density)

Nexus 4 calculating density

And this is the result on my MacBook: (480x800, 0.6875 density)

enter image description here

I'm using the Open Sans Condensed (link to google fonts)

As you can see on desktop looks good, but on the phone is so big.

Here the code of my test:

public class TextTest extends ApplicationAdapter
{
    private static final String TAG = TextTest.class.getName();
    private static final String TEXT = "Tap the screen to start";

    private OrthographicCamera camera;
    private Viewport viewport;

    private SpriteBatch batch;
    private BitmapFont font;

    @Override
    public void create ()
    {
        Gdx.app.log(TAG, "Screen size: "+Gdx.graphics.getWidth()+"x"+Gdx.graphics.getHeight());
        Gdx.app.log(TAG, "Density: "+Gdx.graphics.getDensity());

        camera = new OrthographicCamera();
        viewport = new ExtendViewport(Gdx.graphics.getWidth(), Gdx.graphics.getWidth(), camera);
        batch = new SpriteBatch();

        FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("fonts/OpenSans-CondLight.ttf"));
        font = createFont(generator, 64);
        generator.dispose();
    }

    private BitmapFont createFont(FreeTypeFontGenerator generator, float dp)
    {
        FreeTypeFontGenerator.FreeTypeFontParameter parameter = new FreeTypeFontGenerator.FreeTypeFontParameter();

        int fontSize = (int)(dp * Gdx.graphics.getDensity());
        parameter.size = fontSize;

        Gdx.app.log(TAG, "Font size: "+fontSize+"px");

        return generator.generateFont(parameter);
    }

    @Override
    public void render ()
    {
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        int w = -(int)(font.getBounds(TEXT).width / 2);

        batch.setProjectionMatrix(camera.combined);
        batch.begin();
        font.setColor(Color.BLACK);
        font.draw(batch, TEXT, w, 0);
        batch.end();
    }

    @Override
    public void resize(int width, int height)
    {
        viewport.update(width, height);
    }

    @Override
    public void dispose()
    {
        font.dispose();
        batch.dispose();
    }
}

I'm trying to find a neat way to fix this. What I'm doing wrong? is the camera? the viewport?

UPDATE:

What I want is to keep the same margins in proportion, independently of the screen size or resolution. This image illustrates what I mean.

enter image description here

© Game Development or respective owner

Related posts about java

Related posts about android