Pseudo-3D using 2D layers

  • I saw a really awesome technique a few weeks back. The basic idea is to conceptually slice a 3d object into layers, draw those layers by hand, and then combine them… which allows you to stack and rotate them for a cool 3D effect. It’s sort of like voxels, but thin 2D slices instead of layers of blocks.

    3d in 2d effect

    This is such a cool idea, but seems really tedious. Procjam is going on, so I thought it’d be cool to make a generation tool for this technique.

    So here’s a little tree generator I made:

    It creates trees out of 100 layers. If you’re thinking 100 is way too many for performance, no worries. You can compress them down to as few as desired and then download all the layers. Though the trees are kind of weird looking, it seems as a proof of concept this stacking thing has wings. It looks rather 3D to me (and you can tilt the stack in various directions to enhance the effect). Plus you get free shadows out of this thing.


  • LDG

    oh man that is COOL! I wanna dig into it :D

  • Glad you like it! I figured you guys might get a kick out of it, with all of the discussion of 2D vs 3D. For me personally, 2D is just a million times less effort and easier to understand. Oh and this is all done in canvas by the way, if it wasn’t obvious.

  • Tiger Hat

    Clever - have you found any limitations to the technique? I’m assuming you only get free rotation on the vertical axis?

  • Right, you can’t rotate freely on the other axes. You can “rotate” a little (play with the Tilt option to see), but only up to the point that you have a 1 pixel offset per layer. Beyond that you would see the gaps between the layers. That 1px offset is the default seen, but it can be done in any direction. I’m planning on having it so everything on screen leans away from the center and the amount it leans depends on the distance from center. That’s good enough for a top down game as you never need to see anything beyond a 45 degree angle.

    The only other problem I foresee is performance. Drawing 100 rotated layers per object might be a performance nightmare, at least on the canvas. If it is a problem, there’s always the option to reduce the layers. I think this tool can draw really nice bird eye’s view (1 layer) trees as well, while keeping the full shadows.

  • LDG

    I’m also interested in the performance. Could it be a realistic way to draw the graphics realtime for an action game like A Wizard’s Lizard?

    Perhaps at runtime you could pre-render a given object at various rotations and store that in a buffer. Then draw from that buffer like a standard sprite sheet.

  • Sure, if you had say 8 weight movement (or a camera that allowed 8 fixed rotations) you could definitely buffer the rotations if that’s what you’re concerned about. At that point though, you have to ask if it’s worth it. You’re no longer getting that smooth rotation. You are saving time by not having to hand draw 8 sprites that face different directions, but you still have to draw roughly the same amount of layers.

    Free rotation isn’t the only benefit of that technique though. You can also skip it and just do tilt (think of the way walls lean away from you in a zelda dungeon).

    I made this tool primarily to get ready for a game jam in the spring, so I’ll report back after trying it out for real.

  • LDG

    Very cool! I look forward to seeing/hearing more about it.

  • As planned, I made a 7drl using this technique:

    Zurvivors screen shot

    Couldn’t do real-time very well for a few reasons. Lots of layers. 100 for the tallest buildings and 50 for trees. I used 256x256 textures (dumb because the tiles are only about 64px wide in game… but I wanted to be able to zoom in and show the detail).

    My thinking now is that the, for real-time games, the technique is probably very feasible for small textures/number of layers. If you look at the the original link I posted, they’re making a game with 15 layer, tiny sprites. That probably works great. If you embrace the chunkiness of the quasi-3d, it’s a good fit. I was shooting for something slightly more realistic and targeting HTML5, so was limited to turn based.

    The game is not very well polished by the way. I hope to release at least one patch with bug fixes and balance, but wanted to post here about the results. I think they’re pretty nifty.

    Oh and one more clarification: I definitely didn’t want to generate any images on the fly. That part is pretty slow. But reusing the code for TrashTree proved to be a quick way to generate assets programmatically.

  • I haven’t played a 7DRL since I rule you rule we all rule old school Hyrule because I’ve got a massive Steam library to get through now, but this one’s really good. I got too excited when I found the radio and everyone starved while I bolted to the coordinates.

    I really liked the mystery traits part where you discover certain things as you go about the new companion, I think I died before my child on almost every playthrough and the leader of the crew became a four year old with a Rifle and Baseball helmet.

    This was a really solid entry. I’ll definitely pick it back up if you end up patching it, thanks for sharing it here.

Log in to reply