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

See the Pen obelisk step 1 by Eugenio Keno Leon (@k3no) on CodePen.

Step 2: Make a grid and figure out Coordinates

See the Pen Obelisk.js Step 2. by Eugenio Keno Leon (@k3no) on CodePen.

Step 3: Make more grids !

See the Pen Obelisk.js Step 3. by Eugenio Keno Leon (@k3no) on CodePen.

Step 4: Test out primitives

See the Pen Obelisk.js Step 4. Primitives by Eugenio Keno Leon (@k3no) on CodePen.

Step 5: Figure out colors:

See the Pen Obelisk.js Step 5. Colors by Eugenio Keno Leon (@k3no) on CodePen.

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.

See the Pen Obelisk.js Step 6 Animation by Eugenio Keno Leon (@k3no) on CodePen.

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!

See the Pen Obelisk.js Step 7. Transforms by Eugenio Keno Leon (@k3no) on CodePen.

Step 8: Make something pretty

See the Pen Obelisk.js Step 8. Pretty Chicken by Eugenio Keno Leon (@k3no) on CodePen.

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.