javaandroidlibgdxrenderingtmx

Cannot render .tmx map using OrthogonalTiledMapRenderer (Android)


I am having a hard time getting a map to display correctly on my android app using LibGdx. First up here is my code:

public class PlayState extends State {
  private LittleMan littleMan;
  private TiledMap map;
  OrthogonalTiledMapRenderer tiledMapRenderer;

  OrthographicCamera camera;

public PlayState(GameStateManager gsm) {
    super(gsm);
    littleMan = new LittleMan(50,100);
    float w = Gdx.graphics.getWidth();
    float h = Gdx.graphics.getHeight();
    camera = new OrthographicCamera();
    camera.setToOrtho(false, w,h);
    camera.update();
    TmxMapLoader loader = new TmxMapLoader();
    map = loader.load("ste_barbe_map.tmx");
    tiledMapRenderer = new OrthogonalTiledMapRenderer(map);
}

@Override
protected void handleInput() {
}

@Override
public void update(float dt) {
}

@Override
public void render(SpriteBatch sb) {
    // if viewport modified
    // sb.setProjectionMatrix(cam.combined);
    Gdx.gl.glClearColor(1, 0, 0, 1);
    Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    camera.update();
    tiledMapRenderer.setView(camera);
    tiledMapRenderer.render();
    /*
    sb.begin();
    sb.draw(littleMan.getTexture(),littleMan.getPosition().x,littleMan.getPosition().y);
    sb.end();
    */
}

@Override
// free some ressources
public void dispose() {
}
}

So when i try to run the app and call the render method i just get a red background with nothing on it. Here are some things i tried:

  1. using a smaller map with just a line of tiles, this displays correctly (even though i'm not sure its at the right position):

small map

  1. playing around with scaling: i can display the map but its either very small or i can only see the edges

with this line changed to : tiledMapRenderer = new OrthogonalTiledMapRenderer(map,0.5f);I get:

0.5f scaling

And with this line : tiledMapRenderer = new OrthogonalTiledMapRenderer(map,1/8f);

I get this very zoomed out image of the map:

enter image description here

Does anyone know what i am doing wrong? Maybe my tmx file is bad, maybe it's something with the camera, or something else i really don't know. Thanks for the help!


Solution

  • Set Camera ViewPort according to your map like this.

    TmxMapLoader loader = new TmxMapLoader();
    map = loader.load("ste_barbe_map.tmx");
    tiledMapRenderer = new OrthogonalTiledMapRenderer(map);
    TiledMapTileLayer layer=(TiledMapTileLayer)map.getLayers().get(0);
    
    float w=layer.getTileWidth()*layer.getWidth();   // 100*34
    float h=layer.getTileHeight()*layer.getHeight();  // 100*34
    
    camera=new OrthographicCamera(w,h);
    // you can manually set camera viewport 
    //camera=new OrthographicCamera(100*34,100*34);
    

    You can also try this

    camera=new OrthographicCamera(34,34);
    float unitScale = 1 / 100f;
    OrthogonalTiledMapRenderer renderer = new OrthogonalTiledMapRenderer(map, unitScale);
    

    Get more how unitScale works :
    https://github.com/libgdx/libgdx/wiki/Tile-maps#rendering-tiled-maps

    EDIT

    I checked .tmx file, it has 3 layer. There is a TiledMapImageLayer at 0 index that's why it give you cast error. At index 1 and 2 there is TiledMapTileLayer so get layer from index 1.

    I tried to load your .tmx in my code and it render on display.

    public class TestGame extends Game {
    
        TiledMap map;
        OrthographicCamera camera;
        TiledMapRenderer tiledMapRenderer;
    
        @Override
        public void create() {
    
            TmxMapLoader tmxMapLoader=new TmxMapLoader();
    
            map=tmxMapLoader.load("ste_barbe_map.tmx");
    
            TiledMapTileLayer layer=(TiledMapTileLayer) map.getLayers().get(1);
    
            tiledMapRenderer= new OrthogonalTiledMapRenderer(map);
            camera=new OrthographicCamera();
            camera.update();
            float widthHeightRatio=1.66f; 
            camera.setToOrtho(false,(layer.getWidth()*layer.getTileWidth())/widthHeightRatio,layer.getHeight()*layer.getTileHeight());
        }
    
        @Override
        public void render() {
    
            Gdx.gl.glClearColor(1,0,0,1);
            Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    
            camera.update();
            tiledMapRenderer.setView(camera);
            tiledMapRenderer.render();
        }
    }
    

    Map having same number of tile in horizontal and in vertical. Your game will be either in landscape or portrait so keep a ratio for this like(for landscape 25 tile in horizontal and 15 tile in vertical).

    widthHeightRatio become 1 if you maintain ratio.