It's been a long digression, but we are finally ready to come back to the original problem stated in this blog all those weeks ago. We have a tileset:
And we can use that tileset to construct an island:
The result is unsatisfactory, however, because it looks too angular and straight. We would like to produce a tileset that lets us create a more natural look. How can we do this?
We saw in earlier posts that it is possible to produce a small set of tiles that can produce an 'edge' between the two regions. This edge can be made slightly rounded. In an isometric tileset, we actually have tiles to define that edge, rather than having be implicit in an orthographic tileset, that lines up with horizontal and vertical lines. This gives us the following edge:
Because of how we produced the edge tiles, there are normally two of them per 'square' of the final map. However, in order to make it easier to produce a natural-looking edge, we will construct three tiles in an L-shape. This ensures that none of the tiles we create need to meet at a corner:
At this point, science takes a back seat to art. Using whatever method you can devise, your goal is to produce three tiles to make the L-shape that look seamless when attached to each other, between the two regions. I personally like to blend the original regions together, and then do a bit of hand touch-up. You should wind up with something that looks a little like this:
We then go through the same process with the edge that is the vertical mirror of our original edge. However, in addition to making the resulting edge tiles connect to each other seamlessly, we also want them to connect seamlessly with the first edge we created. Since a picture is worth a thousand words, check out the following 3K:
So far so good. We will go through the process again with the opposite side:
We then go through the process a fourth time, again making sure it lines up with both itself and its vertical mirror:
So far, we have produced twelve tiles, shown below. If you actually tried to produce a non-trivial image, however, you would find that we have further to go.
The tiles we have so far can be used to construct a gently-flowing stream:
However, we run into a problem if we try to produce a corner of the water areas. The source of the problem is that, because of how we construct our edge, we have two tiles that are competing for position:
The problem is easy enough to solve. Substitute in the edge tiles that don't conflict, and then create two more tiles to complete the corner:
We must also follow the same process for the opposite corner:
The second problem occurs in the opposite configuration, when we want a corner of sand areas. Here, the problem is that the edge gets cut off, so we create two more tiles to extend the corner to a point:
We also create two more tiles for the opposite corner:
The four tiles just created can be used to make tiny islands in the water, as seen below:
It was a long road, but we are finally at the pay-off. We have created 28 tiles, specifically, these:
We can use them to transform our beach into something beautiful:
We can also construct a copy of the road example from earlier posts, in order to highlight the 'diagonal' nature of an isometric tileset versus the 'square' nature of an orthographic one:
This has been my most image-intensive post to date. I'm going to take a break for a bit, and come up with another series that won't require so much work to produce each post. See you soon!
No comments:
Post a Comment