Posts Tagged ‘HTML5’


melonJS 0.9.3

May 1, 2012

Hi there !

I’m pleased to announce that melonJS 0.9.3 is now available !

So to make a long story short, the big change is this release is probably the rewritten mouse event management and the touch event support, which means that melonJS is finally and definitely ready for the mobile device world !  But else, to give you a light change log :

  • Better error management, to better track down issues during development
  • Better documentation, including previously undocumented TMX stuff.
  • New mouse event management (with mouse event emulation on touch devices)
  • Touch event management (including multitouch)
  • Better TMX integration
  • Isometric and Perspective map support (no built-in collision map)
  • A lots of optimization, bug fix and small helpful features

Please see the full changes on github for more details on this new version, and as previously, everything is available through the melonJS download page.

I would like as well to thank everybody that participated in this release, by proposing changes, submitting bug report, feedback, etc… and  I will specially thank here xw332 that helped me correcting a couple of nasty bugs, and Norb with who we worked a lot on the new mouse event management and then the touch event support. Furthermore, the “melonJS community” is growing every day and, for those not coming on the forums, we have a lots of quality production on the way, and I hope to publish here soon about it and introduce those games to you and their respective talented developers 🙂

For the next release, we have some good stuff already planned as well, in the mean time you can come to our forum for a sneak peak at them, but I hope to see you back here by then.

Have fun !


melonJS 0.9.2

December 31, 2011

melonJS 0.9.2 available !

I’m happy to anounce that melonJS 0.9.2 is now officially available for download.

There is no real revolution inside, but a lots of nice features an improvement that will make everybody’s life easier (multiple line spritesheet/fontsheet, friction management, code optimization, better documentation, etc…). Some of them are also based on feedbacks or help of some of you (scan, Ben2303, Anthony, Lucas to name a few), so thank you very much !

Please see the full changelog on github for more details on this new version, and also the online documentation. And as previously, everything is available through the melonJS download page.

Additionally, and as explained in my last post, the biggest changes is maybe that melonJS is now released under the terms of The MIT license. This is a popular, human-readable and simple license, that everybody knows and understand, and I believe that most of you will be happy about it.

Please also don’t hesitate to step by the melonJS forum and say hello 🙂

Updating your game to work with melonJS 0.9.2 :

Following a few API changes in this new version, here is a couple of tips to ease the upgrade from a previous version of melonJS.

 1/Check for player movement :

-> In the previous version of melonJS, the updateMovement() function was returning a Boolean, indicating if your player movement has changed (final velocity different from 0) :

// check & update player movement
var updated = this.updateMovement();
// update animation if updated
if (updated)
   // update objet animation
   return true;
return false;

-> In the 0.9.2 version of melonJS, the updateMovement() function now returns a collision “vector”, giving you indication on how you collided with the environment (the level itself, not other entities). Assuming that you don’t need that information, if you just want to upgrade you existing game, the simple solution is to do the following :

// check & update player movement
// update animation if updated
if (this.vel.x!=0 || this.vel.y!=0)
   // update objet animation
   return true;
return false;

As you can see, we replace the “updated” variable by a check on (this.vel.x!=0 || this.vel.y!=0), and since this what was returned by the updateMovement in the previous version, it gives us exactly the same behavior.

2/fadeIn/fadeout effect :

in melonJS 0.9.2, the fade effect are now taking as input a duration in ms, where it was in framecount for the previous version :

before :

// set a fade transition effect
me.state.transition("fade","#000000", 30); // 30 frame

now :

// set a fade transition effect
me.state.transition("fade","#000000", 500); // 500ms

One last word : let’s eat some fish !

And finally I’ve been working on this demo. I had lots of questions about “is it possible to do something else than a platform  games with melonJS?”, so I did something else ! it’s not at the stage I wanted to (it missing a few points to make it really nice), but I will update it later.

So, in a few words :

– it’s a fish game (woow!)
– the main player control the big fish
– you must eat the small fish to survive (or your life bar will keep decreasing)
– the more fish you eat, the bigger you become, making it more harder to avoid the jellyfish
– if you are too big, you can fart to get smaller. you can also fart on the jellyfish to kill them.

The demos is here :

Have a fun !


melonJS & The Chronicles of Link

October 30, 2011

Sounds like a music band, right ?

But it’s not ! I actually wanted to post about this very nice remake/clone that Anthony brilliantly managed to put together using melonJS. And although being “only” a WIP demo for now, it looks really promising and shows (proves?) that melonJS is not only tailored for platform games, as lots of people seems to believe. And I must admit that I was myself impressed to see how fast Anthony built a first version !

You can visit his page here to try it, for more information about the game progress and status, and/or if you want to contact Anthony.

And finally, since last release a google group has been created as well, so feel free to pay us a visit there and discuss about melonJS with us 🙂


And as always, have fun !


melonJS performances

September 17, 2011

Hi there !

With melonJS 0.9.1 being almost ready, I spent some time today doing a quick benchmark to see what was the real benefits of the code rewrite and few optimizations I put here and there.

So here is a small table showing the CPU usage for both version, this is also not a really extensive benchmark, as I just done on it my main development machine, which is powered by a C2D 2.66ghz, and running OSX 10.6.8 :

As you can see the new version shows (in average) more than 16% performances increase on my configuration, which is not bad at all I think. Oh, and I forgot to add that I used Alex4 for the benchmark, which is a high demanding game in terms of resources, since it’s using 3 parallax layers, etc…

melonJS 0.9.1 is mostly a bug fixing release but will also add some cool new features. Better Tiled Integration, and most of all Dirty Rectangle (that was disabled for the above benchmark). It will however still be tagged as “beta” when I will release it (since I still need more extensive testing, and some adjustment), but it will finally allow me to go to my next goal which is mobile devices, where I believe should be quite useful.

Still concerning performances and dirty rectangle, I have a 15% CPU usage (on the same machine) for my dirty Rectangle example, that uses (of course) a non scrolling level, and a canvas size of 1024×768. On my CoreDuo 2Ghz laptop, the same example is running at full speed (60fps), where before, without dirtyRect, it was struggling to reach 34fps. Nice, no ?

I’ll write later about the next version, but for those interested, you can have a look at the changelog on github (should be almost up-to-date).

Cheers !


melonJS 0.9.0 is available !

July 7, 2011

Hey guys,

I’m happy to tell you that melonJS is finally available. Originally I was planning to wait for the 1.0 version to be ready, but I finally realized that if I was waiting for melonJS to be perfect, I would never release it (…), so here comes the 0.9.0 version !

The following things are available through the download page :

  • minified version of melonJS (0.9.0)
  • source package of the library (I will put everything in github in the coming days, the time to learn how to use it correctly)
  • melonJS documentation (auto-generated using jsdoc)
  • a tutorial showing how to create a simple patformer using (of course) melonJS and Tiled.

Please keep in mind that this is all a first release, melonJS is still beta software (source code is not the cleanest one and still contains some debug stuff), and although I tried my best to have a good documentation and/or tutorial, it won’t be perfect at all.

I’m of course interested on any feedbacks (good and bad), either on missing information/documentation, about bug corrections, or on nice features to be added in melonJS. Feel free to contribute with anything as well.

To finish, a few words on my plan for the near future (in no particular order) :

  • optimization (i.e. tilemap drawing) and bug corrections
  • fully stabilize the API (lacks of coherence, or naming to be corrected)
  • go mobile (touch interface)
  • implement a dirty rectangle mechanism
  • implement support for a “standard” spritesheet format (like texturepacker, zwoptex or something)
  • add some particle management (this is not supported by the engine today)
  • look at possible H/W acceleration (CSS, WebGL)
  • Better integration with Tiled (if possible)

That’s all ! Hoping that you’ll have fun with melonJS,



small Alex4 update…

June 1, 2011

Hi Guys,

I just published a small update to Alex 4, version 1.0 1.1 ( be sure to check the version in the Credits Screen, and right-click on “reload frame” if the new version doesn’t show up) ! Actually there is nothing really new in Alex4, but I’ve been working on melonJS since the last Alex release, cleaning code, correctings bugs, implementing stuff, and since they all benefit to the game itself, having a better version online is still nice 🙂

For those interested, here is the changelog in melonJS since last time :

  • fixed camera/viewport object and added a couple of effects (e.g. shaking, fading,..)
  • fixed “boostrap” (2 calls were made to the init function)
  • rewrote the parallax code and fixed a bug that was causing each layers to be drawn 2x times (ouch!)
  • fixed GFX glitches (it was actually a bug in the engine)
  • implemented John Resig’s inheritance mechanism for all public objects

I’m also almost reaching the magical 1.0.0 version (my target for a public release), which also means that melonJS API is getting more and more stable, and the big next point for me now is to work on the documentation. I’ve been trying to do something with jsdoc, hoping to get something automatically generated, but so far it’s a complete failure 🙂 if anyone has any advice on that, I’m highly interested !

Also, the other benefit of the last changes in melonJS, is also a reduced size ! I’m mentioning on melonJS homepage, that melonJS is a lightweight engine, and now with a size of 57kb (minified) I think I can tell it’s true. For information alex4 code is 29kb big (minified).

So for those who played the game and noticed a few bugs, they should be gone now ! Thank you as well to Dominic (ImpactJS) for kindly pointing me out the limitation with John Resig’s implementation 🙂

And finally I’m still looking for some beta-tester, so if you have a nice idea for a game, are looking for a simple framework, and ready to deal with WIP not well documented stuff, drop me an email !

Thank you for reading !


Alex 4 – the web edition !

May 17, 2011

After weeks of work, I’m very happy today to release Alex the Allegator 4, the HTML5 edition !

Alex4 is a WIP HTML5 remake of the classic “Alex the allegator 4” game, available here and created by Johan Peitz from free lunch design. Alex 4 WE, includes for now the first 6 levels of the original game, and has been developed using melonJS, a free HTML5 game engine.  The library being still in alpha stage, don’t be surprised to find some bugs in Alex4 🙂

Alex4 is hosted at TapJS, allowing to keep track of the highscores. So head over there to try it now !

Alex4 has been completely developed using Tiled, the tilemap editor, as you can also see from the below screenshots :

And finally, melonJS has now a real home, as I opened a small site for it here, so be sure to check it out regulary if you are interested in what will happen next !

Feel free to leave any comments (good or bad) by sending an email at “contact at melonjs dot org”.

Enjoy !