Copy the code above to your sublime window and save it as First.hx. The Sublime bundle for haxe does provide some shortcut keys to make life easy. Press ctrl + shift + b to generate a build file. (ctrl even on OSX). The generated build file should look like

# Autogenerated build.hxml # First (js:first.js)

-main First

-js first.js

main First (This line tells the compiler which class holds the main function or the entry point)

-js first.js (Here js tells the compiler to produce javascript output and the filename for the output should be first.js.

To compile the file press ctrl + enter. (Normal build system of Sublime wont work here. Even in OSX it should be ctrl + enter to compile the Haxe program). If everything goes well first.js will be generated.

(function () { “use strict”;

var First = function() { };

First.main = function() {

console.log(“Haxe is working!”);

};

First.main();

})();

You can experiment with the build.hxml to target other platforms.

# Autogenerated build.hxml # First (php:first.php)

-main First

-php first.php

This will generate php code for our “Haxe is working code”. Okay this is cool, but dint Haxe promise more targets. Lets try Java now. Making the changes in build.hxml like

# Autogenerated build.hxml # First (java:first.java)

-main First

-java first.java

and pressing ctrl + enter should generate Java code right? But here it throws an error.

Error: Library hxjava is not installed : run ‘haxelib install hxjava’

[Finished in 0.1s with exit code 1]

[cmd: [‘haxe’, ‘-cp’, ‘/Users/premith/Desktop/Haxe_Start/Projects’, ‘—connect’, ‘6001', ‘—cwd’, ‘/Users/premith/Desktop/Haxe_Start/Projects’, ‘-main’, ‘First’, ‘-java’, ‘first.java’]]

[dir: /Users/premith/Desktop/Haxe_Start/Projects]

[path: /usr/bin:/bin:/usr/sbin:/sbin]

Enter Haxelib

The error message shows exactly what needs to be done. Open the terminal and type haxelib install hxjava. This will download and install the hxJava library needed by the haxe compiler to generate Java code. You can also try haxelib install hxcpp. (A warning here haxe to cpp is still not that smooth, for native targets we will look into openFL). Visit http://lib.haxe.org/ for other haxe libraries to be installed via haxelib.

To recap

Install haxe

Choose an IDE

Write a simple program

Compile to different languages

Use haxelib to install libraries

Going Native with lime and OpenFL

One of the things that got me attracted to Haxe was targeting native mobile platforms like iOS and Android. Out of the box Haxe cannot create Android Apk’s or iOS Ipa’s. With that out of our way lets see how do we create native apps for iOS, Android, Blackberry, Tizen, Ouya etc with single codebase written in Haxe.

Lime and OpenFL.

Lime or Light Media Engine is the glue which helps make our Haxe code to run in various native platforms. Lime exposes native functionality like OpenGL, Audio, Input, Windowing etc (From the lime project readme https://github.com/openfl/lime). Lime is the layer closest to our targeted native platforms.

OpenFl is an open source implementation of the familiar Flash API. (The DisplayList based API that flash exposes. If you have experience with targeting Adobe AIR all this will be very familiar). OpenFL resides on top of Lime thus providing a true native experience.

HaxeCode OpenFl Lime Native Target

Since lime and OpenFl are standard Haxe libraries, installation is a breeze. You can use haxelib to install both. Only thing is to make sure you install Lime before you install OpenFL.

haxelib install lime haxelib run lime setup

and then

lime install openfl

These commands should install lime and openfl along with some examples. You can test the installation with the command

lime create openfl

If installation went well it should list all the openfl example projects.

Listing OpenFl Examples.

Now we have to setup each individual platforms you need to target using openFl. This is also done through lime command tools. For example to setup Android you just have to type

lime setup android

This will download all the needed files and setup openfl for android development. Needed files include Android SDK, Android NDK, Apache ANT, Java JDK. If you already have any of these installed in the machine you can type ‘n’ when setup prompts if you want to download and give the working path to the concerned files.

As for iOS there is no automated lime setup command. You need to have XCode and XCode command line tools in your mac. (iOS is currently only supported in OSX).

Likewise lime setup can be used to target other platforms like Windows, OSX, Linux, Tizen etc. Targets like HTML5, Flash does not need a lime setup command to work.

True Cross platform development is still not a reality with lime. You can’t target Windows from OSX or otherwise. Android, Flash, HTML5 can be built from any OS. To setup Tizen and Blackberry the commands are

lime setup tizen lime setup blackberry

Setup commands for other targets can be found here.

Creating a Simple Android/iOS App

Lets try and create a native Android/iOS app using OpenFL. You can use lime tools to create project structure. Type in

lime create openfl:project TestApp

This will create the folder structure for an OpenFL application.

openFl Project Directory Structure

Look inside the project.xml file

<?xml version=”1.0" encoding=”utf-8"?>

<project>



<meta title=”TestApp” package=”com.example.testapp” version=”1.0.0" company=”Company Name” />

<app main=”Main” path=”Export” file=”TestApp” />



<source path=”Source” />



<haxelib name=”openfl” />



<assets path=”Assets” rename=”assets” exclude=”openfl.svg” />

<icon path=”Assets/openfl.svg” />



</project>

The line in bold shows how to link haxelib libraries into our project. This being an openfl project openfl library is added by default. For this app we will be using swf library. So first install this library using haxelib.

haxelib install swf

This will enable us to load swf assets into our project. Yes we can load swf assets without the Adobe Air runtime. Now this is awesome. Flash Developers can maintain their workflow. Design on Flash CS and compile it natively for mobile. (Scripts, Nested Movieclips won’t work at this point). After swf library is installed by haxelib add the following line in the xml.

<haxelib name=”swf” />

Test App

Here is what we are going to do. Load an animated movie clip from an swf and render it. All done natively and on multiple platforms. (iOS and Android) Although it should be possible to compile this code to run on Blackberry, Tizen and other platforms for the sake of demo we will restrict to iOS and Android. Lets make an swf for this project. You can download the fla here and the swf here.

Credits for the image: http://www.codeandweb.com/blog/2013/05/16/uikit-animations-with-texturepacker

This is our swf. A guy walking. After compiling the swf copy it to the Assets folder. Couple of things to note Tweening, Nested Movie Clips, AS code inside the swf won’t work as of now. So the animation here is plain old key frame animation. We can achieve all this using sprite sheet animation. But i wanted to showcase openFl’s ability to load swf files and render it natively.

Code

In the earlier created TestApp folder you should see a Main.hx file. Copy the below code into this file.

package;

import flash.display.MovieClip;

import flash.display.Sprite;

import flash.events.Event;

import openfl.Assets;

import format.SWF;

import openfl.display.FPS;

class Main extends Sprite {





var cat:MovieClip; //To load MC from swf public function new () {

super (); stage.frameRate = 24; //set frame

var swf = new SWF (Assets.getBytes (“assets/walk.swf”));

cat = swf.createMovieClip (“GuyWalk”);

cat.height = stage.stageHeight;

cat.width = stage.stageWidth;

stage.addEventListener(Event.RESIZE, stage_onResize);

addChild (cat);

addChild (new FPS ());

}

private function stage_onResize (event:Event):Void {

cat.width = stage.stageWidth;

cat.height = stage.stageHeight;

}





}

project.xml should look like this

<?xml version=”1.0" encoding=”utf-8"?>

<project>



<meta title=”TestApp” package=”com.example.testapp” version=”1.0.0" company=”Company Name” />

<app main=”Main” path=”Export” file=”TestApp” />



<source path=”Source” />



<haxelib name=”openfl” />

<haxelib name=”swf” />



<assets path=”Assets” rename=”assets” exclude=”openfl.svg” />

<icon path=”Assets/openfl.svg” />

<library path=”Assets/walk.swf” /> </project>

Flash developers should feel right at home looking at this code. In sublime Text you can press ctrl + shift + b to select the platform to build.

select the platform

For quick testing you can select the nekoVM target. To run press ctrl + enter.

First lets try out the iOS build. Press ctrl + shift + b to select iOS. Then ctrl + enter to run on simulator. This will also create an XCode project so that you can build and deploy on a real iOS device. All these builds and project files will be placed inside a directory named Export inside the project folder.

Android and iOS emulators

Our app running on both iOS and Android emulators.

Code

stage.frameRate = 24;

//Set the frame rate var swf = new SWF (Assets.getBytes (“assets/walk.swf”)); //Load the swf from Asset folder. SWF library in action cat = swf.createMovieClip (“GuyWalk”); //Get the movieclip from the swf. In FlashCS you have to use the export for actionscript. Refer fla addChild (cat); //add the MC to the stage

This is only the beginning for openFL and Haxe. Though there are some great game engines built on top of haxe like HaxeFlixel, HaxePunk etc what it really lacks is a decent UI library like how Starling has the brilliant FeathersUI.

OpenFL is created and maintained by Joshua Granick. He can also be found on Twitter

More OpenFL documentation can be found here.