Libgdx Camera/Viewport/TiledMap

Question

I am trying to make a game based on a TiledMap (with Camera and Viewport). My game should be scaled that always the whole screen is filled (no black bars) [like in Banana Kong]. I found the ExtendViewport which should solve this problem (I think).

After trying lots of things out I don't find the correct solutions for this. Always the map is scaled to small or/and at the wrong position. When I scale the Window on the Computer it should fill in the whole height with the Tiled Map and than fill the whole length of the screen with see drawable part of the TiledMap (with mentioning the Aspect Ratio).

This is my Code so far, how to make it work?

public class LoadingScreen implements Screen {
//Reference to MainGameClass
private MainGameClass game;

//Camera and Viewport
private OrthographicCamera gamecam;
private Viewport gamePort;

//Tiled MaP
private TmxMapLoader maploader;
private TiledMap map;
private OrthogonalTiledMapRenderer renderer;

public LoadingScreen(MainGameClass game) {
    this.game = game;

    //Camera and Viewport
    gamecam = new OrthographicCamera();
    gamePort = new ExtendViewport(MainGameClass.WIDTH, MainGameClass.HEIGHT, gamecam);

    //Tiledmap
    maploader = new TmxMapLoader();
    map = maploader.load("MarioBros.tmx");
    renderer = new OrthogonalTiledMapRenderer(map, 1);
    gamecam.setToOrtho(false);
}

@Override
public void show() {

}

public void update(float dt) {
    //gamecam.position.x += 1;
    gamecam.update();
    renderer.setView(gamecam);
}

@Override
public void render(float delta) {
    update(delta);

    //Clear Game Screen with black
    Gdx.gl.glClearColor(0,0,0,1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    renderer.render();

    //Begin GameBatch
    game.batch.setProjectionMatrix(gamecam.combined);
}

@Override
public void resize(int width, int height) {
    gamePort.update(width,height);
    gamecam.setToOrtho(false);
}

@Override
public void pause() {

}

@Override
public void resume() {

}

@Override
public void hide() {

}

@Override
public void dispose() {

}
}

Hope someone can help

EDIT 1:

The height of the phone should always be filles with the whole level height. Then the length of the map that you see should also always fill the whole screen. So on mobile which are more stretched you can see more of the level, the height of the level is always as high as the phone.

Also when I manually scale the windows on Pc with the mouse the VIew should be updated!

Answer 1

tileWidth=16;
tileHeight=16;

Total Tiles on map (10 * 6 screen) * 6; // on screen 10 * 6 tiles

so camera viewport dimension should be :

viewportWidth= 10 * 16 ;
viewportHeight= 6 * 16 ;

cam=new OrthographicCamera();
cam.setToOrtho(false,viewportWidth,viewportHeight);

TmxMapLoader tmxMapLoader=new TmxMapLoader();
TiledMap tiledMap=tmxMapLoader.load("untitled.tmx");

tiledMapRenderer=new OrthoCachedTiledMapRenderer(tiledMap);
tiledMapRenderer.setView(cam);

Render

tiledMapRenderer.render();

I'll recommend to use minimum 15 * 10 Tiles per Screen/Page with 32 pixels tileWidth or tileHeigth. When you increase no. to tiles you'll got better precision on gamePlay.

EDIT

You can use ExtendViewport in this way :

public class MyTest extends ApplicationAdapter {

    OrthogonalTiledMapRenderer renderer;
    OrthographicCamera cam;
    ExtendViewport viewport;

    float viewportWidth,viewportHeight;

    @Override
    public void create() {

        viewportWidth=16*10;
        viewportHeight=6*16;

        cam=new OrthographicCamera();
        viewport=new ExtendViewport(viewportWidth,viewportHeight,cam);

        TmxMapLoader loader=new TmxMapLoader();
        TiledMap map=loader.load("untitled1.tmx");

        renderer=new OrthogonalTiledMapRenderer(map);
        renderer.setView(cam);
    }

    @Override
    public void render() {

        Gdx.gl.glClearColor(1,1,1,1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        renderer.setView(cam);
        renderer.render();
    }

    @Override
    public void resize(int width, int height) {
        viewport.update(width,height,false);
        viewport.getCamera().position.set(viewportWidth/2f,viewportHeight/2f,0);
        viewport.getCamera().update();
    }
}

Answer 2

To limit the viewport to the map region requires a few steps.

Firstly we need to work out the full width of the map so we know how much map we have to display.

int totalMapWidth = totalHorizontalTiles * pixelPerTile;
int totalMapHeight = totalVerticalTiles * pixelPerTile;

Now we have our map size we want the viewport size so we can compare against our totalMapWidth and totalMapHeight.

viewport.getWorldWidth();  // our viewport width
viewport.getWorldHeight(); // our viewport height

Finally we need the zoom value of our camera.

float zoom = camera.zoom;

With all the above data we can evaluate the viewport width with the zoom applied.

float evalWidth = viewport.getWorldWidth() * cam.zoom;
float evalHeight= viewport.getWorldHeight() * cam.zoom;

The last step is to clamp the camera position to positions inside the map area.

cam.position.x = MathUtils.clamp(cam.position.x, evalWidth / 2f, 
                    totalMapWidth - evalWidth / 2f);
cam.position.y = MathUtils.clamp(cam.position.y, evh / 2f,
                                    totalMapHeight - evh / 2f);

This should stop the camera showing areas outside the map when zoomed at reasonable levels. If the user zooms out too far that the map is smaller than the viewport width or height then outside areas will be shown. In order to stop this you need to also clamp the zoom level by limiting the zoom.

float minZoom = 0.1f; // this is the zoomed in value
float maxZoom = 1; // this is zoomed out level

Now clamp the camera

camera.zoom = Math.clamp(camera.zoom, minZoom,maxZoom);