Let's examine what we mean when talking about tiling our isometric tiles to form a completely level underground (fig. 1).
For practical purposes, the tiles within this article will have the same size
as the ones defined for the article series
As per the rules also lined out in said document, we address the start point of another flat tile to the right of any given tile by proceeding to the right by 24 pixels (not 46 and not 48), and then downward by 12 pixels:
To address the tile to the right (apparant Southeastern tile, as per outline), one would use:
Now let's examine how the centre tile would fit into the environment, if we elevated it to a certain height. Somewhat arbitrarily, we decide that this upper altitude shall be 12 pixels above the ground level of the other tiles (fig. 2).
Let's assume, that the (cyan) centre tile is elevated as shown, and that the tiles surrounding our displayed area of 3 x 3 tiles are on the same altitude as the 8 (yellow) tiles immediately adjacent to the elevated tile.
To address the start point of a raised tile to the right of any given tile,
we proceed to the right by 24 pixels, as before with a complete level terrain,
but the vertical movement needs some correction now. Initially,
we still want the 12 pixels downward, where we would expect the tile start
if the tile was on the same altitude. But because it is "a level higher" now
(a level being defined to have 12 pixels in our example), we need to take
the higher altitude into account and subtract 12 pixels
We need to subtract and not to add the elevation, because it is assumed,
that the coordinates' origin is in the left upper corner of the screen.
Now, whereas it is possible that terrains as shown in fig. 2 indeed are wanted (in which case we would graphically provide for some absolutely vertical walls to close the gaps), this is not the case in most implementations of natural terrain.
What we usually want instead, are transitions as smooth as possible between one level and the next one.
Notice, that we will have 2 conceptionally different types of transition tiles here. In one type we have 2 out of the 4 corners on a lower elevation, while the other 2 corners are on an upper level (fig. 3).
In the other type we have 3 out of the 4 points on the lower elevation and the only remaining corner is in the upper elevation (fig. 4).
In different terrains it is also possible, that the locations of the 3+1 corners are reversed, i.e. that 3 of the corners are in the upper level, and just 1 corner is in the lower (fig. 5).
If our terrain does never differ by more than one level (which in this article was set to be 12 pixels), then the presented 13 tiles is all what is needed:
This small number makes it very well worthwhile to prefabricate the tiles for your terrain, because such tiles only need to be copied to the correct positions, without any overhead of possibly cumbersome calculations.
This restriction does not mean now, that your terrain can only consist of 2 levels: you can of course involve several ramps to add up to any desired altitude. However, the gradient within your terrain is fixed: either it is flat or it has predetermined slopes.
Fig. 6 shows a small 3×5 landscape involving all 13 tile types (there are 3 flat tiles, and 1 tile each of the other types).
Maybe you were wondering, why I designed the corners with a round base or top, resp. There are two reasons for this:
The first is, that this grants that the landscape has the same slope everywhere; this might be important when your application involves mechanisms to deal with such elevations, as it takes out the need for additional calculations.
The second is an esthetical reason. As soon as you begin to assign qualities to different levels (say, water at a certain level and below), then such can be represented conveniently by treating the two parts of such corner tiles differently, as shown in fig. 7.
What's left is to apply some more realistically looking colors instead of plain colors. This can simply be done by pre-coloring your pre-fabricated tiles (in which case you would need one set for each possible plain underground type, like e.g. sand, rock etc.) and quite many transition tiles (sand can interfer with water, but also with rock, etc.)
You also might want to take care for some shading. If your terrain is supposed to expose always the same orientation at the same time of day (e.g. you always want to look at the terrain from, say, the South, at noon), then you can pre-color your tiles accordingly.
Note, however, that the composition of such tile sets is a very time-consuming task. Once pre-facricated, though, you enjoy the benefits of the very fast copy-and-paste method: there is nothing left to calculate anymore.
If you decide to remain somewhat more flexible with respect of viewing direction and/or time of day and its influence on shade, then it might be a better idea to texture your tiles as they would look like at noon, without any shading. Those effects (if required at all) would then be needed to be inserted by your application as per the actual circumstances, for example by dimming the brightness etc. Brightening and darkening operations can be done almost on the fly in between copy and paste.
As an example, fig. 8 shows an oasis within sandy environment.
Note, that the border between the two underground types is not just a straight line, but appears to be somewhat fuzzy, while still connecting nicely with the neighboring tiles: this can be achieved by defining, that the boundary for each tile shall lie exactly in the middle of an edge, and then drawing the thought curve connecting the two middle points at the edges individually.
Also note, that it is not just a hard curve, separating two regions, but a fuzzy border strip, at either end exposing more of the appropriate underground type, gradually fading out towards the other end.
The following images show all the tiles you need to model your own terrains as described in this article.
The red lines in the images are not actually part of a tile: they are just used as an orientation help and indicate, where a tile of type 0 would be drawn.
The green lines form the equidistant curve from the single isolated corner. They are given purely as a help for your convenience: knowing this line facilitates such tasks as e.g. finding appropriate textures.
The black lines denote the outermost boundaries of a tile. However, if you are going to texture your tiles, then black lines have to be treated the same as the interior pixels, which are shown in yellow.
The two offset columns to the right of the images refer to the starting point of a imaginary box surrounding the tile, relative to where you would draw the tile when it would be of type 0. For example does tile 3 state for the Y offset: minus 12, and from the image it can be seen, that the surrounding box starts 12 pixel rows above the topmost red corner.
Width and height describe the dimensions of that imaginary box surrounding the tile.