Obelisk.js Pixelated Isometric graphics with Javascript.

December 14, 2016

Preface

I was recently checking out a tiny Isometric javascript library called Isomer.js, and while researching I found out about Obelisk.js, another Isometric Javascript library with a pixelated focus, let’s figure out how to use it.

Step 1: Include Obelisk.js in a pen and display a cube

Step 2: Make a grid and figure out Coordinates

Step 3: Make more grids !

Step 4: Test out primitives

Step 5: Figure out colors:

Step 6: Animate a cube

Caveat Emptor ( buyer beware ) Obelisk.js is not a full fledged Isometric or 3D tile engine, there are no shadows, lights,interactions, transforms,etc,etc. Look at three.js if you want more, although it is considerably larger in size and complexity, the alternative, is to use Canvas methods like on the following examples, but you will have to make them from scratch.

Step 7: Explore Transforms

More Caveat Simple translations ( moving the cubes) and even scaling are fairly simple, I chickened out when it came to rotations, why ?, well in order to rotate the cube or any other primitive we would need to rotate the coordinate system,modify the light source,color buildup and a couple of other things, in other words we would need to extend considerably the library, and this is but a humble introduction... bwok bwok!

Step 8: Make something pretty

Chickens are kinda pretty I suppose :)

Parting words

Obelisk.js is a really cool little library for cranking out pixelated graphics, I kept thinking this library along with the recently reviewd Isomer.js could be used for some basic games, unfortunately, there is still a lot of code to build for them to compete with something like three.js, but the oportunity is there, on the other side if all you want is some cool graphics, are looking to a project to contribute to either one will do, they are both awesome.

Best,

Keno.