Replacing an OpenFL Backend

When I was designing OpenFL, one of the goals was to build an architecture that would allow for easy development on one of the backends. Currently, we have two backends: “openfl-native” and “openfl-html5″

If you install OpenFL, you will probably notice that these are completely different Haxe libraries. This makes it possible to make changes to the native backend without rebuilding command-line tools, or to make HTML5 improvements without rebuilding native binaries.

The README for each project on GitHub includes instructions for using a development version. For example, to use a development version of openfl-html5:

git clone https://github.com/openfl/openfl-html5
haxelib dev openfl-html5 openfl-html5

This can also let you replace a backend entirely. Continue reading Replacing an OpenFL Backend

Deploying C++ to JavaScript using Emscripten

If you paid attention during the post-GDC news, you probably heard that Epic Games and Mozilla teamed up to get the Unreal Engine running in the browser, without plugins, in a matter of four days. The secret? Emscripten.

Alon Zakai has worked three years on Emscripten, and its an amazing piece of software.

Literally, you take C++ (or technically, something that compiles to LLVM), and out comes JavaScript. Not only can you do basic code, you can take large, complex projects with myriad dependencies, and actually run it in the browser.

Let’s take one of my previous samples, and port it to the browser. Ready? Continue reading Deploying C++ to JavaScript using Emscripten

HTML5 Benchmark Scores: NME RunnerMark

If you are on Twitter, you may have seen links to RunnerMark, a benchmark that tests rendering performance of Adobe AIR and NME.

We have been improving the performance in the (beta) HTML5 target for NME, so I am happy to share some of the results. These improvements will be released with the next version of NME. Continue reading HTML5 Benchmark Scores: NME RunnerMark

Benchmarking HTML5 using PirateMark

Nowadays, it is not possible to reach the majority of users on the internet using Flash Player. Mobile devices that support Flash Player are dwindling, support for a standard Linux plugin has stopped and Windows 8 is going to only provide Flash Player support for a whitelisted subset of the internet.

NME and Flambe are both Haxe-based frameworks that can support both HTML5 and Flash Player, so you can provide the best experience to users, everywhere. Today, Flambe is also getting support for using NME as a backend, so that it will be possible to use either framework to also target Windows, Mac, Linux, iOS, BlackBerry, Android and webOS natively. Continue reading Benchmarking HTML5 using PirateMark

NME 3: Flash, C++ and now HTML5

From the beginning, Haxe was created to be a “multi-platform programming language.”

NME relies on Haxe for reliable compilation to Flash and C++, but these aren’t the only languages Haxe supports. Meanwhile, a project (you may have heard of) called Jeash used Haxe to mirror the Flash API… but for Javascript.

For everyone who is excited by HTML5, you can now publish to Flash, C++ and Canvas as easy as…

haxelib run nme test MyProject.nmml flash
haxelib run nme test MyProject.nmml ios -simulator
haxelib run nme test MyProject.nmml webos
haxelib run nme test MyProject.nmml android
haxelib run nme test MyProject.nmml cpp
haxelib run nme test MyProject.nmml cpp -64
haxelib run nme test MyProject.nmml html5

Here is my previous “Actuate Example,” running in Flash and in Canvas as a comparison:

http://www.joshuagranick.com/examples/actuate/circles/flash/
http://www.joshuagranick.com/examples/actuate/circles/canvas/

Playing with haXe JS

Ever since I had the wonderful opportunity to meet Philippe Elsass and his family while I was visiting France, I have been eager to experiment with haXe and Javascript.

There are many things to like about Javascript, but I wish sometimes that I could use it more like compiled languages I am used to — strong data types, formal class structures, compile-time error checking, or quality code completion. A couple posts ago I created an application that runs in Flash and C++. This is a compelling use-case for some applications, but many applications do not need to work cross-platform. What does haXe look like for pure Javascript development?

I was surprised when I started to write Javascript using haXe. I had forgotten that I installed a gedit plugin for haXe code completion, so the first moment that I typed “Lib.document”, I saw a list of child properties instantly, like anchors, appendChild, blur, body, and so on. This is really cool. You begin to forget how great code completion can feel when you work without it. Continue reading Playing with haXe JS

HelloWorld.html as a webOS Application

Yesterday I had the privilege of meeting a lot of developers at the webOS CONNECT event in Paris, and though many were familiar with webOS, a few were new to the platform and wanted to know how difficult it was to create a new application.

How easy can we make it?

HelloWorld.html

<!doctype html>
<html>
<head>
	<title>Hello World</title>
</head>
<body>
	<div>Hello World!</div>
	<script type="text/javascript">
		if (window.PalmSystem) {
			PalmSystem.stageReady ();
		}
	</script>
</body>
</html>

Continue reading HelloWorld.html as a webOS Application

Rendering 3D Flash Content on an HTML5 Canvas

This week, I have had a project which uses Javascript extensively in order to create a web application interface. An important component to the application is a 3D render, which represents a product you are building through this application.

Now that version 1.0 of the specification has been released, WebGL may be the best technology for achieving this type of integration in the future. In the meantime, I will be using Flash to perform my rendering, since I do not know of a suitable Javascript engine which supports the Collada model format, reliable depth sorting and quality UV mapping.

Similar to most media applications, Flash Player uses an “overlay” layer which the operating system displays over the top of your web browser. This works well for performance, but always displays Flash in front of other content in your page. Flash has support for “window modes” that will display inside of the browser, but these run a lot slower. In the case of my web application, running Flash caused all of my Javascript animations to appear choppy and unprofessional. Since I do not need to render my 3D scene in real-time, I can push my renders to an HTML5 Canvas so that the application remains smooth and responsive. Continue reading Rendering 3D Flash Content on an HTML5 Canvas