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,
Thank you very much for the tutorial! It was very useful for my project.