Haxe + lime + openFL

Getting started with haxe, lime and openfl

Premith

Published in

kodemint technologies

9 min readMar 17, 2014

If you are learning only one language let it be haxe. (Not quite there yet but close) ☺

“Multi-Platform, Open Source Programming Language”

Lets take these words one by one. Yup haxe is open source in all the way that term implies. Multi Platform is the real strength of haxe. In a simple sense Haxe can be compiled to other languages like javascript, C#, Java, AS3,php and even the good old c++ (More languages will be added for sure). Haxe also supports platforms like Flash, Neko VM, Unity3d to name a few. Haxe compiler and toolchains can be installed on all major OS.

Haxe Language

Though Haxe language closely mirrors Adobe’s ECMAScript based AS3 it offers more features than AS3 like typedefs, enums etc. Strongly typed and compiled haxe does have an upper hand with other interpreted languages like lua. Hell there is even an AS3 to Haxe convertor https://github.com/as3boyan/tarwins_as3_to_haxe_conversion_script_-_haxe_neko_-

Installation

http://haxe.org/download has installation packages for windows, osx and linux. A pretty straightforward procedure this. Along with the compiler this also installs tools like haxelib, a pretty powerfull lib manager for haxe. After installation finishes you can type haxe at the terminal to see if everything went well.

installed and working! “Haxe Compiler 3.1.0" shows the version number.

In the screenshot above you can also see the languages/platforms haxe supports like js, as3, cs, java etc.

IDE

To select an IDE for haxe can be a bit tricky though there are some really nice one’s out there. For windows users FlashDevelop is the best IDE for haxe there is. http://www.flashdevelop.org/. AS3 developers have been using FlashDevelop as a lighter and free alternative to adobe’s FlashBuilder since long. Newer builds of FlashDevelop comes equipped with good Haxe integration. Only problem here is that FlashDevelop is Windows only (written on top of .net with c#). Intelli J Idea has always been a favorite IDE of mine. Luckily the community version of Idea has a haxe plugin. But the IDE i ended up using for Haxe development is Sublime Text. After installing Sublime (http://www.sublimetext.com/) you have to install this package for haxe editing. https://github.com/clemos/haxe-sublime-bundle . This is quite easy with the sublime Package Manager. There are other IDEs out there like MonoDevelop (has a haxe plugin, does make it feel like FlashDevelop), TextMate etc.

First Program

class First
{
    public static function main(){
       trace(“Haxe is working!”);
    }
}

Sublime Text with haxe syntax highlighting.

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 limehaxelib 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.

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 tizenlime 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.

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.

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.

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.

Our app running on both iOS and Android emulators.

Code

 stage.frameRate = 24;  
 //Set the frame ratevar swf = new SWF (Assets.getBytes (“assets/walk.swf”));            //Load the swf from Asset folder. SWF library in actioncat = 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.

Haxe + lime + openFL

Getting started with haxe, lime and openfl

Written by Premith