Wednesday, November 11, 2015

Tilesets: Simulated Elevation

The most popular post on my blog to date has been about isometric tilesets. In a shameless attempt to increase readership, I will give the people more of what they want.

Today, I shall investigate how to add an element of elevation to an isometric tileset. By far my most favourite example of this is the little-known game Snake Rattle 'n' Roll, where the eponymous snakes Rattle and Roll are climbing up a mountain composed of isometric tiles:

However, the technique is as old as video gaming itself, as can be seen in the 1982 class Q-Bert:

In these two examples, the ground is seemingly composed of stacks of cubes. What I am going to show you is a bit more powerful, in that it can bue used to make stacks of half-cubes called 'slabs' that will be immediately familiar to Minecraft players.

I begin by using the ideas in this early blog post to create four tiles, each eight by eight pixels in size, that can be arranged to form an isometric grid, like so:

To create the illusion of depth, we can raise and lower the tiles for individual slabs, like so:

So far, the result looks like an incoherent mess. We must create some new tiles to serve as the 'sides' of the slabs. To do this, I created a sixteen by eight pixel image to represent the side of one slab (that being one by two tiles in size). I then doubled it up to sixteen by sixteen, 'slanted' it, and fit it into the space between two slab tops, as shown below:

This approach creates six tiles. The reason that I chose to double-up a sixteen by eight pixel image instead of creating a sixteen by sixteen image is that my approach will result in the top two and bottom two tiles matching up seamlessly, and result in the middle tiles matching seamlessly with themselves, allowing for height differences in multiples of a slab instead of a cube.

If I slot these new tiles into the earlier image, the result begins to take shape:

I can then do the same procedure again, only this time 'slanting' in the opposite direction:

I can then add these tiles to the earlier image, and complete the look. It now looks like a five-by-five arrangement of slab stacks, at varying heights:

This result is composed of only sixteen tiles:

By applying this technique, and a heaping helping of artistic talent, you can turn out tilesets that let you create amazing environments like those in the Tactics Ogre franchise.

There is one notable restriction on this technique. The tiles that I have created are only able to be used to construct environments where any given slab is no higher than its adjacent northeast and northwest tiles. Stated another way, if you travel northeast or northwest from a given slab, the height must be monotonically increasing. We will relax that restriction a bit in the next post.

No comments:

Post a Comment