11
\$\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\$
3
  • \$\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, 2014 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, 2014 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\$ Jun 29, 2014 at 17:17

2 Answers 2

16
\$\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\$
7
  • \$\begingroup\$ Thanks @Eejin, is what I needed and it works perfectly. Then the answers I linked are for showing the same real size? \$\endgroup\$ Jun 30, 2014 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, 2014 at 13:49
  • \$\begingroup\$ thx! it worked!! \$\endgroup\$
    – ParampalP
    Dec 22, 2014 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\$
    – House
    Jan 3, 2015 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, 2015 at 18:16
3
\$\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\$
3
  • \$\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\$ Aug 22, 2014 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\$ Aug 22, 2014 at 10:02
  • \$\begingroup\$ This is definitely the best answer, you don't have to care about different screen resolutions or ratios. It will fit perfectly every text as you see it in your testing device. \$\endgroup\$
    – CeuxDruman
    Jul 26, 2020 at 11:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .