GLantern

GLantern is a library intended for a Flash-HTML5 shim layer. Enjoy the live preview from http://hozuki.github.io/GLantern.

Screenshots of test cases can be found here.

Acquiring the Source

Native git is highly recommended against other clients:

$ git clone https://github.com/Hozuki/GLantern.git /preferred/cloning/destination

Or, as a NPM package, you can install it via npm:

$ npm install glantern --save

Building from the Source

Make sure you have Node.js and NPM installed. The rest is quite simple:

$ cd /path/to/GLantern/
$ npm install
$ gulp build

After building, you will find:

• a build/node directory for NW.js and Electron;
• a build/GLantern-browser.js file as the full, concatenated JavaScript file for browsers;
• a build/GLantern-browser.min.js (and corresponding source mapping) for browsers, as the minimized file for a better loading speed.

Using the Library

See the demo page at test/visual/index.html. You will need an environment with WebGL, like modern browsers, NW.js, or Electron.

Importing into Your Project

GLantern supports two styles of importing.

The first one is importing by <script> tag. Use its src attribute and point it to the compiled result:

<script type="text/javascript" src="GLantern-browser.min.js"></script>

In environments that support Node.js, like NW.js or Electron, you can also use the require syntax:

<script type="text/javascript">
    var GLantern = require("glantern");
</script>

After importing with either the former or the latter style, the GLantern object is globally available.

Using Exported Members

The package structure of Flash is preserved in GLantern, so adding a GLantern. prefix usually works. If you want to make it more like ActionScript, GLantern provides a injectToGlobal() function to inject the "packages" to the global scope.

// Check if GLantern is supported
if (GLantern.isSupported()) {
    var lantern = new GLantern.EngineBase();
    lantern.initialize(682, 438);
    document.body.appendChild(lantern.view);
    window.addEventListener("unload", function () {
        lantern.dispose();
    });
    draw(true, this);
} else {
    var prompt = document.createElement("span");
    prompt.textContent = "Oops, GLantern is not supported on your browser.";
    document.body.appendChild(prompt);
}

/**
* Draws a rectangle.
* @param asGlobal {Boolean} Whether to inject Flash packages to global scope or not.
* @param g {*} The global object, usually {@link window}.
*/
function draw(asGLobal, g) {
    if (asGLobal) {
        GLantern.injectToGlobal(g);
    }
    var flash = g.flash ? g.flash : GLantern.flash;
    var Display = Object.create({
        "createShape": function (alpha) {
            var s = new flash.display.Shape(lantern.stage, lantern.stage);
            lantern.stage.addChild(s);
            s.alpha = alpha;
            return s;
        }
    });
    var shape1 = Display.createShape(1);
    shape1.graphics.beginFill(0xffffff);
    shape1.graphics.drawRect(0, 0, 540, 383);
    shape1.graphics.endFill();
}

Q&A

See QA.md.

License

The MIT License

You will also find a copy in LICENSE.md.

Other Resources

• Adobe Flash CC is able to export Flash project as WebGL projects. The tutorial and restrictions can be found here. However, it has recently be announced that Flash is replaced by Animate. So fellas, you may want to give a warm welcome to that new solution.
• Mozilla has started a project, Shumway, which is intended to provide Flash-like support by using HTML 5 features on Firefox.

Credits

Part of GLantern uses modifications based on webgl-utils.js. Its license file can be found here.

Part of GLantern uses modifications based on AwayJS.Core.geom. Its license file can be found here.