How can I change this isometric engine to make it so that you could distinguish between blocks that are on different planes?

Question

I have been working on an isometric minecraft-esque game engine for a strategy game I plan on making. As you can see, it really needs some sort of shading. It is difficult to distinguish between separate elevations when the camera is facing away from the slope because everything is the same shade. So my question is: can I shade just a specific section of a sprite? All of those blocks are just sprites, so if I shaded the entire image, it would shade the whole block. I am using LWJGL. Are there any other approaches to take?

Here is a screenshot from the engine:

Answer 1

One possible solution would be drawing edges along where the terrain changes height in dark black. So, the effect generated would look like height lines.

Answer 2

You are using LWJGL which is an OpenGL wrapper, so you have 3D rendering at your disposal. Break your sprite into three quadrilaterals for the three faces of your block; you can then assign colors to light the faces of the blocks differently as well as shade across each face (by giving different colors to the corner points).

As long as you give the proper (interpolated) texture coordinates, your sprite will still look the same as it did before — there is no need to go to actually positioning in 3-dimensional space if you aren't already.

Answer 3

A simple suggestion and something I recently put into my game. For all the horizontal upward faces, find if they are also the base of an adjacent horizontal face. For example, when I'm building my VBOs I run some code like this:

    Color[] colors = new Color[4];
    Color faceColor = GetColorForFace(x, y, z, face);
    colors[0] = faceColor; //mpp
    colors[1] = faceColor; //ppp
    colors[2] = faceColor; //mpm
    colors[3] = faceColor; //ppm
    if (face == CubeFaceDirection.YPlus) {
        if (Cube.IsSolidCube(GetCubeAt(x + 1, y + 1, z))) {
            colors[1] = colors[1].darker();
            colors[3] = colors[3].darker();
        }
        if (Cube.IsSolidCube(GetCubeAt(x - 1, y + 1, z))) {
            colors[0] = colors[0].darker();
            colors[2] = colors[2].darker();
        }
        if (Cube.IsSolidCube(GetCubeAt(x, y + 1, z + 1))) {
            colors[0] = colors[0].darker();
            colors[1] = colors[1].darker();
        }
        if (Cube.IsSolidCube(GetCubeAt(x, y + 1, z - 1))) {
            colors[2] = colors[2].darker();
            colors[3] = colors[3].darker();
        }
    }

Where colors[] are originally set to whatever the lighting makes them, then darkened if there are cubes next-to-and-above. colors[] represents the colors the 4 vertices that make up the two Y+ facing triangles.

The effect is something like the following. Where on the left is the original rendering style and the right is the new "shaded" style.

EDIT: After looking at my image again, I noticed I left out the corner case (literally!), so I'll add those cases to my code:

    if (Cube.IsSolidCube(GetCubeAt(x + 1, y + 1, z+ 1))) {
        colors[1] = colors[1].darker();
    }
    if (Cube.IsSolidCube(GetCubeAt(x + 1, y + 1, z - 1))) {
        colors[3] = colors[3].darker();
    }
    if (Cube.IsSolidCube(GetCubeAt(x - 1, y + 1, z + 1))) {
        colors[0] = colors[0].darker();
    }
    if (Cube.IsSolidCube(GetCubeAt(x - 1, y + 1, z - 1))) {
        colors[2] = colors[2].darker();
    }