Generating 3D-like effect

Question

I'm making a 2D sidescroller game and want to give the blocks a 3D like effect. This way it looks like the player is walking on 3D blocks while walking on a 2D plane (thus having only x,y coordinates).

I have already written the code to generate the terrain in 2D, but the 3D effect is now baked in. It looks like this:

At this moment the 3D effect is baked into the blocks, but I want to try to generate it.

Is there a common way to achieve this 3D like effect while still staying 2D? Do I have to convert from 2D to 3D or is it also possible to do this with calculations/shaders?

EDIT; The reason I want the top texture of the block separate of the block is because when the camera would go up, the top should get bigger as the camera sees more of the top of the block and the other way around when the camera goes down.

Answer 1

Sarting with the clouds, a simple method is to draw them as three layers:

Layer 1 is the bottom layer, and is drawn first. It just contains the cyan background.

Layer 2 is the middle layer, drawn between the other two, and it represents the 3D highlights. The background in this layer would again be transparent (represented by a purple colour in the following image) to let the cyan background show through. The clouds would be drawn slightly brighter than the normal cloud colour, and should drawn offset upwards vertically from the normal position of the clouds.

Layer 3 is the top layer, drawn last. It contians the clouds drawn normally, but with a transparent background (the transparent background is represented by a purple colour in the following image).

The idea is that clouds on Layer 3 will obscure most of the clouds on Layer 2, leaving just the highlights visible. The cyan background will show through the transparent bit, too.

Result

When these layers are composted, you get the following:

Movement

When the camera goes up or down, you would simply adjust the offset of the highlight layer:

A similar method could be applied to other objects.

Answer 2

You could achieve this effect using parallax scrolling by making the earth and each shade of green a separate layer. With a parallax effect, no 3D calculations are required, and you get to stay with the pixelated, simple color style you're using.

Note that parallax doesn't have to be limited to just horizontal motion. Vertical movement (when the camera goes up and down) can also be handled by shifting layers up and down relative to each other.

Though it is not exactly in the style of what you are doing, take a look at http://www.nevermindthebullets.com/strip.html#1-1 for an interesting example of using parallax in both X and Y for some interesting visuals.

Answer 3

You can add a depth component to your 2D textures and set the depth value in the pixel shader.

There will be some performance loss due to setting the depth in the pixel shader but shouldn't matter for a 2D game on PC.

The other way is to use multiple layers of 2D textures for your background.