2012-12-13

JavaScript isometric libraries and „game engines“

When you seach for „JavaScript isometric“, you get few links, most of them useless. Let's see what we get:

IsoGame

Just a sprite moving over a generated grid. Somewhat buggy movement algorithm. PHP used to draw the tile sprite. Doesn't work with PHP 5.2. Here's the fixed version: IsoGame.zip

URL: http://code.google.com/p/isogame/

Verdict: Not useful.

Clint's isometric game example, now with Yahoo!

Another sprite moving, this time, only over a texture; grid is „virtual“ (only computed). The movement is done quite nicely; However, this is not a library, only some poorly coded proof-of concept.

URL: http://www.rickherron.com/…IsoTest.html

Verdict: Not useful.

„the snowman that learned to program“'s Ja­vaScript Isometric Game Engine

„Example of an isometric tile environment with depth sorting and path finding“, as the page says.

* Uses <canvas> to render the image.
* „Manually“ drawn sprites, no rendering engine.
* Uses jQuery.
* A* pathfinding algorithm, Heap and Collection implementations.

URL: The code is available at GitHub.

Demo: http://greenmayo.com/…CarterHenry/

Verdict: A bit useful.

FreeVolution

The „first full fledged DHTML isometric tile engine on the internet“. As you scroll around, tiles are fetched and destroyed trough AJAX. PHP backend for AJAX calls.

* Uses really a LOT of <img> elements, all with in-line CSS. No wonder it's so slow (read, „unusably“ slow).
* JavaScript (or, client side) Written in a PHP way, that means, no consistent JavaScript library.
* However, the math behind it could be quite good for inspiration.

Demo: http://www.pc-gamers.com/…s_coords.php

Projec page not found.

Verdict: Could be useful; have to study it more (really pity it's not coded better).

Oasis – Flash Isometric Map Maker

For Flash… not useful. Perhaps the math, will have a look at the sources.

URL: http://komirad.com/…-maker-oasis

Isometric ‚n‘ Hexagonal Maps (an article)

URL: http://www.gamedev.net/…ticle747.asp

c# to javascript, actionscript

Really nice and functional isometric rendering. One of versions has even an attempt of interactivity, though doesn't work for me (FF3).

The only, but fatal, drawback is that the JS code is generated from C#, and quite unreadable.

URL: http://zproxy.wordpress.com/…ript-tycoon/

Demo: http://jsc.sourceforge.net/…atureBoy.htm

Verdict: Would be useful if it was written in JavaScript.

Axono.me

A library, not studied yet.

„axono.me has been designed to render axonometric projections, though it works fine for any kind of grid. The library has been tested using Safari 4 and Firefox.“

URL: http://www.creativeapplications.net.php5-3.dfw1-2.websitetestlink.com/…-me-scripts/

GitHub: http://github.com/…nkey/axonome

Rhodesy Isometric

Written in JavaScript. Seems to be fast, precise, and contains algorithm for distributing terrain level shift from one point.

URL: http://forums.tigsource.com/index.php?…

Demo: http://rhodesy.acsv.net/isometric/

Verdict: Not studied yet, looks very good.

Isometric drawings with jQuery

URL: http://www.tdupree.com/…with-jquery/

Demo: http://www.themaninblue.com/…cape/new.php

Verdict: Not studied yet, looks good.

50 Useful JavaScript Tools

Isometric camera in javascript for Unity – I don't understand this much. Somehow linked to „Unity3D Dialog Engine“, whatever that is.


0