Forty-Seven from Twenty-Four

As promised (but delayed), this post will talk about how to produce a small collection of single-width tiles which can be combined in various fashions to form 2x2 supertiles that are of all forty-seven shapes needed to produce any shape desired in a landscape.

To begin, start with any two 2x2 tile supertiles that you wish to blend between. As readers will know, I have a predilection for 8x8 tiles. I am going to make another variation of our earlier ground-and-road display, only this time it will be a badlands-esque ground and highway road. Therefore, I start with the following supertiles, each 16x16 pixels:

Step 1: Arrange eight copies of one of the supertiles in a donut shape, and drop a copy of the other supertile in the middle. You will get a slightly different end effect depending on which supertile you choose for the middle, as I will discuss below.

Step 2: Remove a one-tile-thick rectangle around the inner supertile:

Step 3: Create new tiles to the left and right of the central supertile. These tiles should match seamlessly to the left and right. They will also need to be seamless if you take the middle two rows of tiles and repeat them, as seen on the right side of the next image:

Step 4: Create new tiles above and below the central supertile. These will need to be seamless if you repeat the middle two columns, as shown on the right side of the next image:

Step 5: Create four new tiles in the remaining blank spaces. These new tiles need only connect seamlessly to one configuration, and so if you can create the following shape without any seams, you are on the right track:

Step 6: Arrange a 4x4 copy of the inner supertile. Then, take out a rectangle of tiles from the ouside of it. Then, take out the square of tiles inside of it, leaving a rectangle one tile thick:

Step 7: Put two copies each of the tiles from step 3 along the left and right of the inside of the rectangle. Then, put two copies each of the tiles from step 4 along the top and bottom of the inside of the rectangle (overwriting the corners). Then, delete the corners. Lastly, drop one copy each of the four tiles from step 5 into the middle space.

Step 8: Now that you've gone through the somewhat complex step to produce the four blank spaces, fill them in with four newly-created tiles that are seamless with what is already available:

You are done! You should now have the eight tiles from your original supertiles, plus sixteen new tiles you have created from this procedure:

If you had only taken your original eight tiles and recreated the road example from previous posts, you would have gotten the following result:

However, you now have a brand-new collection of tiles that you can use, in essence, to create an 'edge' between the two original supertiles:

By combining the edge and the base, you are left with a slick result:

A few things to note: the resulting edge from this procedure is designed to replace some of the tiles from one of the two supertiles. The other supertile never has any of its tiles replaced by an edge tile. The center of the donut in step 1 is the supertile that does not get replaced.

If you were to invert your overall image, you would get a subtly different edge:

And a subtly different final result:

If you compare the badlands road example to the red brick road from the previous posts, you will note that the badlands road uses the road supertile as the unreplacable tile, while the red brick road uses the grass as the unreplacable tile. Which of the two tiles you choose to make the unreplacable tile is up to you, but you should consider how the resulting tileset will behave when making the decision.