Isometric Graphics with Obelisk.js

Obelisk.js.

Obelisk.js (GitHub: nosir / obelisk.js, License: MIT) by Max Huang is a library for building isometric graphics.

With the simple and flexible API provided by this engine, you can easily add isometric pixel element like brick, cube, pyramid onto HTML5 canvas. Obelisk.js strictly follows the pixel neat pattern: lines with 1:2 pixel dot arrangement, leading to an angle of 22.6 degrees.

Max has written some cool examples, like a GIF to isometric convertor and text rendering.

Isometric text example.

There are also tutorials that introduce the basics, like building cubes and other primitives.

To draw a cube, you need to get an instance of a dimension, colour, and the Cube primitive. The library uses its own wrappers for colours and dimensions to set up the right co-ordinates and shading for the isometric effect:

var point = new obelisk.Point(270, 120);
var pixelView = new obelisk.PixelView(canvas, point);

var dimension = new obelisk.CubeDimension(120, 200, 60);
var color = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.GRAY);
var cube = new obelisk.Cube(dimension, color);
pixelView.renderObject(cube);

The base class is obelisk.AbstractPrimitive, which Cube inherits from. There’s a demo/ directory with more examples.