Tiled map is a really good tool to create a classical 2D game. Everything already exists from editor to rendering. You just need to produce some tilesets, create a map with a tool like Tile map editor and with some few lines of code from libgdx, you have a 2D area game. You can find tons of tutorials explaining how to do this, including the official libgdx wiki.

Sadly nothing exists to render a fake perspective:BNyonmNCYAA6JYY if you put a wall tile on the map and use a sprite for a character behind the wall, the sprite will not be hidden because all tiles form the map are drawn before sprites.

After a discusion with @_TylerChurchill on twitter, I have implemented a solution using 2 different layers in my map, one for all the basic stuff (floor, walls, objects) and one for all elements that should hide all things drawn before – the “perspective”.

My standard map definition looks like the screenshot below:

ScreenShot149

I just added a new layer named “perspective”

ScreenShot151

And isolate all perspective elements in this layer:

ScreenShot150

In order to use this trick, I create a new TiledMapRenderer class from libgdx to ignore the “perspective” layer when the method #render() is called and add a new method to call to render it at the end of my drawing iteration process.

In my game initialization method,  I have initialized my new TileMapRenderer specifying that the layer to ignore is named “perspective”

In the rendering iteration process, i have called the #render() method from the map renderer, then i drew all sprites and then i have called the new #renderPerspective() method. Notice that you need to order all sprites using their “y” coordinates from the farest to the closest in order to keep a correct perspective for sprites.

The result: BOwerG0CEAAtsML

  • always add a padding between tiles to  avoid texture glitch. Texture smoothing could take adjacent pixel in consideration. A gap between tiles will avoid this problem.
  • consider using only one atlas image to render all the scene: switching between images on graphics processor take a lot of time.
  • using atlas help you manage only power of two size images even if content has not power of two size (open gl 1.x).
  • merge all animations for a sprite in one atlas image.
  • if you are using libgdx, the library propose a class which create automatically atlas image when called.