10
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ Do you want the physical size to stay the same (2cm text on computer == 2cm tekt on mobile) or have the text fit the display? \$\endgroup\$ – Eejin Jun 29 '14 at 14:53
  • \$\begingroup\$ I'm not entirely sure what you are asking here. Those link's you posted seem to answer this question. You have to be aware of display size and DPI. Please elaborate your question, so it can be answered correctly. \$\endgroup\$ – Katu Jun 29 '14 at 15:41
  • \$\begingroup\$ I'll try it. What I want is to keep the same proportion of the text between different screen sizes or resolutions. I mean in a cinema screen will obviously have bigger size in cm, but in proportion will have the same margins. So, is not exactly what @Eejin said. I updated the post with an image that shows what I mean. \$\endgroup\$ – Iñaki Bedoya Jun 29 '14 at 17:17
14
\$\begingroup\$

You seem to want to keep the same textsize/screensize ratio. Basically what you do is develop at one resolution and let that be scale 1.0. Then you divide the new screen width by the old width and that is your scale factor.

For example. Developing on 2560x1440 with font size 16 and running on 1920x1080.

Font size will be: 1920 * 16 / 2560 = 12

I do the same in my interface library and it works perfectly.

\$\endgroup\$
  • \$\begingroup\$ Thanks @Eejin, is what I needed and it works perfectly. Then the answers I linked are for showing the same real size? \$\endgroup\$ – Iñaki Bedoya Jun 30 '14 at 14:32
  • \$\begingroup\$ It is also about scaling with the device. But here the font grows larger for the available resolution and there the font is dependent on the dpi. A 28" 2560x1440 monitor has a different dpi than a 5" 1920x1080 phone. The method you want will always fill a certain portion and a DPI aware method will change font size so that they are readable and keep in mind that there may be more working space. \$\endgroup\$ – Eejin Jul 1 '14 at 13:49
  • \$\begingroup\$ thx! it worked!! \$\endgroup\$ – ParampalP Dec 22 '14 at 4:41
  • 2
    \$\begingroup\$ @kevinksmith That would be because you're doing integer division, not because 'some versions of Android' aren't doing the calculation correctly. \$\endgroup\$ – MichaelHouse Jan 3 '15 at 16:39
  • 1
    \$\begingroup\$ @AshrafSayied-Ahmad The DPI does not matter when you need to have the text be a certain percentage of screen width pixels. \$\endgroup\$ – Eejin Apr 12 '15 at 18:16
2
\$\begingroup\$

Don,t do any thing just set the scale of the font and it will work for all type of device

 font.setScale( .9f,.9f);
\$\endgroup\$
  • \$\begingroup\$ Could you add this to his code in your answer to give context on the best location to put this solution, it helps future users understand your answer quickly. \$\endgroup\$ – Tom 'Blue' Piddock Aug 22 '14 at 9:46
  • \$\begingroup\$ Just use this line where you create your bitmap font like in his code he created his bitmap font by writing font = createFont(generator, 64); So just write the line font.setScale( .9f,.9f); below it \$\endgroup\$ – Sudhir singh Aug 22 '14 at 10:02

protected by Community Jul 24 '15 at 13:09

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.