LibGDX - Scaling Isometric Tiled Map to screen size. Larger screen larger map

Question

I'm new to LibGDX so I'm stil trying to get the gist of it. I rendered an Isometric map onto the screen and finally after almost 2 days I managed to center it on the screen. However it remains the same size no matter how large the screen is. here's what I mean:

800x600

1920x1080

What I want it to do is to scale the map up depending on how large the screen is. Here's the code:

public class PlayScreen implements Screen {

    private TiledMap map;
    private IsometricTiledMapRenderer isometricRenderer;
    private OrthographicCamera camera;

    public void createUI() {
        // Load map from tiled .tmx file.
        map = new TmxMapLoader().load("arena1/arena1.tmx");

        // Setup isometric renderer and camera.
        isometricRenderer = new IsometricTiledMapRenderer(map);
        camera = new OrthographicCamera();
    }

    @Override
    public void show() {
        Gdx.gl.glClearColor(0, 0, 0, 1);
        createUI();
    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        isometricRenderer.setView(camera);
        isometricRenderer.render();
    }

    @Override
    public void resize(int width, int height) {
        camera.viewportWidth = width * 2;
        camera.viewportHeight = height * 2;
        camera.position.set(768, 0, 0);
        camera.update();
    }

    @Override
    public void pause() {}

    @Override
    public void resume() {}

    @Override
    public void hide() {}

    @Override
    public void dispose() {
        map.dispose();
        isometricRenderer.dispose();
    }
}

Thanks in advance!

Answer 1

To work with different screen sizes libGDX has Viewports. They keep ratio of all drawing on a screen the same on different screens.

For example FitViewport it will always maintain the aspect ratio of the virtual screen size, while scaling it as much as possible to fit the screen.

  public class PlayScreen implements Screen {

    private TiledMap map;
    private IsometricTiledMapRenderer isometricRenderer;
    private FitViewport viewport;

    public void createUI() {
        // Load map from tiled .tmx file.
        map = new TmxMapLoader().load("arena1/arena1.tmx");

        // Setup isometric renderer and camera.
        isometricRenderer = new IsometricTiledMapRenderer(map);

        int width = 800; // Can change to other
        int height = 480;
        viewport = new FitViewport(width, height, new OrthographicCamera(width, height));

        viewport.camera.position.set(768, 0, 0);
    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        isometricRenderer.setView(viewport.camera);
        isometricRenderer.render();
    }

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