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:enter image description here

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.

  • \$\begingroup\$ What do you want to generate this effect from? Because we only see the desired result, but not the actual graphics without the 3D effect. \$\endgroup\$ – János Turánszki Jan 13 '15 at 17:18
  • \$\begingroup\$ @JánosTuránszki At this moment I have something like this: i.imgur.com/eJPHmQK.png. The disadvantage of having a baked in texture is that the top part of the blocks are static, if the player goes down the camera follows the player and the top part should get smaller (because the camera sees less of it), but with a baked in image the top part just stays the same depth. \$\endgroup\$ – Ives Jan 13 '15 at 19:49
  • \$\begingroup\$ You could use sprites with the same width but variable height depending on camera vertical position. This could be cool effect. You can prototype it with resizing exiting sprites. \$\endgroup\$ – mikea Jan 15 '15 at 16:03

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.

enter image description here

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.

enter image description here

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).

enter image description here

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.


When these layers are composted, you get the following:

enter image description here


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

enter image description here

A similar method could be applied to other objects.

  • \$\begingroup\$ That seems like a great and simple way to do it! Thank you! \$\endgroup\$ – Ives Jan 14 '15 at 15:44

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.


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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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