2D Game Tiling

Traditional Grid system
The traditional tiled game uses tiles that are opaque and the same size and shape - usually square or hexagonal - and located side by side in a "grid". This grid system of tiling was developed mainly because of limitation of hardware in the 90's, when these type of games became popular.

Screenshot from Battle for Wesnoth. Traditional 2D tiled game

 Some of the tiles used to make the above scene:

The disadvantages of this system are mainly artistic.  The artist has to create a lot more tiles to provide variety in the landscape. Also, extra tiles need to be created to provide the borders between one type of terrain and another, for essentially what is the same graphic. It's still quite limited what can be created from the tile set - for instance the tree tiles always have to be centered in the middle of the tile.

However, the limitations of the grid system are unnecessary. Now days most devices have a decent graphics processor and can handle multiple layers of alpha-transparent tiles with ease.

The "Big Pile of Tiles" system

So, how to we create a better tiling system? The answer is quite obvious - just remove all the restrictions. Get rid of the grid idea completely, so you just have a "big pile of tiles". Tiles are alpha transparent and can be layered on top of each other many times. Each tile can be located anywhere in the scene and it can have any orientation, scaling, or transparency.
Let me show you terrain for created using this system:

(this scene is from our game Armageddon War)
 
The scene was created using these tiles:

First we started with the opaque square base tile and lay this tile down side-by-side:

This provides a fine level of detail lying underneath all the other tiles.

Then we add the mottled tile to add larger levels of detail:

(Note that each tile is rotated and scaled and uses different levels of alpha blending.)

Next we add the black and white tiles to create dark and light areas:

Then, we add the road tiles:

Finally, some gray tiles at the top and cracks:

As you can see, with just a small selection of tiles we can create a wide variety of landscape and the result does not look like it's built out of tiles.
The tile editor creates these tiles in a text file. This is what the above scene tiles looks like:


tile name=plainTile type=base
tile name=stainWhite1 x=-32 y=424 zorder=1 alpha=30 scale=5.3
tile name=stainWhite1 x=107 y=346 zorder=1 alpha=45 scale=5.3 rotation=330
tile name=stainBlack4 x=134 y=259 zorder=1 alpha=65
tile name=stainBlack4 x=-40 y=217 zorder=1 alpha=85 scale=1.8
tile name=plaza3 x=207 y=211 zorder=1 alpha=85 scale=1.55 rotation=68
tile name=plaza3 x=37 y=198 zorder=1 scale=1.7 rotation=346
tile name=stainRect x=-63 y=369 zorder=2 alpha=50 scale=1.05 rotation=264
tile name=stainRect x=582 y=237 zorder=2 alpha=60 scale=2 rotation=280
tile name=stainRect x=966 y=17 zorder=2 alpha=70 scale=1.45 rotation=359
tile name=stainRegular3 x=306 y=529 zorder=2 alpha=80 scale=1.9 rotation=267
tile name=roadBroken1 x=55 y=373 zorder=4 alpha=50 rotation=263
tile name=roadNarrow3 x=361 y=401 zorder=4 alpha=55 rotation=350
tile name=roadNarrow3 x=327 y=722 zorder=4 alpha=60 scale=1.15 rotation=248

This is what the final scene looks like with buildings added in: