Cross Compiling your ActionScript Starling Games to WebGL and JavaScript

Posted on September 12, 2013 | 25 comments

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 who 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 APIs 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, whereas the “common” folder contains the four subfolders: 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 the 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 file 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

Share the post "Cross Compiling your ActionScript Starling Games to WebGL and JavaScript"

  • Peter

    It’s awesome ! Thanks Renaun~!

  • YopSolo

    Exactly what i am looking for ! i’ll try it on my next project :D
    thx a lot !

  • http://troygilbert.com/ Troy Gilbert

    Very cool… but it does crash repeatedly in Chrome OS X (Version 29.0.1547.65). After collecting food for about 5 seconds.

  • Susrut Mishra

    I have been waiting for StarlingJS release. This looks awesome. Thanks Renaun.

  • catfly

    cool?thanks!

  • dzq

    Awesome ! Thanks Renaun!

  • Phil Harvey

    Looks interesting, but the demo will not run for me in Chrome. Checking it out anyway.

  • Phil Harvey

    Have you tried Away3d to webGL?

    • renaun

      Not yet, but it should be doable. It would require some changes in the Away3D classes for AGAL to GLSL, in Starling this is fairly finite so it was easy to handle those changes.

  • jeffibacache

    What a contribute! your are the man renaun :)

  • rkn14

    Really cool ! Nice job !
    Works fine in Chrome on my desktop. Doesn’t work on iPad (safari) and my galaxy s2 (chrome). Strange ?

    • renaun

      Thanks for trying it out. WebGL doesn’t work on mobile browsers yet, except for some on android (not the stock one)

  • renaun

    It works wherever WebGL works, welcome to HTML5 standards :)

  • Viktor

    Safari 7.0 goes well!

  • Shaun Michael Stone

    Very impressive stuff.

  • Bill Brown

    Fantastic concept. Adobe needs to throw some weight behind the project to support the entire ActionScript API.

  • Timonxue

    awesome! ??!

  • Jean-Baptiste Dubois

    Great Work!! Thanks a lot ! Is there a way to build with an ‘ant’ task ?

    • renaun

      Sure check out the sample build.xml in KontikiJS

      Sent from a device

  • Ramez

    Thanks Renaum,

    I know it’s an Adobe-mandated direction to have a path to HTML5, but am not sure of the worth, since it only works on PC / Mac. If so, I would stick with Flash (the whole premise of HTML5 is that it works cross-platform). On mobile, I would use the appropriate platform (notably AIR). Using Javascript / WebGL for the fun of it … maybe! If I have plenty of free time to work with an archaic language like Javascript (which BTW crashes my browser). Otherwise, what is the commercial value?

    • renaun

      Agree it’s more of a fun project that I did on my own to see if it was possible. If anything it’s meant to allow choice.
      Sent from a device

  • jjjefff

    Renaun, this is really pretty cool, and with webgl support growing seems really interesting for porting starling games/apps to html5 (though the above demo still doesn’t work on iPad for some reason).

    I notice that the randori framework website is now gone, but the github repos are all still in place. Is this tech still workable?

    • renaun

      It is still workable, but i don’t think its actively worked on so you would be having to work on both the compiler and the ported framework.

      • jjjefff

        So I was able to compile your example from the zip file. I did have to update the output .js files to properly locate the /media directory on my web server.

        I tried a few experiments of my own and ran into some AS3 APIs not yet implemented (as you noted in the KontikiJS readme), including Graphics.draw* and ByteArray.read/write (amf serialization stuff.)

        So I don’t think it’ll work for my project, but I’m really impressed with how much is supported, and others will surely still find it useful.

        Thanks again!

  • Gaurang Patel

    Great work….I try compile action-script to JavaScript by downloading hungryhero zip, but it didn’t work for me ..However it is not showing any error, but when i am trying to run index.html file, it didn’t show anything..