Curved, rising paths in orthographic projection

Before delving into the murky waters of our problem, let's first talk a bit about screen projections of the game world:

Two famous ways to display the game world are isometric and orthographic projection. Without employing any technical jargon, let's just say that both projections have no vanishing points (all imaginary lines that define structures like buildings are parallel), isometric (iso) projection displays the top of a structure and two sides and orthograhic (ortho) projection only displays the top and one side.

Phantasy Star IV (1993 - Sega Genesis) uses orthographic projection

Fallout (1997 - PC) uses isometric projection

There is a wealth of technical info around the net for achieving both projections in a consistent manner.

Harvest Peaks will use ortho projection. It's simple and easy for the player to navigate, especially in a farming sim game where you walk tile by tile to pick up fruit and other things. Games like Harvest moon (SNES) used it and it was fine, while for example Playstation's Harvest Moon: Back to Nature used iso projection, which I found really hard to get used to. There is something inherently baffling when you press down and you see your character move down-left in a diagonal fashion.

One of the weak points of ortho projection is that most "height changes" (for example when players walk a stairway to a higher level in their current map) are either horizontal or vertical. There is a general lack of curved paths, especially when height changes.

Note the arrows: Stairs change height first horizontally then vertically.

So what if we want to design both a curved path with simultaneous change in altitude? Is it worth attempting? Let's find out!

In the "placement map" of Harvest peaks, where I simply place rudimentary, undetailed tiles just for the very basic layout of the town, just to see where the town square, your farm, the mountain hotel and every other building will be, I wanted to do the following:

This path leads to the mountain which is, of course, higher than the rest of the town.

So players walk this curved path which also rises in elevation until it reaches a flat state. But what happens with the "cliff face" of  such a path in ortho projection? How will the tileset's textures be drawn in order to convey this change in altitude?



We could use a 3D program in order to construct a mesh from a height map. In height maps, elevation is portrayed by black, white and in-between pixels: The brighter the pixel, the higher this point will be in 3D. If that's confusing, the images below will help you to better visualize it.

First we will create a 1024x1024 blank image in photoshop and fill it with a White to Black Gradient:

Then we use Filter > Distort > Polar Coordinates and rotate the image so that the sharp black-white border is in the bottom half:

Then we place a black circle in the center of the image. I used a circle whose diameter is 1/4 of the image:

When we delete the area inside the red rectangle we get this:

Now let's see how this translates to a 3D terrain. I used Bryce 5.5 for the task but I guess other programs will be fine too so I won't provide a Bryce-specific tutorial - who uses it anyway? Blender is the thing nowadays I think.

So here's the heightmap in all its 3D glory! I used a preset material to give it some sort of line-height reference. Trust me, it will come in handy when we switch to ortho.

And the much coveted ortho projection of it:

So let's slap the "cliff face" (the curved face with the horizontal parallel lines) in Photoshop and see what we got:

Not bad! Of course adjustments had to be made, to the curvature of the road as well as moving around adjacent tiles. But in the end, this should be a basic guide on how to properly draw the cliff face, what direction should the rocks face etc. The horizontal lines will help guide the drawing.

What remains to be seen is... will it look good? Will it be easy to draw the curved cliff face? (Protip: NO)

I will show the final results of this attempt in a later article. In the meantime, tell me what you think of this approach in the comments. Do you think it will work? Have you had any similar experiences with such a problem? Which approach did you use? Let me know!