Comparing NME Flash and HTML5 targets' drawing APIs

Code examples for the post "Comparing NME Flash and HTML5 targets'
drawing APIs" on MatterHaxe blog.
Link:
http://matterhaxe.wordpress.com/2012/05/19/comparing-nme-flash-and-html5
-targets-drawing-apis/

.gitignore

@@ -0,0 +1,2 @@
+
+.DS_Store

ParticlesFall/ParticlesFall.sln

@@ -0,0 +1,68 @@
+
+Microsoft Visual Studio Solution File, Format Version 10.00
+# Visual Studio 2008
+Project("{319CB2C6-23BD-43E1-85B5-2AAFA3577041}") = "ParticlesFall", "ParticlesFall\ParticlesFall.nmeproj", "{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Android = Debug|Android
+		Debug|BlackBerry = Debug|BlackBerry
+		Debug|Flash = Debug|Flash
+		Debug|HTML5 = Debug|HTML5
+		Debug|iOS = Debug|iOS
+		Debug|Linux = Debug|Linux
+		Debug|Mac = Debug|Mac
+		Debug|webOS = Debug|webOS
+		Debug|Windows = Debug|Windows
+		Release|Android = Release|Android
+		Release|BlackBerry = Release|BlackBerry
+		Release|Flash = Release|Flash
+		Release|HTML5 = Release|HTML5
+		Release|iOS = Release|iOS
+		Release|Linux = Release|Linux
+		Release|Mac = Release|Mac
+		Release|webOS = Release|webOS
+		Release|Windows = Release|Windows
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|Android.ActiveCfg = Debug|Android
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|Android.Build.0 = Debug|Android
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|BlackBerry.ActiveCfg = Debug|BlackBerry
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|BlackBerry.Build.0 = Debug|BlackBerry
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|Flash.ActiveCfg = Debug|Flash
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|Flash.Build.0 = Debug|Flash
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|HTML5.ActiveCfg = Debug|HTML5
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|HTML5.Build.0 = Debug|HTML5
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|iOS.ActiveCfg = Debug|iOS
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|iOS.Build.0 = Debug|iOS
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|Linux.ActiveCfg = Debug|Linux
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|Linux.Build.0 = Debug|Linux
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|Mac.ActiveCfg = Debug|Mac
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|Mac.Build.0 = Debug|Mac
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|webOS.ActiveCfg = Debug|webOS
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|webOS.Build.0 = Debug|webOS
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|Windows.ActiveCfg = Debug|Windows
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Debug|Windows.Build.0 = Debug|Windows
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|Android.ActiveCfg = Release|Android
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|Android.Build.0 = Release|Android
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|BlackBerry.ActiveCfg = Release|BlackBerry
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|BlackBerry.Build.0 = Release|BlackBerry
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|Flash.ActiveCfg = Release|Flash
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|Flash.Build.0 = Release|Flash
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|HTML5.ActiveCfg = Release|HTML5
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|HTML5.Build.0 = Release|HTML5
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|iOS.ActiveCfg = Release|iOS
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|iOS.Build.0 = Release|iOS
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|Linux.ActiveCfg = Release|Linux
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|Linux.Build.0 = Release|Linux
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|Mac.ActiveCfg = Release|Mac
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|Mac.Build.0 = Release|Mac
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|webOS.ActiveCfg = Release|webOS
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|webOS.Build.0 = Release|webOS
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|Windows.ActiveCfg = Release|Windows
+		{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}.Release|Windows.Build.0 = Release|Windows
+	EndGlobalSection
+	GlobalSection(MonoDevelopProperties) = preSolution
+		StartupItem = ParticlesFall\ParticlesFall.nmeproj
+	EndGlobalSection
+EndGlobal

ParticlesFall/ParticlesFall.userprefs

@@ -0,0 +1,13 @@
+<Properties>
+  <MonoDevelop.Ide.Workspace ActiveConfiguration="Release|HTML5" />
+  <MonoDevelop.Ide.Workbench ActiveDocument="ParticlesFall/Source/ParticlesFallDisplayList.hx">
+    <Files>
+      <File FileName="ParticlesFall/ParticlesFall.nmml" Line="10" Column="21" />
+      <File FileName="ParticlesFall/Source/ParticlesFallDisplayList.hx" Line="1" Column="1" />
+    </Files>
+  </MonoDevelop.Ide.Workbench>
+  <MonoDevelop.Ide.DebuggingService.Breakpoints>
+    <BreakpointStore />
+  </MonoDevelop.Ide.DebuggingService.Breakpoints>
+  <MonoDevelop.Ide.DebuggingService.PinnedWatches />
+</Properties>

ParticlesFall/ParticlesFall/ParticlesFall.build

@@ -0,0 +1 @@
+1

ParticlesFall/ParticlesFall/ParticlesFall.nmeproj

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project DefaultTargets="Build" ToolsVersion="3.5" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
+    <Platform Condition=" '$(Platform)' == '' ">Android</Platform>
+    <ProductVersion>9.0.21022</ProductVersion>
+    <SchemaVersion>2.0</SchemaVersion>
+    <ProjectGuid>{71819F16-0B27-4EFA-BFAE-D59EF8AFD4E0}</ProjectGuid>
+    <TargetNMMLFile>ParticlesFall.nmml</TargetNMMLFile>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|Android' ">
+    <DebugSymbols>true</DebugSymbols>
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|BlackBerry' ">
+    <DebugSymbols>true</DebugSymbols>
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|Flash' ">
+    <DebugSymbols>true</DebugSymbols>
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|HTML5' ">
+    <DebugSymbols>true</DebugSymbols>
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|iOS' ">
+    <DebugSymbols>true</DebugSymbols>
+    <OutputPath>.</OutputPath>
+    <AdditionalArguments>-simulator</AdditionalArguments>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|Linux' ">
+    <DebugSymbols>true</DebugSymbols>
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|Mac' ">
+    <DebugSymbols>true</DebugSymbols>
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|webOS' ">
+    <DebugSymbols>true</DebugSymbols>
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|Windows' ">
+    <DebugSymbols>true</DebugSymbols>
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|Android' ">
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|BlackBerry' ">
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|Flash' ">
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|HTML5' ">
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|iOS' ">
+    <OutputPath>.</OutputPath>
+    <AdditionalArguments>-simulator</AdditionalArguments>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|Linux' ">
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|Mac' ">
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|webOS' ">
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|Windows' ">
+    <OutputPath>.</OutputPath>
+  </PropertyGroup>
+  <ItemGroup>
+    <Folder Include="Source\" />
+    <Folder Include="Assets\" />
+  </ItemGroup>
+  <ItemGroup>
+    <Compile Include="Source\Particle.hx" />
+    <Compile Include="Source\ParticlesFallBitmap.hx" />
+    <Compile Include="Source\ParticlesFallDisplayList.hx" />
+    <Compile Include="Source\ParticlesFallGraphics.hx" />
+    <Compile Include="ParticlesFall.nmml" />
+    <Compile Include="Assets\nme.svg" />
+  </ItemGroup>
+</Project>

ParticlesFall/ParticlesFall/ParticlesFall.nmml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<project>
+
+	<meta title="ParticlesFall" package="com.testing.myapplication" version="1.0.0" company="" />
+	<app main="ParticlesFallDisplayList" file="ParticlesFallDisplayList" path="Export" />-->
+	<!--<app main="ParticlesFallGraphics" file="ParticlesFallGraphics" path="Export" />-->
+	<!--<app main="ParticlesFallBitmap" file="ParticlesFallBitmap" path="Export" />-->
+
+	<window width="512" height="512" unless="mobile" />
+	<window fps="60" />
+
+	<source path="Source" />
+
+	<haxelib name="nme" />
+
+	<assets path="Assets" rename="assets" include="*" exclude="nme.svg" />
+
+	<icon path="Assets/nme.svg" />
+
+	<ndll name="std" />
+	<ndll name="regexp" />
+	<ndll name="zlib" />
+	<ndll name="nme" haxelib="nme" />
+
+</project>

ParticlesFall/ParticlesFall/Source/Particle.hx

@@ -0,0 +1,33 @@
+package ;
+
+import nme.display.Shape;
+import nme.display.Graphics;
+
+class Particle extends Shape {
+
+	public var color:Int;
+	public var radius:Float;
+	public var speed:Float;
+
+	public function new () {
+		super();
+		color = 0;
+		radius = 1.0;
+		speed = 1.0;
+	}
+
+	// draws the particle on the given target Graphics
+	// or on the own graphics
+	public function draw(?target:Graphics):Void
+	{
+
+		if(target==null || target==graphics){
+			target = graphics;
+			target.clear();
+		}
+
+		target.beginFill(color);
+		target.drawCircle(x,y,radius);
+		target.endFill();
+	}
+}

ParticlesFall/ParticlesFall/Source/ParticlesFallBitmap.hx

@@ -0,0 +1,135 @@
+package;
+
+import nme.display.Sprite;
+import nme.display.Bitmap;
+import nme.display.BitmapData;
+import nme.geom.Matrix;
+import nme.events.Event;
+import nme.Lib;
+
+class ParticlesFallBitmap extends Sprite {
+
+
+	// main function
+	public static function main () {		
+		Lib.current.addChild (new ParticlesFallBitmap ());
+	}
+
+
+	// CONSTANTS:
+	// stage width
+	inline private static var STAGE_W:Int 				= 512;
+	// stage height
+	inline private static var STAGE_H:Int 				= 512;
+	// amount of particles to display
+	inline private static var NUM_PARTICLES:Int			= 500;
+	// max radius of a particle
+	inline private static var PARTICLE_MAX_RADIUS:Int 	= 10;
+
+	// array containing all particles instances
+	private var particles:Array<Particle>;
+
+	// the actual bitmap canvas and its container display object
+	private var canvas:BitmapData;
+	private var canvasContainer:Bitmap;
+
+	inline private static var CANVAS_CLEAR_COLOR:Int 	= 0xFFFFFF;
+
+	public function new () {
+
+		super ();
+		init();
+	}
+
+	// initialization function:
+	// - initializes particles array
+	// - generates particles and populates array
+	// - registers an enterframe handler for looping
+	private function init():Void
+	{
+
+		// initializing array
+		particles = new Array<Particle>();
+		// generating particles
+		generateParticles();
+		// initializing canvas
+		canvas = new BitmapData(STAGE_W,STAGE_H,false,CANVAS_CLEAR_COLOR);
+		// and adding it to the display list
+		canvasContainer = new Bitmap(canvas);
+		addChild(canvasContainer);
+		// then add loop handler
+		addEventListener(Event.ENTER_FRAME,onEnterFrame);
+
+	}
+
+	// generates NUM_PARTICLES particles with a random
+	// radius color and speed
+	private function generateParticles():Void
+	{
+		var particle:Particle;
+		while(particles.length < NUM_PARTICLES){
+			// creating a particle
+			particle = new Particle();
+			// setting a random radius within the max value
+			particle.radius = Math.random()*PARTICLE_MAX_RADIUS;
+			// getting color components from radius (bigger is brighter)
+			var r:Int = cast(particle.radius/PARTICLE_MAX_RADIUS*0xFF);
+			var b:Int = cast(particle.radius/PARTICLE_MAX_RADIUS*0xFF);
+			var g:Int = cast(particle.radius/PARTICLE_MAX_RADIUS*0xFF);
+			// and combining them to one color
+			particle.color = g << 8 | b ;
+			// then setting the speed (bigger is "heavier")
+			particle.speed = particle.radius;
+			// letting the particle draw on its own context at 0,0
+			particle.draw();
+			// putting it randomly on the x axis within the width
+			particle.x = Math.random()*STAGE_W;
+			// but keeping that on top
+			particle.y = 0.0;
+			// storing a reference on the array
+			particles.push(
+				particle
+			);
+		}
+
+		// then sorting on radius (bigger is nearer)
+		particles.sort(
+			function(p1:Particle,p2:Particle):Int {
+				if(p1.radius==p2.radius)
+					return 0;
+				return p1.radius>p2.radius?1:-1;
+			}
+		);
+
+	}
+
+
+	// loop handler
+	private function onEnterFrame(event:Event=null):Void
+	{
+		// clearing the main canvas
+		canvas.fillRect(canvas.rect,CANVAS_CLEAR_COLOR);
+		// creating a drawing matrix
+		var matrix:Matrix = new Matrix();
+		// iterating all particles
+		var particle:Particle;
+		for(i in 0...NUM_PARTICLES){
+			// retrieving the particle
+			particle = particles[i];
+			// moving the particle according to its speed
+			particle.y += particle.speed;
+			// and moving that to the top whenever it exits the boundaries
+			if(particle.y>STAGE_H){
+				particle.y = 0;
+				particle.x = Math.floor(Math.random()*STAGE_W);
+			}
+			// setting translation coordinates in drawing matrix
+			matrix.tx = particle.x;
+			matrix.ty = particle.y;
+			// copying the rendered the particle into the main canvas
+			// no redraw happens, just raw copy!
+			canvas.draw(particle,matrix);
+		}
+	}
+
+}