Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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: http://i44.tinypic.com/qxqlix.jpg

share|improve this question
4  
Not really an answer, but typically the way you would handle this in a manually built world is by having edge textures that you put around the tops of the different planes. So instead of a flat repeating texture, the cliff wall facing away from the player would have some kind of art edge that clearly marks it as the end of that plane. –  Tetrad Nov 29 '11 at 1:29
    
Oh I forgot to mention that it is randomly generated. But I was thinking about trying to find some way to shade those edges more heavily. Maybe that would work. –  l5p4ngl312 Nov 29 '11 at 1:41
add comment

3 Answers 3

up vote 4 down vote accepted

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.

share|improve this answer
1  
Also, most isometric games draw the outline of tiles a bit darker. An example of the effect can be seen here: openttd.org/en/screenshots –  sarahm Nov 30 '11 at 1:05
1  
Done. What do you think? tinypic.com/r/2nrh7qs/5 –  l5p4ngl312 Nov 30 '11 at 3:28
add comment

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.

enter image description here

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();
    }
share|improve this answer
    
I did something similar except rather than shade I just did lines. I do hope to do lighting at some point though. That looks good btw! Is it infinite randomly generated? I read about it on your website. The idea sounds like mine except mine will probably have a greater focus on commanding things? I'm not sure. –  l5p4ngl312 Dec 3 '11 at 20:10
    
Thanks. I'll be sure to follow your progress if you start a website or blog. Since you're using the darker line method, you should select the answer @sarahm provided as correct. Her/His suggestion did improve the look of your game, and was apparently pretty easy to implement. I'd say that's a win! –  Byte56 Dec 3 '11 at 20:58
    
I have a few questions for you. I asked on your blog but I am not really sure how to see what your answer is if you do answer. –  l5p4ngl312 Dec 4 '11 at 2:25
add comment

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.

share|improve this answer
    
Do you have any ideas on how I could shade it so that you could distinguish between blocks that are on different planes when the slope is facing away from the camera? –  l5p4ngl312 Nov 29 '11 at 22:56
    
You asked specifically about shading a sprite partially — I recommend asking this question separately. Here's a brief answer. I can think of two real-life cues which the isometric perspective doesn't defeat: (1) Real world corners are not perfectly sharp but somewhat rounded off, which affects the perspective and lighting of the edges. You could render that way or draw sprites for it. (2) Distance effects: Fog and out-of-focus. (Fog is quite effective at conveying depth, but might be undesirable for your game.) –  Kevin Reid Nov 30 '11 at 0:36
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.