haXe : First HTML5 circles

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

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

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

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

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

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 !

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

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 :)

HTML5 : Canvas with mouse interaction.

Here we are going to study about the creation of Canvas dynamically and the basic mouse interactivity with the Canvas elements.

The source files for this example is here for you to download and play.

We are going to use a separate sprite sheet and try to make the scene a little more interesting than the last one. I would say to download the source files and see the example for yourself to see what is it doing. Basically there is a scene on the background with 6 tables and a girl doing some experiment on third table. Towards the left top corner of the scene, there is another girl trying to do some magic with its magic wand. If you look at the code, the scene with the girl doing experiment is a straight forward drawing from the sprite sheet as we did that in last tutorial. The girl with the magic wand is drawn in a dynamically created Canvas. The code looks as below.

//creating canvas dynamically
canvasGirl=document.createElement('canvas'); 
canvasGirl.width=100; 
canvasGirl.height=100;
//get the context
contextGirl=canvasGirl.getContext('2d');
//customise canvas
canvasGirl.style.background='transparent';
canvasGirl.style.zIndex=5;
//add the canvas to the document
document.body.appendChild(canvasGirl);

The first thing is to create a new canvas with “createElement(‘canvas’)”. That will make a new canvas. Now we have to get the context to draw something on it. This is done with “getContext(’2d’)” as usual, nothing new here. And lastly, we have to add our newly created Canvas to the document and this is done with “document.body.appendChild(canvasGirl);” code. Thats beautiful. Everything else in the code is just configuring the canvas.
Once the canvas and context are available to us, we can do anything we are able to do to a Canvas. So the girl with the magic wand is drawn to the context of this Canvas element. The code looks as below.

resetContext(canvasGirl,contextGirl);
contextGirl.drawImage(photo, 108*counter+10, 900, 96, 64, 0, 0, 96, 64);

First we are resetting the Canvas, so as to draw new content on each timer. Since the girl with magic wand is actually an animation, we call the code above repeatedly on a timer event. And first we clear the context with our own function and then redraw an image from sprite sheet at the same place on the canvas, so as to make an animation. If you are following along with the previous tutorials then the reseting of context code should not be new to you, else the code looks as as below.

resetContext=function(canvasRef,contextRef){
	contextRef.clearRect(0,0,canvasRef.width,canvasRef.height);
};

All we have, are two layers of drawing and animation drawn from the same sprite sheet.
Lets do some mouse interactivity with these elements. The code looks as below.

//------------ adding mouse interaction --------------
$('#board_one').mouseup(function() {
  	alert('Canvas with Tables');
});
$(canvasGirl).mouseup(function() {
  	alert('Canvas with Girl, doing magic.');
});

The trick here is JQuery’s neat job. Just remember anything wrapped with $() will give a JQuery element of the same HTML element. So our dynamically created Canvas is made an JQuery element by

$(canvasGirl)

Notice that there is no ‘#’ before the name as it is before ‘board_one’, thats for the ‘board_one’ we are referring the HTML element with id ‘board_one’, while the other one we are creating dynamically in javascript and converting it to a JQuery equivalent.
Thats nice and if you have not done yet, please go ahead and click on the board to get an alert showing different message and if you click on the girl with magic wand, that will alert a different message.
This is quite simple and straight forward interactivity, but I think you got the point.
Happy coding :)

And yes, I made it to one month of continuous posting, highly influenced by Keith Peters. Though it was not all javascript and I missed some dates, but all in all, the number of posts in a month is achieved. I am quite happy about my effort and a big thanks to all of you, who read it.