Posts Tagged ‘Javascript’

h1

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 !

h1

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 !

h1

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,

Cheers.

h1

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 !

h1

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 !

h1

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 !

h1

my “50cents” tips for a “working” cross-browser Audio implementation

January 27, 2011

Well, while working on Frank Jr. I got several headaches on the Audio Implementation, and more specifically in getting it working on all browsers (I mean Safari, Chrome and Opera, as they are the only I really care about), and I wanted here to give some  feedback on how I finally achieved it. These tips are based on both my own experience/investigation on this matter, and the information I collected from the internet (based on other people experience). Also, this article does not cover the basics of loading sounds, lots of website are already largely covering the subject (see the links at the end of this article) and also does not cover mobile browser specific “issues” (like iOS, Android).

So, let’s get started :

Tip #1 : the loading part

– use the ‘canplaythrough‘ event to ensure you sound is properly loaded (as this event is fired only when the browser determines that it can play through the whole audio without stopping) and don’t forget as well to make a call to “removeEventListener” to remove the notification (it might be not needed, but seems to be cleaner this way).

– use the ‘error‘ event to be notified on any problem when loading your sound (see next tip).

Tip #2 : don’t trust your hosting services

– As I was saying, I use the ‘error‘ event to be notified when a sound cannot be loaded. This can be very useful in case you have a shitty hosting service for you stuff (like me), giving you sometimes some timeout when loading resources. So in my case each time a error event pop-up, from the callback called by the ‘error‘ eventListener, I just call again the load() function of the corresponding Audio Element, giving me a very simple infinite & automatic retry mechanism :

soundLoadError: function(sound_id) {
this._audio_channels[sound_id][0].load();
},

The “audio_channels” being here an array containing a reference to all the Audio Object I created.

Tip #3: cloneNode is your friend

If you already played with the Audio Element, you should probably know that actually the best(?) way to overcome the single-channel limitation of the audio tag is to actually create copy of the same sounds, allowing to simultaneously play them when needed, which gives for a 4 channels sound somethings like this (in a simplified way) :

{
  _audio_channels[my_sound_id][1].src = "/sounds/bangbang.mp3";
  _audio_channels[my_sound_id][2].load();
  _audio_channels[my_sound_id][2].src = "/sounds/bangbang.mp3";
  _audio_channels[my_sound_id][2].load();  
  _audio_channels[my_sound_id][3].src = "/sounds/bangbang.mp3";   
  _audio_channels[my_sound_id][3].load();
  _audio_channels[my_sound_id][4].src = "/sounds/bangbang.mp3";
  _audio_channels[my_sound_id][4].load();
}

As you can see, this is for sure not bad (once used properly and using some function to avoid duplicating some code), but why do you have to manually do 4 times the same stuff when the browser can do it for you, and most of all why not wait for the first mp3 to be loaded before duplicating it ?  CloneNode is very usefull function that creates an exact copy of a specified node, in our case an Audio Element, so each time the sound I want to be on multiple channel is loaded I just need to do :

for(var channel=1;channel<sound_channel;channel++)
{
   audio_channels[sound_id][channel] = audio_channels[sound_id][0].cloneNode(true);
}

Isn’t life beautiful ? First I know that my mp3 is loaded, and then I don’t have to care again about the path, and the event to manage… CloneNode just take care of duplicating the sound on channel 0, and it’s just easier that way and working perfectly !

Tips 4 : don’t trust your browser

Some browser don’t really do stuff correctly, so here some adjustment to be done :

– On some browser when you reach the end of a sound, it’s better to force the value of the CurrentTime property to 0. And to give another hint, on Chrome, it’s even better to force the value to something different than 0 (like 0.01) as else sometimes the sound is not played.

  audio_channels[sound_id][channel].pause();
  audio_channels[sound_id][channel].currentTime = 0.01;

Then there is two ways of doing this :

1. just before playing a sound

2. or using a callback, once the “ended” event is fired. I personally prefer the second one, as anyway I use this event in my code to notify me when a sound is fully played.

That’s it !, I hope you’ll find this useful 🙂

And to finish, I’d like also to share with a very basic drumbox of course fully implemented in HMTL5 using the Audio Element. The used samples are not so terrific, and the loop algorithm (to play them) is not correct, but it was not the point here.


And to finish, some external links that I found useful when implementing all this :

Native Audio in the browser

Stories in Flight : HTML5 Audio and Javascript control

Everything you need to know about HTML5 Audio & Video