Wednesday, February 23, 2011

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:

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

    1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Online Training from India

    2. The effectiveness of IEEE Project Domains depends very much on the situation in which they are applied. In order to further improve IEEE Final Year Project Domains practices we need to explicitly describe and utilise our knowledge about software domains of software engineering Final Year Project Domains for CSE technologies. This paper suggests a modelling formalism for supporting systematic reuse of software engineering technologies during planning of software projects and improvement programmes in Final Year Project Centers in Chennai.

      Software management seeks for decision support to identify technologies like JavaScript that meet best the goals and characteristics of a software project or improvement programme. JavaScript Training in Chennai Accessible experiences and repositories that effectively guide that technology selection are still lacking.

      Aim of technology domain analysis is to describe the class of context situations (e.g., kinds of JavaScript software projects) in which a software engineering technology JavaScript Training in Chennai can be applied successfully

  2. 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 and my last blog entry, since this post, I had some nice work done on my library.

  3. Hi Oliver!

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

  4. Hi friends, This is Victoria from Chennai. I am a technology freak. I have read your blog. It was really a wonderful article and I was really impressed by reading this blog. Thanks for sharing this informative blog. I did HTML5 Training in Chennai at FITA academy, Its really useful for me to make a bright future.

  5. If you look here you will find some high quality essay writing tips that you need to totally check out as soon as possible.

  6. "Insightful" is the perfect word to describe this wonderful writing of yours. The artistic blend of this subject with your tone of writing made this a great read. Much love 😘.
    How to bottom

  7. Sounds interesting. I need some more info now. See you soon.

  8. Hello Admin!

    Thanks for the post. It was very interesting and meaningful. I really appreciate it! Keep updating stuffs like this. If you are looking for the Advertising Agency in Chennai | Printing in Chennai , Visit Inoventic Creative Agency Today..

  9. Thanks for sharing information. Choosing computer accessories from leading IT store offer great discount and value for your money Computer Store Australia | All in One Pc Australia

  10. Thanks for sharing information post. Limousine King offers affordable limo hire Melbourne that make your accosion special. Wedding Car HireLimo Hire Melbourne prices

  11. This comment has been removed by the author.

  12. This comment has been removed by the author.

  13. Incredible post I should say and a debt of gratitude is in order for the data. Schooling is certainly a tacky subject. Be that as it may, is still among the main subjects within recent memory. I appreciate your post and anticipate more. You have made some valid statements there. I looked on the web to study the issue and discovered a great many people will oblige your perspectives on this site...
    paper airplane that flies far and straight | windfin | stable paper airplane | nakamura paper airplane | paper airplane templates for distance | paper airplane designs