Isometric 2D Sample

Hey! I have been playing around with an isometric grid and here is what came out.

Let me know if this is useful to someone, I am thinking in polishing the project for release and writing a small tutorial series on how to reproduce this.


  • Level is created in Photoshop using GameMap generator (cool plugin!)
  • Three types of assets are exported using simple batch actions:

a. Trimmed asset
b. Untrimmed asset, for extracting positions using image bounding box
c. Untrimmed collision asset, for extracting collision polygons

  • Level loader parses the assets, extracts positions, bounding boxes and collision polygons and recreates the level with the exact layering found on Photoshop.
  • Object sorting script handles the z-index sorting of the player model based on its world position, image bounding box and collision polygon(TODO handle player’s height when sorting gracefully).
  • A weight grid is created to be fed on a a-star pathfinding algorithm (buggy, due to incorrect point-in-polygon implementation)
  • Simple pixel shaders for animating trees, grass and the chimney smoke.
  • Simple light and shadows animation for creating mood presets.


looks nice :slight_smile:

Looks like a really cool way to generate isometric levels!
Did you ever get further with this project? Would love to see more, especially the tutorial you were thinking about. :slight_smile:

1 Like

Thanks! Actually no I stopped development as the new Layers system came out after a while and it made sense to start using it to do sorting the right way.

I re-imported the project and made it public. So if you are interested here you go:

1 Like

Thank you! Could the new Layers system be used to import layers from Photoshop or Animate, to “auto-build” or “auto-load” levels in a similar fashion?

PlayCanvas Layers is a nice system to allow more control over the sorting of objects in a 3D scene.

They can be used to help a level loader that imports Photoshop layers (=textures/images) to sort them in place, but not automatically. The logic has to be programmed to create the 2D-isometric-camera-magic.

Search in general game dev sites, you will find plenty of info on 2D isometric techniques.

1 Like