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.
Step-by-step example
This is an example of a landscape created using this system:
The above 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 underneath the other tiles.
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:
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=248This is what the final scene looks like with buildings added in:
