Java - LibGDX - Problems with the process of rendering a Tiled map

Question

The problem

I cannot seem to be able to get Tiled maps to render properly. I am using LibGDX as a library for loading the map (Release 1.6.0).

Video demonstration

I have created a video to show you the actual problem and make things easier by skipping the whole process of explaining it. Here is a link to it.

The code I've used

protected Level level;
protected OrthogonalTiledMapRenderer mapRenderer;
protected OrthographicCamera camera;
protected TiledMap map;
protected MainGameLoop game;
protected SpriteBatch batch;
private BitmapFont font;
private int w, h;

public Level1(MainGameLoop game) {
    this.game = game;
}

@Override
public void show() {
    w = Gdx.graphics.getWidth();
    h = Gdx.graphics.getHeight();
    int CAMERA_WIDTH = 800;
    int CAMERA_HEIGHT = 450 * (w / h);
    camera = new OrthographicCamera(CAMERA_WIDTH, CAMERA_HEIGHT);
    camera.setToOrtho(false);
    camera.update();
    map = new TmxMapLoader().load("maps/map1.tmx");
    mapRenderer = new OrthogonalTiledMapRenderer(map);
    Gdx.input.setInputProcessor(this);
    font = new BitmapFont();
    font.setColor(Color.BLUE);
    batch = new SpriteBatch();
}

@Override
public void render(float delta) {
    Gdx.gl.glClearColor(1, 1, 1, 1);
    Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    camera.update();
    mapRenderer.setView(camera);
    mapRenderer.render();
    batch.begin();
    font.draw(batch, "Camera zoom: " + camera.zoom, 40, 40);
    batch.end();
}

@Override
public void resize(int width, int height) {
    camera.viewportWidth = width;
    camera.viewportHeight = height;
    camera.update();
}

@Override
public void dispose() {
    mapRenderer.dispose();
    map.dispose();
    background.dispose();
    Gdx.input.setInputProcessor(null);
}

@Override
public boolean scrolled(int amount) {
    camera.zoom += amount;
    camera.update();
    return true;
}
    // Here go the rest of the methods, such as pause, resume, hide, keyDown, keyUp, keyTyped, touchDown, touchUp, touchDragged & mouseMoved.

Solutions I've tried

I have tried using different numbers for the camera's x and y with no luck. I have also tried tranlating the camera to the proper position (hardcoded it), as well as using another map (different tilemap and dimensions) but that did not work either.

Conclusion

I can't seem to find a way to fix this problem. Any help is much appreciated. Thank you very much.

Answer 1

Quick introduction

Ok after a good while, I managed to solve this matter by hardcoding some stuff. But it works properly, so I am happy with it.

What I did to solve the problem

• First of all, I found out the exact number I had to use to scale up my Tiled map, which is this number: 3.125f .
• Then, instead of using pixels for the camera, I used my own units (something I should have done from the the first moment).
• After doing those two things, I noticed that the map was zoomed in a lot. So, by using the scrolled method from the InputProcessor, I managed to find the exact number the map had to be "unzoomed".
• I also found out that if I call the setToOrtho(false) method from the OrthographicCamera object, it zooms the map in 19 times for some weird reason. If that method does not get called, the map is zoomed in only 1 time

The code I am currently using

TiledMap tiledMap;
OrthographicCamera camera;
TiledMapRenderer tiledMapRenderer;

final float WIDTH = 8000;
final float HEIGHT = 4500;
final float num = 3.125f;
@Override
public void show() {
    tiledMap = MapLoader.realm1_level1;
    tiledMapRenderer = new OrthogonalTiledMapRenderer(tiledMap, num);
    camera = new OrthographicCamera(WIDTH, HEIGHT);
    Gdx.input.setInputProcessor(this);
    camera.zoom += 1f;
    camera.update();
}

@Override
public void render(float delta) {
    Gdx.gl.glClearColor(1, 1, 1, 1);
    Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    tiledMapRenderer.setView(camera);
    tiledMapRenderer.render();
}
// This method was just used for testing to see where 
// the map was or should have been placed.
@Override
public boolean keyDown(int keycode) {
    if (keycode == Input.Keys.LEFT)
        camera.translate(-32, 0);
    if (keycode == Input.Keys.RIGHT)
        camera.translate(32, 0);
    if (keycode == Input.Keys.UP)
        camera.translate(0, 32);
    if (keycode == Input.Keys.DOWN)
        camera.translate(0, -32);
    if (keycode == Input.Keys.NUM_1)
        tiledMap.getLayers().get(0).setVisible(!tiledMap.getLayers().get(0).isVisible());
    return true;
}

@Override
public void resize(int width, int height) {
    camera.position.set(WIDTH, HEIGHT, 0);
    camera.update();
}

@Override
public boolean scrolled(int amount) {
    camera.zoom += amount;
    camera.update();
    return true;
}

@Override
public void dispose() {
    tiledMap.dispose();
}
// And here go the rest of the methods that come from the 
//Screen and the InputProcessor interfaces.

Notes

1. The numbers I used for the WIDTH and the HEIGHT variables work properly, strictly with tiled maps that their width is 80 tiles, and their height is 45 tiles.
2. If you are facing the same problem, you'll have to find the appropriate number to scale your map up/down, depending on the unit numbers you're using. Trial and error is your only guide. If we ignore StackOverflow of course.