I’m not used to write about something that isn’t finished or that isn’t an accomplishment, but I think I need to change that. I’ve said before that I would try cocos2d-html5, and this post is about what I’ve been testing these last days.

As I had previous experience with cocos2d-x, and I’m a web developer since forever, it was pretty straightforward getting the hang of cocos2d-html5. The framework have an unusual way of loading the needed files and the initial boilerplate is a bit messy, but the easy way of “subclassing” made me very comfortable. One important caveat is that I could only stretch the canvas without blurring everything on Chrome, Firefox and Mobile Safari from iOS 7 (haven’t tested on Android), by using the imageSmoothingEnabled option. There are some CSS properties that also works on Safari (and maybe older iOS versions), but it didn’t work with the way cocos2d-html5 manages the canvas.

I’m also trying out WebStorm and I’m enjoying every bit of it. I had never used a “big” IDE for programming in Javascript (I’ve used Icenium‘s Graphite, but oh well…), so I’m amazed by the workflow it provides. The nice auto-completion and the built-in web server makes everything a breeze. I’m considering buying it when I get the money – my trial period expired and now I’m forced to close the app every 30 minutes 🙁

Another app I started using throughout all this was Pixen. For me, it is one of the best pixel art apps for OSX, BUT (read this “but” out loud and make a dramatic pause) it is filled with creepy bugs. It’s really sad when you find a software that seems crafted for you but programming errors and slouchiness prevents you for using it. I hope the developer listen to the community and fix the worst problems. The app was recently updated on the Mac App Store, but, strangely, the project’s GitHub is stalled.

My initial goal was porting a piece of C++ code I made on cocos2d-x for platformer games (although I haven’t made one so far), and that went out great. I was surprised by how beautiful the code became when ported to Javascript and posted a picture on Twitter about that. The only challenge was that I couldn’t use the Box2D version that comes with cocos2d-html5, for it didn’t have the features I needed. I found a more updated one that served me well, despite having some peculiarities caused by the Javascript conversion, which was done through emscripten.

After that, I implemented some touch controls, tested on iOS and I was really happy to see that I could make a game that would run on mobile browsers without big effort. So, as I took some days off from work, I set out to build an actual game. I spent some time drawing animations, two simple collectibles and a tileset, implemented game pad support, coded some game mechanics, some HUD, an enemy, level progressing, refactored a bit. But then, I tested on iOS again and I frowned as I watched the significant change on the FPS. I don’t know exactly what can be causing that, but I’m assuming the cocos2d-html5 rendering isn’t optimized for mobile devices, and including Box2D didn’t help much.

You can see what I built here:
http://bassarisse.com/webgames/platformer-test/
Please use Chrome or Firefox for best performances, but  only the first one will support your XBOX360 joystick 😉

I should probably try using some other physics engine (or even coding my own), but I decided to rewrite what I got so far with Phaser. Since the 1.0 release, Richard Davey is updating it like crazy and the forum is on fire. Every feature is said to be lightweight and focused on performance, so I’m really excited about it. It will take some time for me to learn the new API, as the documentation isn’t ready AND my holidays are over, but I hope it will be worth!

However, it appears that, as I wrote this, a new version of cocos2d-html5 was released with some performance improvements. Time to test the crap out of it!

UPDATE (9/25/2013): In fact, this last release of cocos2d-html5, version 2.2, greatly improved the performance on iOS, but I’ll keep the decision about porting to Phaser. Let’s see how it goes.