Want to see it in action? Check out the demo here:
Your Code +
Starling Source +
KontikiJS (WebGL/HTML5 implementation of Flash API) +
Randori Guice Framework
Feed to Compiler:
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
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.
- 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:
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