Saturday, March 03, 2007

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) {
objects.push(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++) {
objects[i].draw();
}
};


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 comments:

  1. Incredible isometric web-based engine. I would like to know how you did it

    ReplyDelete
  2. 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.js

    I 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.

    ReplyDelete
  3. HEhe not workign well i supposed 3 years get fast!, im currently researchign isometric Java Engines, could be interesting if i can see your code!

    ReplyDelete
  4. Is this code still available? Would be nice to use as an instructive reference.

    The http://www.3cglabs.com/test/isometric.html example is down.

    ReplyDelete
  5. 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.

    ReplyDelete