Prettier Maps


Code for this tutorial is on this git branch:

git clone -b better_maps https://dglencross@bitbucket.org/dglencross/zombiegametutorial.git

Have a look here for help setting it up


This is a screenshot from Dinowar, our Android game written with Libgdx. The random map generation is very similar to what we have implemented in this Zombie tutorial.

Compare that to what we have done so far in this tutorial series:

Until now, we haven’t put a lot of effort into making the maps look better. In this tutorial, we will make some changes so that our maps look more like this:

50% water

Notice how the edges are much cleaner, they are have curved corners and nicer edges. There is also a clear, coloured border line.

20% water

Let’s take a look at how we have achieved this. Firstly, we have created a bunch of new images (which you can use in your own projects). These are under the assets_general/tiles folder.

These images might not look obviously related to the screenshots above – but we will see how they form to create the rounded edges that we want.

Terrain transitions

At the moment, the borders of the land are just solid, blocky divisions and look very rough. To make our map look good, we need some way of making the transitions between these different types of tile look more natural.

The solution we have used is taken from this tutorial:

https://www.gamedev.net/resources/_/technical/game-programming/tilemap-based-game-techniques-handling-terrai-r934

I strongly recommend you go read this tutorial – it is not long, and I do not see the point of reproducing the content here.

But, to summarise as quickly as possible – for each tile, we work out if it touches a tile of a different type (in our case, where land and water touch) and work out what bits of the tile we should draw. But seriously, go read that tutorial.

When water meets land, the water ‘overlaps’ the ground to allow for a smoother looking transition.

Our implementation

We calculate the the transition information for each tile when we create the map. We loop through all the tiles and work out which transition images we want to apply to each one, then store that information in the Tile object. Each tile has been assigned a number of sprites which sit on top of one another to achieve the full effect. Then each time we draw, we draw every sprite for each individual tile.

Check out the changes in the following classes:

Tile.java, TileSprite.java, Pair.java and MapTools.java

Tile.java

Firstly, we load in all the sprites that we are going to use in setSprites().

Now, when a Tile is created, we create our corners and edges that will be drawn on each update.

public Tile (Pair pair) {
   makeCorners(pair);
   makeEdges(pair);
}

I’m not going to reproduce all the code here – check out the project and look for yourself. But the makeCorners() and makeEdges() methods set up what the tile is going to look like based on its neighbours (i.e. its surrounding tiles).

TileSprite.java

Now, when we draw our tiles (and TileSprites), we draw the ‘solid’ and ‘line’ sections’ of each tile. The ‘line’ parts are the borders – you can see what I mean with the following screenshot – this has had the lines removed:

Compare that to a previous screenshot. Personally I think it looks much better with the lines – but if you don’t want them, delete the following in TileSprite.java:

if (linePart!=null) {
   linePart.setBounds(pair.x, pair.y, 1, 1);
   linePart.setColor(lineColor);
   linePart.draw(batch);
}

Then delete code around adding the lines – but I don’t think you’ll want to do this.

Conclusion

I haven’t gone into a huge amount of detail about the code in this tutorial, but it is not that complicated – the important thing is to understand the concept, and your best way to do that is to read the tutorial I linked to above (and here) on GameDev.net. The code provided is based on the ideas from the GameDev tutorial.

It transforms a blocky map into a much nicer, smoother looking map. And it is possible for more than just land and water – if you are creating a more detailed map, you can fiddle with the order of precedence of your map details to get them to smoothly transition into one another.



If you like these tutorials, or want to see a game that was written in much the same way, please download Dinowar from the Google Play Store. It costs nothing and is ad-free.

Leave a Reply

Your email address will not be published. Required fields are marked *