loading TiledMap into stage class ,libgdx

Question

Im trying to loading a tmx map into stage class but when i run my game the screen dont show nothing about the map,only print the character, i think the problem is the camera but dont know how solve it:

Abstract Screen:

public abstract class AbstractScreen extends Stage implements Screen{



protected AbstractScreen(){
    //Crea un punto de vista por defecto
    super(new StretchViewport(1024, 720));
}

/**
 * que deberá ser implementado por cada pantalla de nuestro juego. 
 * Este método se utiliza para añadir los actores a cada escena 
 * (LibGDX Scene2d).
 */
public abstract void buildStage();
public abstract void dispose();

public void render(float arg0) {
    /*
     * Limpiamos la Screen
     */
    //Con esto se define el color con el que se borrara el buffer al hacer un glClear()
    //Rgb y alpha(transparecia)
    Gdx.gl20.glClearColor(0, 0, 0, 1);
    // limpiar el buffer depth, el buffer secundario, 
    //para que no tenga cosas previamente dibujadas
    Gdx.gl.glClear(GL11.GL_COLOR_BUFFER_BIT);
    //buildStage();
    //llamada metodos stage
    super.act(Gdx.graphics.getDeltaTime());
    super.draw();
}

public void show() {
    // TODO Auto-generated method stub
    Gdx.input.setInputProcessor(this);
}


public void resize(int width, int height) {
    getViewport().update(width, height, true);

}


public void hide() {}

public void pause() {}

public void resume() {}

}

Screen:

public class SpriteScreen extends AbstractScreen implements InputProcessor {

//private SpriteActor mActor;
private Player jugador;
private TouchPadPlayer touchpad;

private TiledMap map;
private static OrthogonalTiledMapRenderer renderer; 
private TiledMapTileLayer collision;

public SpriteScreen() {
    this.jugador = new Player(getWidth() / 2, getHeight() / 2);
    this.touchpad = new TouchPadPlayer();
    this.touchpad.setPosition(100, 100);

    this.map=new TmxMapLoader().load("assests/maps/example.tmx");
    collision = (TiledMapTileLayer)map.getLayers().get("Colisiones");
    renderer = new OrthogonalTiledMapRenderer(map, 1 / 16f);
}

@Override
public void buildStage() {
    // TODO Auto-generated method stub
    renderer.render();      
    Gdx.input.setInputProcessor(this);
    addActor(this.jugador);
    addActor(this.touchpad);

    this.getCamera().update();
    renderer.setView((OrthographicCamera) this.getCamera());
    renderer.render();


}

@Override
public void dispose() {
    // TODO Auto-generated method stub
    map.dispose();
    renderer.dispose();
}

Answer 1

First of all, what's the size of your tiles? Are you sure it's 16 x 16 px? If that's the case then in your AbstractScreen in the resize method you need to adjust the camera to:

 public void resize(int width, int height) {
    getViewport().update(width, height, true);
    getViewport().getcamera().viewportWidth = YourScreenWidth / 16f;
    getViewport().getcamera().viewportHeight = YourScreenHeight / 16f;
    //set the camera to start from 0,0 and not from the center of the screen
    getViewport().getcamera().setToOrtho(false,                                            
                                        getViewport().getcamera().viewportWidth / 2f,
                                        getViewport().getcamera().viewportHeight/ 2f);

   getViewport().getcamera().update();
 }

This should display your map on the whole screen. Basically, with the tiled maps you can't resize them programatically, since there are no setSize, setWidth etc. methods so the trick is to play with the camera and the tile size to display them correctly.

Answer 2

You have to call renderer.render(); in the render() method of your 'Screen' not in the buildStage() method.