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 system has many disadvantages. 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 an other – for essentially what is the same graphic. The end result will still look like it’s created out of a grid of tiles.
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. Now days most devices have a decent graphics processor and can handle this easily.
Then we add the mottled tile to add larger levels of detail. The same tile is added several times with different scaling and rotation.
Next we add the black and white tiles to create dark and light areas:
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: