How to use libGDX + Tiled: drawing with libGDX

Project assets

Once we have our tileset and out map, it’s time to start working with libGDX. Create a new project and import it to your favorite code editor.

The first thing to do after project import is to add the required resources to the project assets. In the android sub-project, create a new folder named “maps/” under “assets/” folder, and copy inside it the files tileset.png and level.tmx.

Also delete the image badlogic.jpg included at project generation, because we will not use it.

Code

Next it’s explained how to load and read the map in the main class of the game, MyGdxTiledGame. Before starting, clean the class default implementation:

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

Loading the map

The class TiledMap represents a map created with Tiled Map Editor. This class is the entry point to read and manipulate our map. To load the TiledMap is used the loader TmxMapLoader. The next fragment of code shows how to do it by using the 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();
    }
}

As you can see, the method dispose() is used to liberate resources of the AssetManager.

Map properties

The TiledMap object has associated information that we can read. To do it we use the class MapProperties included in the libGDX distribution.

MapProperties properties = map.getProperties();

The are some properties defined by Tiled Map Editor by default, and we can also add the properties we need on Tiled editor. Probably we need to get at least the next default properties:

width: width of the map expressed in number of tiles.
height: height of the map expressed in number of tiles.
tilewidth: width of each tile expressed in pixels.
tileheigh: height of each tile expressed in pixels.

From those properties we can calculate the dimensions of the map in pixels, a thing we need to set the camera position:

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;
        ...
    }
    ...
}

Preparing the camera

We use an OrthographicCamera object to draw the scene. In this example it’s used a projection resolution of 320px for width and 180px for height. After the camera creation, we set its position to correctly show the map.

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;
        ...
    }
    ...
}

Drawing the scene

The class responsible of drawing the map in the scene is OrthogonalTiledMapRenderer. We create an object of this class and instantiate it on the method create() passing our map as parameter.

Then, on method render(), the screen is cleaned with a blue color, the camera is updated and the map is drawn.

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();
    }
    ...
}

The next image shows the execution’s result:

You can download the example project from my GitHub repository.

Thanks and regards,