Where the Sand Meets the Sea

Now that we have some grounding in how tiles are used to save on memory, and how they do so, let's look at a practical example of how to construct some square tiles that we can use to make isometrically-projected images.

We already have some water tiles and some sand tiles from earlier posts, and we wish to make an island, that looks something like the following:

How do we make the tiles that we need? First, grab a diamond-sized chunk of water. Split it in half vertically, and then split one of the halves again horizontally. You'll be able to fit the two quarters into the remaining triangle, to form a square. Do the same for the sand. It looks a bit like the following:

Next, we need to make tiles that blend water and sea along a diagonal. Start again with your diamond-sized chunks, and arrange one inside of a 'cross' of four of the others (through the magic of how the water and sand were originally constructed, it doesn't actually matter which is inside and which is outside). Now, grab the middle rectangle of the cross, like so:

Our squares and rectangle are 16x16 and 32x16, respectively, but we want the tiles to be 8x8, so we simply split them up. The resulting tiles look like the following:

Now the magic happens. If you take just those sixteen square tiles, and arrange them properly, you get a very good-looking result:

This is a quality tileset. Looking at the finished product, there are no seams to betray the fact that the image is composed of square tiles. Viewers will assume that the image is constructed of diamond-shaped tiles, which is exactly the visual aesthetic we seek.

We can still do more to improve the result, however. The edges of the tiles are perfectly straight lines, which look a bit odd on a beach. Over the next few posts, we will investigate how to fix this up somewhat.