Cross Compiling your ActionScript Starling Games to WebGL and JavaScript

Want to see it in action? Check out the demo here:

http://renaun.com/html5/randoristarlingtest/hero.html

Summary

Soure Code:
Your Code +
Starling Source +
KontikiJS (WebGL/HTML5 implementation of Flash API) +
Randori Guice Framework

Feed to Compiler:

Randori Compiler

Output:

JavaScript version of your code.

Why have an ActionScript 3 to JavaScript Workflow

The short answer is to give ActionScript 3 developers that have built Starling games a path to JavaScript. Things change fast in the current landscape and there are many new platforms and languages that developers can choose to start a new project. At the least this provides a transition path for those developers building Starling based games.

This is not meant to be a general purpose solution for all AS3 code. In other words not all Flash API’s are implemented in KontikiJS. Having said that KontikiJS is an open source project and people can add any needed functionality.

Simple Tutorial: Compiling the Example

I have created a zip file that contains all the bits of code you need to try out compiling AS3 code into JavaScript. Download the following code:
http://renaun.com/html5/HungryHeroJSExample.zip.

The zip file contains two folders: HungryHeroJS and common. The source files of the HungryHero AS3 game are in HungryHeroJS. Where as the “common” folder contains the 4 folders: KontikiJS, randori-compiler-latest, randori-sdk, and Starling-Framework. All of these are open source github repos (list of repos at the end of the post) but I provided them here to have a known working set of code to start from.

Also note this is JavaScript so if things don’t work check the developer tools and make sure to also understand where WebGL and Web Audio is supported. I can’t help with browser limitations of WebGL and Web Audio.

Basic Steps

• Unzip HungryHeroJSExample.zip

• Open up Terminal (Mac) or Cmd Prompt (Windows) and navigate to the unzipped HungryHeroJS folder

• Run buildjs.sh (Mac) or buildjs.bat (Windows)

• Start a web server in this folder, or copy the index.html, media folder, and js-randori folder to a webroot. I use httpster (Node.js package) to start up a web server in this folder

You should see some output in the console that looks like this:

Randori Compiler v0.2.6.5_renaun
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/starling/filters/FragmentFilter.js
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/starling/filters/DisplacementMapFilter.js
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/flash/events/EventDispatcher.js
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/flash/display/DisplayObject.js
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/flash/display/InteractiveObject.js
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/flash/display/DisplayObjectContainer.js

Compiling Your Project

The easiest method for now to try out your own code is to reuse some of the files in HungryHeroJS folder. I would copy over the folder and rename it to your project. Remove the media folder and src folder. Then copy in your source files into a new “src” folder. Then change the index.html file to reference your main AS3 class file instead of “HungryHero”.

Things you will probably run into:

• You need all AS3 source files, no SWCs

• Embed statements need another piece of metadata [Factory], see the com.hsharma.hungryHero.AssetsHungeryHero.as for an example.

Github Repo Links

KontikiJS – https://github.com/renaun/KontikiJS
Randori Compiler (my fork) – https://github.com/renaun/randori-compiler My changes will hopefully make it back into the main branch at some point.
Randori SDK – https://github.com/RandoriAS/randori-sdk
Starling-Framework (my fork with minor changes) – https://github.com/renaun/Starling-Framework
HungryHero AS3 Sample Code – https://github.com/renaun/RandoriExamples/tree/master/HungryHeroJS

From http://renaun.com/blog/2013/09/cross-compiling-your-actionscript-starling-games-to-webgl-and-javascript/

You must Sign up as a member of Effecthub to view the content.