Tag Archives: haxe

NME 3.1 RC4 is released

Posted on by

Well moving ahead with haXe and NME is as exciting as the new release of NME library. Though this is a minor release to RC4, but looking at the speed of its release cycle, it seems we are just fine learning the new options in NME, where the NME development team is doing their best to give us new features soon.
If you are like me and coding in MAC then there is definitely a point when you think how to install the new libraries into my development environment. Actually its as simple as putting the downloaded library in right folder and setting the current environment to point to the latest version.
It may be required depending upon your machine settings that you may require to configure your machine so as to show all the hidden and system files, which are generally hidden.
All the supporting libraries of haXe, remains inside haXe folder. So just navigate to 

/usr/lib/haxe/lib

And there you will find all the library folders.Now go inside “nme” folder and the current version of the library will be present there. All we have to do is, download a new version of the library and put it in this folder. I have recently downloaded the 3.1RC4 and extracted it into this folder. The main folder name I kept as “3,1,RC4″, keep a note these are comma (3,1,RC4) thats how haXe reads them. So its just a practice. Now there is a file inthis folder with name “.current”(This file is generally hidden). Here the currently active version of the lib is specified. Open this file in a text editor and remove everything else (If there is anything at all there). Then type “3.1.RC4″ as the only text in the file. Just remember when we name our folder as comma separated values, haXe reads them as dot(.) while reading from the “.current” file, so we have to just follow this instruction.
That all to it. If you fire up the Terminal in MAC and type 

haxelib list

then the output will show something like 

nme: 3.0.1 [3.1.RC4]

The version with a square bracket is the currently active version.
So get the latest lib and activate it in development environment and have fun :)

haXe : First HTML5 circles

Posted on by

We are going to write an application, which will just draw out different color circles to the HTML5 canvas. Once the number of circles reaches 1000, we are going to clean it up and start over again.
There are 2 files, the first one is the program entry point Main.hx and then there is an ApplicationStage.hx. Basically we are not going to write anything in the program entry class, rather we will keep it clean all the time. So for us, the first class to write some code is ApplicationStage.hx. Below is the code for the two files;

class Main 
{

	public static function main() 
	{
		new Main();
	}

	public function new()
	{
		var as:ApplicationStage = new ApplicationStage();
		Lib.current.addChild(as);
	}

}

We are not doing anything on Main class, rather creating an object of ApplicationStage and adding it to the stage. So the code for ApplicationStage looks as below.

package ;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.Event;

class ApplicationStage extends Sprite
{
	private var count:Int;
	private var max:Int;

	public function new() 
	{
		super();
		this.init();
	}

	private function init():Void
	{
		this.count = 0;
		this.max = 1000;
		this.addEventListener(Event.ENTER_FRAME, onEachFrame);
	}

	private function onEachFrame(e:Event):Void
	{
		//count
		this.count++;
		//draw
		var g:Graphics = this.graphics;
		g.beginFill(Math.round(Math.random()*(256*256*256)),Math.random());//Math.random() * 256, Math.random()
		//g.beginFill(0xFF0000,1);//Math.random() * 256, Math.random()
		g.drawCircle(Math.random() * 600, Math.random() * 400, Math.random() * 50);
		//g.drawCircle(20,40,10);
		g.endFill();
		//clear everything
		//trace(this.count);
		if (this.count>this.max)
		{
			g.clear();
			this.count = 0;
		}
	}

}

If you are coming from Flash, it should look as if you are writing Actioinscript ! So no worries.
Now the last thing is to write the nmml file for NME. We save it with name compile.nmml and it looks as below.

<pre>
<?xml version="1.0" encoding="utf-8"?>
<project>
 
	<app title="haXe_Day_8" 
		file="haXe_day_8"
		main="Main" 
		package="com.example.saumyaray" 
		version="1.0.0" 
		company="saumya"></app>
		
	<window width="600" height="400" 
			fps="30" 
			orientation="portrait" 
			resizable="false" ></window>
 
	<set name="BUILD_DIR" value="Export" ></set>
 
	<classpath name="src" ></classpath>
	<haxelib name="nme" ></haxelib>
 
	<ndll name="std" ></ndll>
	<ndll name="regexp" ></ndll>
	<ndll name="zlib" ></ndll>
	<ndll name="nme" haxelib="nme" ></ndll>
</project>
</pre>

Finally the command for compiling it to HTML5 will go as below in the commandline.

haxelib run nme test compile.nmml html5

Well, that all to it.
The source files are here for your reference.

haXe : Adding a display object

Posted on by

Well, in our last tutorial we have already written a fair entry point to any haXe application. Now lets see how we will add a custom display object to our project.
A new display object class is written as below and saved as “VisualBox.hx”.

import flash.display.Sprite;
class VisualBox extends Sprite
{
	public function new()
	{
		super();
		trace(this);
	}

}

Since this is a visual class, it will extend a display object and thats what we are doing already. Nice and fine, but one thing to remember is, we have write a method named “new()” in order for that display object constructor. Then the “super()” call is necessary as for any display object.
Now lets see how are Main.hx looks now.

package;
import flash.Lib;

class Main {
	public static function main() {
		trace("Hello From FDT haXe !");
		new Main();
	}
	public function new(){
		var vb:VisualBox=new VisualBox();
		Lib.current.addChild(vb);
	}
}

Here is something happening! First if we have to add something to the current stage, we have to get it as “Lib.current”. Since we are using Flash for output, the path looks as “flash.Lib.current”. We have already imported flash.Lib, so we just have to access it as “Lib.current”.
Another thing to note is that, since Main.hx and the “VisualBox.hx” are on the same package, the package definition for “VisualBox” is omited from the file. Just look at the code above and see that “VisualBox” is not nested inside another package definition!
Happy haXe ing!

haXe entry point

Posted on by

Lets get down to coding. The first class of ours in haXe is the main class or the program entry point class. The name of the class may be anything but the point to remember here is the entry point is a static function named main. So the first class of a haXe application looks as below.

package;
class Main {	
	public function new(){
	}
	
	public static function main() {
		trace("Hello haXe !");
		new Main();
	}
}

If you keep a closer look, the main class is not a display object, unlike the typical Flash application. Rather we have a general class here which is saved as “Main.hx” and this class has a method called “main()”. This is typical haXe and thats all we need to compile our program to a SWF.
We can save our compiler parameters in a file named “compile.hxml” or something similar as long as we can refer to it as a build file and having a “.hxml” extension. This file is run by the haxe compiler. In our particular case this file looks as 

-swf9 bin/swf/Main.swf
-main Main
-cp src

Here we are defining the target type to be produced from the haXe compiler. Then the program entry class and next is class path.
Running this will produce a SWF named “Main.swf” in the folder “bin/swf/Main.swf”.
Quite straight forward and simplicity at its best.

some cool haXe IDE

Posted on by

Well developing in a language without a specific IDE for itself might be too much for a beginner. Fortunately we have some very cool and nice IDEs available for us.
1. FlashDevelop (Based on SciTE)
2. FDT5 (Based on Eclipse)

While both these IDEs are free, FlashDevelop is windows only. But I am surely in love with FlashDevelop. FDT is good but being on Eclipse, it takes up a lot of memory, on the other hand FDT runs on all platforms. So choose your weapons and get ready to haXe it all.

haXe basics

Posted on by

The bare bone basic of haXe language is one must need an Entry point to the Application. This could be any class, but then one must specify the entry point function, which is “main()” , the signature of function looks like

public static function main() {}

Constructors in HAXE are written as “new()” as below

class GameStage
{
 public function new(){}
}

the package declaration ends with a semicolon (unlike any other major laguages, it does not contain curly braces)

package com.saumya.haxe.helloWorld;
class GameStage
{
	public function new() {}
}

If you are extending an display object, then “super” must be called from the constructor. It snot optional, its mandatory.
Every line of code must end with “;” semicolon, again this is mandatory not optional.
Every class file is saved with “.hx” extension.
The haxe compiler file is saved with “.hxml” extension.
The NME compiler file is saved as “.nmml” extension.
A typical “.hxml: file looks as 

-swf bin/swf/inTheBigBrain_as3_FP10.swf
-main Main
-swf-header 800:600:30:000000
-cp src

Similarly to compile from NME, you have to create a “.nmml” file.
A typical “.nmml” file description is here.

for compiling a .hxml file, you fire up the following command,

haxe test.hxml

Have a look at the detailed options.

To compile a nmml file, you have to fire up one of these commands. But the very basic is 

haxelib run nme test my.nmml flash

The detailed options are here.

Hope that gives you the very basics of the language.

haXe

Posted on by

What is it all about ? Well its all about another language. Not really, if you know ECMA script like javascript or actionscript, haXe is just another home. It does not hurt to learn the simplicity of the language. That does not mean, its not capable! The capability of this language is, it compiles to a lot of platforms! Are you serious?! Yeah, you heard it right. It compiles to almost all the platforms we have now. Starting from AVM1 and AVM2 swfs to native windows, mac, linux applications.
The simplicity of a scripting language and the robustness of C, the best of both worlds! Awesome. For a quick overview of all the platforms, head over to the official page here.
Now haXe comes with a lot of libraries on top of the basic language, which makes it even interesting. And one of the such libraries is NME. After working in NME for a week, I am not kind of addicted to it. It simply allows the code to be compiled to HTML5 and iDevices like iPhone/iPad. The complete list of supported devices are listed here in the official page.
Hope that should already have been making you interested in haXe.

If you still need to see some hands on coding and examples, join me this sunday, where I am doing a workshop on haXe and NME for flash developers.
Happy haXe -ing.

December with a new beginning !

Posted on by

Well, after a continuous month of learning and posting about javascript and canvas, I am up for a new learning. And this time its haXe with NME. Yeah, the excitement is tremendous and I can not explain in words about what I got in last few days. HAXE is truly a life saver in many occasion.
As I will go on on my study of the language and the compiling options I am planning to post it here.
So let the party begin.

haXe : Compiling to javascript

Posted on by

After all these tutorials in pure javascript, lets see is there is any other help from any where for our javascript programming. The best thing to happen is haXe. If you have not heard about it yet, haXe is a language on its own! But why I need to learn another language?! Well, there is not much difference in javascript and haXe. As you have already seen, inside javascript also we have different libraries and we need to learn them to use them, lets look at haXe, for now, as another library (which is obviously not). Now, you will be amazed to know that after you know haXe and start writing on haXe, your code can be compiled to whole lot of different languages including C++,PHP and javascript.
First of all one need to download and install haXe. The installation is quite straight forward and the help at its own website is quite nice. I do not think you will get stuck there, but if it is, please drop me a line here or best is ask in their forum.
The hello world application for javascript I am writing here is straight out of haXe documentation. I am just putting it here for I got stuck at the compiling time and want you to get going in haXe without ever stopping anywhere.
I hope by this time, you have installed haXe on your machine. Lets write our first haxe class.

package ;
class Main 
{
	public static function main() 
	{
		trace('Hello');
	}
}

The purpose is to show a message we passed in “trace” function. We will write an HTML file to use the javascript file compiled from the above haXe code. Now save the above in a file with a name say “Main.hx”. Yep, “.hx” is the native HAXE extension. Suppose we are going to save the generated javascript file inside the “js” folder and with name “my.js”. Lets say that our HTML file is named as “HelloWorld.html”. So the folder structure looks as below.

src
   Main.hx
bin
HelloWorld.js
   js
     my.js

So our “Main.hx” is on “src” folder and all our generated code is inside “bin” folder. The generated javascript is inside “js” folder, which is inside “bin” folder. You may be asking, where are the javascript and html files?! Well, we have decide the structure of our application first and now we will move on and create those files in necessary folder. First lets see the HTML file code, which is as below.

	<div id="haxe:trace"></div>
	<script src="js/my.js"></script>

Basically we need a div element with id “haxe:trace”, so that all our “trace()” function calls in our “.hx” file will be written inside this div . We are ready for action now. All we need is to compile our haXe code to javascript.

Open command prompt (terminal in Mac) and move to the src folder, where we have stored our “.hx” file. Now write the code below in the terminal and press enter.

haxe -main Main.hx -js ../bin/js/my.js

Now go inside “bin/js/” folder and you will be amazed to see our “my.js” file is created there. Open the html file in a browser to see the result of it. The “Hello” we typed in trace is now written to the HTML page div tag. Sweet, is not it!
Suppose we want an real alert, a javascript alert, then modify the haxe code as below.

package ;
class Main 
{
	public static function main() 
	{
		js.Lib.alert('Hello World');
	}
}

Next process, I hope you know already :) . Compile it in HAXE compiler as below to generate the JS file with the modified code. This means fire up the command prompt and put the same command as we did before, which is as below.

  haxe -main Main.hx -js ../bin/js/my.js

Now open the same html file in the browser again to see the alert message.
Yeehaa :) we got a nice javascript code generated from haXe.

Here is the source files with comments in it for you to play with.

Happy haXeing :)