Isometric Tiling
|
URI: |
http://herbert.gandraxa.com/herbert/imt.asp |
|
Link template: |
<a href="http://herbert.gandraxa.com/herbert/imt.asp">Isometric Tiling</a> |
|
Link symbols: |
|
On current page |
On external site |
ZIP archive |
PDF |
E-Mail
Table of Contents
Article
Organization
Home »
Articles »
Digital Terrain Analysis »
Isometric Tiling
Scope
This article is the third in a series dealing with Digital Terrain Analysis, following the first article Digital Elevation Model (DEM) and the second article Isometric Projection.
In this article the implementation of an underground consisting of isometric tiles will be studied. The developed tiles allow for completely flat terrains as well as for terrain gradients with a constant slope. The presented model easily can be expanded to comprise also steeper slopes, although the concept of pre-designed tiles only allows to overcome altitudes in pre-determined discrete steps.
Author
Published
2007-Nov-07
External Links
Isometric Projection on Wikipedia
Tiling Concept
Flat Tiles
Fig. 1: A level underground
(click on figure for 4x zoom)
Let's examine what we mean when talking about tiling our isometric tiles to form a completely level underground (see fig. 1 to the right).
For practical purposes, the tiles within this article will have the same size as the ones defined for the article series Designing Isometric Avatars: they are 46 pixels wide and 24 pixels high. For the reason of this seemingly disturbing odd ration of not 2:1, see the foundations in article Isometric Projection.
Examine the close-up of figure 1 (click on the image) for an instant: it can be seen how the individual tiles need to be connected to each other to provide a plane.
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):
X+24
Y+12
Elevated Tiles
Fig. 2: A raised tile
(click on figure for 4x zoom)
Now let us consider, how the centre tile would fit into the environment, if we elevated it 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), we need to take the higher altitude into account and subtract 12 per such differing level:
To address the tile to the right:
X+24
Y+12-L*12
Ramps between Levels
Fig. 3: Straight ramps
(click on figure for 4x zoom)
Fig. 4: A type of corners
(click on figure for 4x zoom)
Fig. 5: The other type
(click on figure for 4x zoom)
Now, whereas it is possible that such 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 smooth transitions 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 and the other 2 on the upper (fig. 3).
In the other type we have 3 out of the 4 points on the lower elevation and only the 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:
- 1 flat tile
- 4 straight ramps
- 2×4 corner ramps
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 the 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 a predetermined slope.
All tiles combined
Fig. 6: All tile types combined
(click on figure for 4x zoom)
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 suchelevations, 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 such corner tiles' two parts differently, as shown in fig. 7.
Fig. 7: Effect of tile regions (no zoom)
Texturing
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.
Fig. 8: Texture applied (no zoom)
As an example (and a teaser), 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.
Geometry of the Tiles
Explanations
The following images show all the tiles you need to model your own terrains as described in this article.
The red lines in the figures below 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 equidistance 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 are no different than the interior pixels, which are shown in yellow.
The two offset columns 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.
The Tiles
 Tile type 0 |
Width: | 46 |
| Height: | 24 | |
| Offset X: | 0 | |
| Offset Y: | 0 | |
 Tile type 1 |
Width: | 46 |
| Height: | 12 | |
| Offset X: | 0 | |
| Offset Y: | 0 | |
 Tile type 2 |
Width: | 46 |
| Height: | 12 | |
| Offset X: | 0 | |
| Offset Y: | 0 | |
 Tile type 3 |
Width: | 46 |
| Height: | 36 | |
| Offset X: | 0 | |
| Offset Y: | minus 12 | |
 Tile type 4 |
Width: | 46 |
| Height: | 36 | |
| Offset X: | 0 | |
| Offset Y: | minus 12 | |
 Tile type 5 |
Width: | 46 |
| Height: | 12 | |
| Offset X: | 0 | |
| Offset Y: | 0 | |
 Tile type 6 |
Width: | 46 |
| Height: | 24 | |
| Offset X: | 0 | |
| Offset Y: | 0 | |
 Tile type 7 |
Width: | 46 |
| Height: | 36 | |
| Offset X: | 0 | |
| Offset Y: | minus 12 | |
 Tile type 8 |
Width: | 46 |
| Height: | 24 | |
| Offset X: | 0 | |
| Offset Y: | 0 | |
 Tile type 9 |
Width: | 46 |
| Height: | 12 | |
| Offset X: | 0 | |
| Offset Y: | 0 | |
 Tile type 10 |
Width: | 46 |
| Height: | 36 | |
| Offset X: | 0 | |
| Offset Y: | minus 12 | |
 Tile type 11 |
Width: | 46 |
| Height: | 36 | |
| Offset X: | 0 | |
| Offset Y: | minus 12 | |
 Tile type 12 |
Width: | 46 |
| Height: | 36 | |
| Offset X: | 0 | |
| Offset Y: | minus 12 |
