Cómo usar libGDX + Tiled: dibujando con libGDX

Recursos del proyecto

Una vez tenemos nuestro tileset y nuestro mapa, es hora de empezar a trabajar con libGDX, para ello creamos un nuevo proyecto y lo importamos a nuestro editor de código.

Una vez importado, lo primero será añadir los recursos al proyecto. En el sub-proyecto android, crearemos una carpeta «maps/«, y dentro copiamos los archivos tileset.png y level.tmx.

Además borramos la imagen badlogic.jpg incluida al crear el proyecto, ya que no la necesitamos.

Código

A continuación explicaremos como cargar y dibujar el mapa en la clase principal del juego, MyGdxTiledGame. Antes de comenzar, limpiamos la implementación por defecto de la clase:

public class MyGdxTiledGame extends ApplicationAdapter {
 
    @Override
    public void create () {  }
 
    @Override
    public void render () {  }
 
    @Override
    public void dispose () {  }
}

Cargando el mapa

La clase TiledMap representa un mapa generado con Tiled Map Editor. Es el punto de entrada a la manipulación de nuestro mapa. Para cargar el TiledMap, utilizaremos el cargador TmxMapLoader. El siguiente fragmento de código muestra cómo hacerlo utilizando el AssetManager:

public class MyGdxTiledGame extends ApplicationAdapter {
 
    private TiledMap map;
    private AssetManager manager;
    ...
 
    @Override
    public void create () {
        manager = new AssetManager();
        manager.setLoader(TiledMap.class, new TmxMapLoader());
        manager.load("maps/level.tmx", TiledMap.class);
        manager.finishLoading();
 
        map = manager.get("maps/level.tmx", TiledMap.class);
        ...
    }
 
    @Override
    public void dispose () {
        manager.dispose();
    }
}

Como se puede ver, se utiliza también el método dispose() para liberar los recursos del AssetManager.

Propiedades del mapa

El objeto TiledMap contiene información en forma de propiedades que podemos leer. Para la lectura de propiedades utilizaremos la clase MapProperties que ofrece libGDX.

MapProperties properties = map.getProperties();

Por defecto encontraremos una serie de propiedades definidas por Tiled Map Editor, y también podemos agregar las que necesitemos desde el editor de Tiled. De las propiedades que tiene el mapa, es muy probable que necesitemos al menos las siguientes:

• width: indica el ancho del mapa en número de tiles.
• height: indica el alto del mapa en número de tiles.
• tilewidth: indica el ancho de cada tile en píxeles.
• tileheigh: indica el alto de cada tile en píxeles.

A partir de las propiedades anteriores podemos el calcular el tamaño total del mapa en píxeles, cosa que necesitaremos para, entre otras cosas, posicionar la cámara:

public class MyGdxTiledGame extends ApplicationAdapter {
    ...
    // Map properties
    private int tileWidth, tileHeight,
                mapWidthInTiles, mapHeightInTiles,
                mapWidthInPixels, mapHeightInPixels;
    ...
    @Override
    public void create () {
        ...
        // Read properties
        MapProperties properties = map.getProperties();
        tileWidth         = properties.get("tilewidth", Integer.class);
        tileHeight        = properties.get("tileheight", Integer.class);
        mapWidthInTiles   = properties.get("width", Integer.class);
        mapHeightInTiles  = properties.get("height", Integer.class);
        mapWidthInPixels  = mapWidthInTiles  * tileWidth;
        mapHeightInPixels = mapHeightInTiles * tileHeight;
        ...
    }
    ...
}

Preparando la cámara

Para dibujar la escena utilizaremos una cámara ortográfica OrthographicCamera, en este ejemplo usando una resolución de proyección de 320px de ancho por 180px de alto. Una vez creada, ajustamos su posición para dibujar el mapa en la posición deseada.

public class MyGdxTiledGame extends ApplicationAdapter {
    ...
    private OrthographicCamera camera;
    ...
    @Override
    public void create () {
        ...
        // Set up the camera
        camera = new OrthographicCamera(320.f, 180.f);
        camera.position.x = mapWidthInPixels * .5f;
        camera.position.y = mapHeightInPixels * .35f;
        ...
    }
    ...
}

Dibujando en la escena

La clase encarga de dibujar el mapa en nuestra escena es OrthogonalTiledMapRenderer. Creamos un objeto de esta clase, y lo instanciamos en el método create() pasándo nuestro mapa como parámetro.

Después, en el método render(), se limpia la pantalla con un color azul, se actualiza la cámara y dibuja nuestro mapa.

public class MyGdxTiledGame extends ApplicationAdapter {
    ...
    private OrthogonalTiledMapRenderer renderer;
 
    @Override
    public void create () {
        ...
        renderer = new OrthogonalTiledMapRenderer(map);
        ...
    }
 
    @Override
    public void render () {
        Gdx.gl.glClearColor(.5f, .7f, .9f, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
 
        camera.update();
        renderer.setView(camera);
        renderer.render();
    }
    ...
}

La siguiente imagen muestra el resultado de la ejecución:

Puedes descargar el proyecto completo desde mi repositorio de GitHub.

Gracia y saludos,