Tile Metrics: Improving Terrain Graphics and Road Connectivity
This guide is an edited version of the thread with the same name I started on the Apolyton forums on 30 January 2004.
MercatorThis thread is based on a hunch I had this morning. However, two earlier findings played a role, namely: Allard Höfelt's "The truth about civ2 squares" (which I mostly disprove, incidentally, even though the ideas are good), and my own map grid images (which this thread builds upon).
What happens if you put a transparent terrain square below a terrain square which extends below its diamond?
The result is clear. On the left of the screenshot you see the usual result, a black void which turns into rubbish if you start moving around the map. On the right you see how the red from the Desert graphic fills up the top transparent half of the Plains graphic. Also note that the red only appears over the semi-transparent Plains, while it isn't visible in any other squares.
This immediately disproves Allard's thread (not to mention his "assymetrical pixel" was a load of hokey), because this shows that graphics can extend below the diamond shape just fine. The lower edge of a tile isn't a fixed boundary beyond which everything disappears. It all just depends on what the tiles to the Southeast and Southwest of it look like.
The reason for this is that the map is drawn from top to bottom, row by row. With the usual "jagged" diamond shape, there is a thin line of overlap as Allard noted. This does indeed explain the gap in North/South road connections or the lower edge of a unit disappearing.
However, as my earlier smooth new grid images and the transparent terrain test showed, there is no need to stick to this diamond shape. You just have to make sure you are consistent. Otherwise you may end up with a few stray transparent pixels, or an overlap of a few pixels, as the default Civ2 graphics demonstrate.
Below, you can see my newly suggested diamond shape guidelines. If you stick to these guidelines, there will be no overlap. Furthermore, there is no irregular "3-step" in the diamond, making for a smoother grid and more intuitive tile shape.
The left-most of these four is a 2-tile high graphic for Test of Time units. Note that I've used two slightly different shades of purple to add some further distinction. Due to the 15-bit nature of Test of Time graphics, both shades will be transparent in Civ2. The second is a one-and-a-half tile high shape for Civ2 units. The third is a single-tile high graphic for terrains, for instance.
This same new grid can also be applied to the Ocean and coast graphics. The right-most diamond is in the size as used for the coastal graphics. In contrast with the original ones, all of the four quarters can use the exact same diamond shape. This makes it much less of a hassle to split up new coastal graphics.
This new diamond shape can also be applied to the standard grid shapes as I had shown earlier. This results in smoother grid lines. Here are the smooth alternatives for the three standard grid shapes. The cursor, standard grid and city grid:
In conclusion: when using this new tile shape, there will be no unexpected parts of your terrain or units disappearing, the vertical road connection will look better and the grid lines run smoother.
One final note: all images in this guide are in PNG format, which isn't supported by Civilization II. However, they all do use the correct colours as Civ2 requires. So you should be able to save them or take a screenshot of them and paste them directly into your civ2 graphics.
Last updated: 2 September 2006