A simple isometric engine

For a day or two, I’ve been messing around with Canvas for firefox. I’ve managed to code up a very simple isometric engine in about 2 days, provided the canvas tutorial. The hardest part was really just making sure it rendered correctly from back to front. But other than that, everything seemed pretty straightforward.

One thing I’ll have to say though, is that this was my first foray into javascript, and it’s been more flexible than I had remembered back in 1996. Most people don’t take advantage of javascript’s language features, since most scripts are fairly short. However, javascript supports object orientated programming, but using a prototype based object instantiation. This means that there is no such thing as classes, but all subsequent objects are created by cloning existing objects. The new objects are then extended to fit the need of the programmer. The following mirrors how you would create a ‘class’.

function IsoEngine(canvas_id) {
this.canvas = document.getElementById(canvas_id);
if (this.canvas == null) { return; };
this.ctx = this.canvas.getContext('2d');
var objects = new Array();

this.add_to_scene = function(object) {

this.clear = function() {
this.ctx.clearRect(0,0, this.canvas.width, this.canvas.height);

this.draw = function() {
for (var i = 0; i < objects.length; i++) {

As you can see, it’s all using functions, and it makes for weird looking syntax for those of us coming from a class-based OOP. What was also a pleasant surprise was that javascript supported higher order programming. This means that functions can take other functions as arguments, and if I’m not mistaken, this makes closures possible. It’s hell of a lot better than passing function pointers around in C. The syntax for that always left me confused.


5 thoughts on “A simple isometric engine

  1. It only looks cool because of the transparency, which is supported by safari and firefox’s canvas tag. Note that I said very simple–and thus, it’s not as flexible as I’d like it to be. You can check out the code just by looking at the javascript code. http://www.3cglabs.com/test/isometric_engine.jsI start with a cublet and just build layers, making sure to draw back to front. It was just a test to see what I could do with canvas. I suggest looking at mozilla’s page on its canvas tag for more references.

  2. It's been a long time since I wrote it, and it was more a prototype and for fun. you can do a lot better with a lot of the javascript HTML game engines available nowadays.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s