Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Creating HTML5, Flash, and Mobile apps with Haxe NME
3116
single,single-post,postid-3116,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
Create Flash & HTML5 All At Once!

Creating HTML5, Flash, and Mobile apps with Haxe NME

The web and gaming have really changed drastically in the last 5 years. It used to be that if you wanted to create the next big thing in games on the web there was really only one solution: Flash. Although Flash hasn’t gone away, now you have many more options to deal with. HTML5, the internet’s favorite tech-thing, is hot right now.

Now with pressures for making games for iOS, Android, and the clutter of other mobile platforms, your options seem overwhelming. What’s more is that every one of those platforms are written in an entirely different language! There are some very clever people who have made different ways to get around this limitation. The clever solution we are going to talk about today is Haxe (pronounced Hex).

Why do I want to talk about Haxe? Well for starters the Haxe programming language is similar to Actionscript, so we don’t have to throw away our mad AS3 skills to use this new VooDoo. We can leverage this huge Flash-like code library to make it easy to make native Windows, Mac, Android, iOS, Blackberry, Flash, and HTML5 games and multimedia applications using the same code. Are you excited yet?

Haxe has been around for years, but has gained more popularity because of the Haxe NME project. The primary reason people would use Haxe origianally was because they wanted to get better performance than the Flash compiler could provide. When you compile a game as a SWF from Haxe, the same code compiled natively from Flash is actually slower. Go figure.

What’s The Same as Flash?

If you use the Haxe NME library, most of the AS3 classes you are used to have been recreated. Everything from a Sprite class to a SharedObject class. From what I’ve seen, about 90% of the AS3 API has been converted over.

Many Flash code libraries have been ported over as well, such as Signals. This makes it even easier to convert over your old Flash code into Haxe NME. Even the notion of a stage and display objects are all the same.

What Is Different?

Primitive data types are different. A Number is a Float in Haxe. An int is an Int in Haxe, and a Boolean is a Bool. Nothing major, but you’ll definitely need to do a lot of find and replace as you port your Flash code.

For loops are cleaner (and stranger). You use three dots to show where you want to start you loop and where you want it to end. So, instead of:

var aMyArray:Array = ["Hi","world","I","am","here"];
for (var i:int = 0; i < aMyArray.length; i++) {
    trace( aMyArray[i] );
}

The same HaXe code would look like:

var aMyArray:Array<String> = ["Hi","world","I","am","here"];
for (i in 0…aMyArray.length) {
    trace( aMyArray[i] );
}

Everything has a type assigned to it. Arrays, Objects (known as Hashes in Haxe). Everything. You still have the option of making an array accept anything using the Dynamic type, but I’ve found it’s nice to have the Haxe compiler do the checking for you. Because of this, when I was porting over some AS3 code into Haxe the compiler uncovered some bugs that Flash didn’t catch.

There are many minor differences, but rather than listing them all out here the Haxe NME project has put together a great quick reference.

Enough Jibber Jabber, Where Do I Get Started???

Installing NME and Haxe is very easy. Go to haxenme.org and download the installer, it will take care of all the installation of the Haxe language, NME, and everything you need to program.

Once you have it installed, you can use any text editor. There is a lot of support for SublimeText 2, however I personally like using MonoDevelop. If you install the Haxe language bindings for MonoDevelop, it will provide code completion, syntax highlighting, and other helpful tidbits. You can even select your target from a dropdown menu and hit Command-Enter to compile, just like in Flash.

To install MonoDevelop, download it from here.

For more information, one of the lead developers of the NME framework has a great article on getting setup.
How to Install Haxe, NME and MonoDevelop

Things To Watch Out For

  • There is more of a learning curve when working with XML. You can get around some of the difficulties by using the Fast class. ( More info here )
  • There are less built in functions for working with Arrays and objects, and can be a little bit of a learning curve using all of the utility classes such as Lambda, just to use indexOf in your array.
  • If you are working in HTML5 you can only use Spritesheets, SWF assets won’t work.
  • Although theoretically when you compile to each platform, everything should behave the same, this is not quite true in practice. Make sure to allow extra time testing each platform you are targetting, as some will contain bugs that the others do not.

With that said, overall I have found Haxe a really fun language to work with. The asset management that NME provides, as well as all the little things like the different loop format, strict typing, and multi-platform nature makes it really satisfying to program in.

Links:

Haxe Homepage

Haxe NME Homepage

Download the source to the Haxe NME demo project (below)