HaxeNME

I’ve already mentioned HaxeNME in previous post. With HaxeNME you can compile the same code for different platforms. It is based on Flash API so it wouldn’t be problem for Flash developers to create HaxeNME applications. Here is simple example:

As you can see code is almost the same as ActionScript 3. Unlike AS3 this code can be compiled to native code for each target platform. So you don’t need any additional runtimes like JVM or Adobe AIR to run HaxeNME application. Currently HaxeNME supports 8 platforms. But this topic is out of current post. Let’s get back to the subject and look at HaxeNME output. As a result of compilation we have to files: html and js. The size of js file is 253KB - quite heavy for this simple example. Optimization of js with advanced compilation level of Google Closure Compiler reduced size of js to 132KB, almost twice smaller, but app stopped to work in browser without any error:-) Using simple compilation level produced 185KB of js and example works fine.

CreateJS

I think everybody who works with Flash and stay tuned with Flash-world heard about new HTML5 functionality of Adobe Flash CS6. Now it’s possible to convert your animations to pure HTML5. This feature based on CreateJS framework, “a suite of Javascript libraries & tools for building rich, interactive experiences with HTML5.” It consists of 4 parts:

It also based on Flash API but the goal of CreateJS isn’t cloning of Flash API but painless transfer from Flash to HTML5. For example, Flash events are not implemented in CreateJS. Instead it uses traditional JS event model (e.g. object.onClick = function(){…}). For this example Haxe produced 1KB of js-code but to be fair we need to add size of CreateJS libraries to this number. Our generated js + 4 CreateJS libraries (although we use only 2 of them) = 93KB - twice smaller than HaxeNME.

But in this case size isn’t so important. I think the most important indicator for graphics is performance. So I created 2 benchmarks to compare performance of CreateJS and HaxeNME:

It’s clear fact that HaxeNME (I mean HTML5 target of HaxeNME) is much slower than CreateJS. HTML5 target of HaxeNME creates new canvas for each DisplayObject so for 1000 penguins it need to create 1000 canvases. While CreateJS uses only one canvas instance to draw all DisplayObjects. This is the main reason for such difference.

Summary

Pros and cons of HaxeNME:

Implements Flash API. It will be easy for Flash developer to use this framework;

You can easily compile your HaxeNME application to native application for each of 8 supported targets;

Some features of Flash are not working in HTML5 target. For example, masks. I hope it will be fix in future releases;

Poor performance of HTML5 target due to DOM-rendering of display list.

CreateJS:

Supported by Adobe Flash CS6 so you can easily convert your flash animations to HTML5;

Small footprint. It’s not necessary to use all libraries from toolkit together. You can use only EaselJS for canvas interactions or only PreloadJS to load your resources;

Simmilar to Flash API;

A lot of features missed for Flash developer, e.g. events, keyboard interactions, BitmapData API. Of course, it’s easy to find replacement for them, but it takes more time sort out such things, especially if you’re not familiar with JavaScript.

And the last thing. Here is HTML5 remake of famous “Singing Horses” flash. I’ve made it using CreateJS. Just click on any horse.