melonJS performances

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 !

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.

small Alex4 update…

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 !

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 !

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 !

Frank Jr. : another HTML5 experiment

Following my previous experience with my small Tapper remake in HTML5, I decided to push this to the next level and build my own game framework/engine.

“Frank Jr.” is today my very first real test (and playable game) with my own Javascript / HTML5 Game Library (jToolBox), on which I’ve been working since the last couple of months. This is of course still far from being a professional stuff (but guess what : I’m not a professional !), and although jToolBox still need a lot of work, I thought this was already good and fun enough to be shared with people, so here it is

To do a quick post-mortem on the project, I would say that the most difficult part was to have a working “cross-browser” implementation for the Audio Element. That part is the one that gave me the most hard time, and I’m planning to post an article about how to do this correctly within the next few days, so come back later if you are interested.

In the mean time, I’ll hope you’ll enjoy this little humble game

[UPDATE] Wanna grab some beers?

As you might have understood, I recently got some interests in the new HTML5 Canvas Element (thanks Gil!), and I’m very happy to show you today the fruit of my last weeks experiments : a Javascript retro remake of the Tapper game

Mini Tapper is a simple Javascript “mini” remake of the well known Tapper game by Bally Midway, developed in pure HTML5, including for the Audio part (no flash). So be sure to have a full HTML5 compatible browser. Initially I’m more an Apple Fan and I was hoping this could work with Safari, but it doesn’t seem to like the way I implemented the audio and is unfortunately not really compatible when it comes to play background music and SFX.

Surprisingly I found doing this quite “easy” (for a first time with HTML5/JS) , and I think that I actually spent most of my time on the various graphics & sounds ripping, which is maybe a first time for me. Some nice stuff could still be added (that I’ll maybe do later), but since it was already fun enough to be playable, I thought it was the good time to make it public.

Feel free to do whatever you want with it (except maybe for the graphics & sounds, since they belong to the original game), but as you will see this is for sure not the best Javascript code ever (but I promise I will do better the next time).

[UPDATE] Just a quick update with the version 1.1 of Tapper, since I finally managed to get the sound fully working with both Safari & Chrome, and corrected a few things like my “preloading” code which was not working as expected.

Cheers !

New Home !

This is at least the 3rd time I have to move my blog since a couple of years (and the second time since I’m living in china, thanks to the great firewall ), and although it will take me some time before I “move” back here all my stuff, I hope you’ll like my new page !

In the mean time, if you get boring you can go here and read that interesting article I found yesterday about javascript optimization.

Then why “javascript” ? Maybe because I’m currently spending my wonderfull time playing with HMTL5 and the new Canvas element. I will also keep you soon posted on my new project, a HTML5 retroremake And you must believe me, HTML5 is great, fun and easy !

See you soon !