Javascript/HTML5 “Tiled” loader !

February 23, 2011

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 !



  1. Hi.

    I’m developing a Tiled plugin to allow save and load maps in JSON format, wich i think will be better to parse.

    Already got exporting working, developing reading.

    Once i get it ready i will release it and let you know

    • Hi Porfirio,

      Wow sounds great, I’ve been looking as well to do that, but missed time so far 🙂
      So yes please let me know, and check http://www.melonjs.org and my last blog entry, since this post, I had some nice work done on my library.

  2. Hi Oliver!

    I am really really glad seeing you using TROAK content in your demo. Nice job dude!

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

%d bloggers like this: