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.
