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)
And this is the result on my MacBook: (480x800, 0.6875 density)
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.
