*libGDX* Creating the Map or Platform – Tiled

To create the map that will be used in the game, we use an amazing free open source program called Tiled. You are able to download it from here:

http://www.mapeditor.org/

Open opening this browser, you are able to create a new map. For mine i kept the tile size at 32, and made the map 25×15 as to keep the total pixel size as 800×480 so no screen resizing would be needed in our 800×480 size game. For the tile layer format, Base64 zlib is recommended as the best for tmx maps to use withing libGDX.

Open creating the new map you are exposed to the following:

Tiles – Simply a graphic you can use to build your map. These can be easily made in paint as I do, or very nice royalty free ones are available online.
Layers – These are you layers in to which you can add different tiles, such as a pathways/walls/traps, any kind of tile type that you would wish to distinguish from others.

Now simply just click the tile from tile set and add it to the map as your heart desires, to achieve a result such as the following with two layers of “pathway” (mine is called Tile Layer 1) and “barricade”:

And then it is as simple as that, your map is created.

Now to add it to the game the following must be done in addition to adding the tiled map into your assets folder. In your main class (e.g. GameScreen) which renders the game, you must define two new variables:

1
2
3
4
5

    //Creates a reference for our tiled map
    private TiledMap tiledMap = new TmxMapLoader().load("testmap.tmx");

    //creates a reference for our tiledmaprenderer whichs loads are tiled map
    private OrthogonalTiledMapRenderer mapRenderer = new OrthogonalTiledMapRenderer(tiledMap);

Then in the render section, this code will cause the map to be rendered, along with an optional code to center the camera around your character’s location (you will have to create the character class in order to copy this):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

//makes the camera fit onto the available screen
        game.gameBatch.setProjectionMatrix(camera.combined);
        //sets the map renderer to display in the camera
        mapRenderer.setView(camera);
        //renders the map
        mapRenderer.render();

        //If you wish for the camera to follow to character
        camera.position.x = character.charPosition.x;
        camera.position.y = character.charPosition.y;

        //updates camera view
        camera.update();