2.5D Modeling Tool

Posted in Games, Tools on December 24th, 2013 by admin

I quite like Lost Garden and was intrigued by his 2.5D modeling tool idea and finally having some free time over the holidays I decided to give it a quick go.

Click to try:

I took a few shortcuts to get something working quickly so there are a couple of changes to his basic design:

  • To make the rendering and boolean type operations simple to code I made it so every X/Z slice has to be rectangular. This means there are no N/E Ramps and no rounded N/S edges.
  • Rather than incorporating any rotation it seemed easier to just have the different rotations available as primitives.
  • Having only six handles for re-sizing leads to the middle set being confusing as it is unclear which face they are for re-sizing. I found adding a second pair allows for all scaling operations intuitively.
  • Implementing rounded edges for all the shape types was tricky and you really need to be able to selectively round different edges, instead I just added two types of fixed/rounded boxes as an example of what could be achieved with a more complete tool.


  • You can change the palette by double-clicking on a color.
  • The list on shapes on the right can be re-arranged by dragging.
  • Holes effect only shapes below them in the list.
  • Dragging the front face moves the shape up/down and left/right.
  • Dragging the top face moves the shape forward/back and left/right.
  • Models are compact enough to be URL encoded, so use that for saving/sharing.
  • The rendering engine needs a bit of work, better lighting/shadows and textures will make it look a lot better.
  • The rendering code is pretty simple and this could easily be implemented in JavaScript/HTML

Source code now available here: lgmodeler