Javascript/HTML5 "Tiled" loader !

It's almost 2 months since I released my previous project franck, and since that I've been working on completely refactoring my library. As first I wasn't very happy with the result (not generic enough), as not flexible enough to welcome any new features/evolution. But most of all I was very unsatisfied with the tilemap engine I built for Franck that was, to be honest, really quick and really dirty :)

So, i'm very proud today to announce to the world (and god knows how the world is waiting for me on this thing) that I now have a Tiled tilemap loader implemented in melonJS, my javascript engine !

Tiled is a general purpose tile map editor using XML-based map format (TMX format), who is fully featured and a very easy to use cross-platform Map-Editor, and which can be obtained for free here: http://www.mapeditor.org/

This to say, that is now very easy for me to build a game level, and get it running with my Engine. As you will see below, I prepared a small demo using existing TMX files, and It just took me less than 1 hour to get it running in a browser, great no ?

Before going on with the demo, here is what I currently implemented :

• TileQT 6.0 map format compliant


• Plain & Base64 encoded XML tilemap loading (compression not supported)


• Horizontal tilemap (isometric not suppported)


• multiple tileset supported (one for regular tiled map, one for the collision engine)


• Multiple layers (multiple background/foreground layers, 1 collision layer, 1 "Scrolling" layer)


• Dynamic Entity loading (basically, the engine will instantiate JS object matching the object property name defined in the tilemap objectGroup, and pass corresponding settings to it)

I haven't yet done any bench on what my engine is actually capable of, I keep this for when I'll find an idea about my next project, but I'll keep you posted.

And to finish, a little demo. This demo is based on the PC/SDL Alex Kidd remake that you can find here. I actually just reuse the existing tilemap and tileset, and modified them a little bit to be compliant with my own implementation, and "voila" the result of 1 hour of work :



Of course, there is still a few things to tweak, and this is just a quick demo to show the tilemap loading and running with the engine, so don't expect something "finished" and bug free, this is not a game ! :)

You can click on the picture or here to launch the demo. I'm also very interested by your comments if you have any suggestions. And of course, don't try this with IE6, you'll need a recent browser HTML5 compliant (Safari 5, Chrome 9, Opera 11, ...).

Cheers !