Flambe is awesome.


Flambe is a HTML5 and Flash game engine that's designed with a Entity Component System rather than the rather common inheritance pattern.

For those with a Unity3D background, you might know that exporting for web platforms without dependencies on Unity.. is far less than appealing. Although Unity 5 is introducing WebGL powered builds (totally preordered!), its still a fair way away and Flash exports have been discontinued.

So with that, I introduce to you Flambe.
Written in Haxe; Flambe is a 2D game engine capable enough to set up a workflow critical to game development, deploy to Mobile and Desktop, update assets and code in realtime, and offers an understandable API to add GPU accelerated animations via Flump or quickly recieve inputs from an accelerometer.

To get started, you'll need Node with NPM if you haven't installed it already, then simply run:
npm install -g flambe
flambe update

After you've installed Flambe, you'll need to scaffold a project, which you can find out about more here. Then you'll be able to configure Flambe very easily as the configuration files are easily readable and very short and consise thanks to YAML.

    name: Your Game 
    version: 1.0.0 
    id: com.urdomain.urgame
    default_platform: html

The default platform is what we'll be using when running flambe build without any further parameters. You can find more information on the topic here.

The platform html is backed by WebGL where available, with a 2D canvas as fallback. Whereas flash is backed by Adobe's Stage3D (which is GPU accelerated) for both mobile and desktop.

Backed by Adobe Air for mobile, when faced with 500 Animating Sprites, Air comes out on top in comparison to Unity.
Benchmark Where as on the other extreme with 100 Animating Sprites with random tweened movement with 2500 Dummy Flops per frame, Unity is a clear winner.
Benchmark 2

You can read more on the subject here.

Debugging with Flambe is also comparable to Unity's Pro profiler when using Adobe Scout and Google Chrome. Scout is a great free profiler for Flash builds can breakdown CPU usage, GPU utilisation and memory usage. Chrome's Devtool's allow you to see into your HTML5 build with breakpoints, stepping and full recognition of the source. Not once will you need to try decifer the code generated by Haxe.

Using Chromes Profiling tools, you can generate a Flame Chart which contains an accurate breakdown of your functions and loops, even supporting references to the original source. This means when you see Flambe events happen as it happens. Its also a great way to visually explore the functions hierarchy, execution time, and trouble spots hidden in your code. All of this comes pre-installed with Chrome.

Benchmark

To get started with Flambe, you'll need to setup your main loop.
To do this, you'll need to call the system initialisation and change to the scene of your choice... And well, thats it!

class Main  
{
    private static function main ()
    {
        // Wind up all platform-specific stuff
        System.init();
        // Initialise your Main Game Manager Class
        var gameHandler = new Game();
        //Change to Preloader Scene
        Game.unwindToScene(new PreloaderScene().getScene());
    }

}

In our Preloader Scene, we can call Flambe to retrieve assets and initailise variables for us to use in the future.

class PreloaderScene extends Scene  
{
    private static function new ()
    {
        /* ..Code */

        // bootstrap loader
        // "Manifest.fromAssets" recieves the directory from the Assets folder onwards. 
           //"Manifest.fromAssets("Images/Player1");" would return an absolute directory of [Game]/Assets/Images/Player1.
        var manifestBootstrap = Manifest.fromAssets("bootstrap");

        // Tells Flambe to Load all the assets in the selected folder
        loaderBootstrap = System.loadAssetPack(manifestBootstrap);

        // What function to call when complete
        loaderBootstrap.get(onFinishLoadBootstrap);

           // What function to call when progress increments
        loaderBootstrap.progressChanged.connect(onProgress);

        /* More Code.. */
    }    
}

Once you've loaded your assets, you can start adding players to your game.

private static function onFinishLoadBootstrap (pack : AssetPack){

    // Create a solid color background to the stage width and height
    var background = new FillSprite(0x202020, System.stage.width, System.stage.height);

    // Add the background to the game scene
    System.root.addChild(new Entity().add(background));

    // Load ball image from the assets previously loaded and bind it to myBall instance
    myBall = new ImageSprite(pack.getTexture("ball"));
    myPlayer = new ImageSprite(pack.getTexture("player"));

    // place ball's origin on its center
    myBall.centerAnchor();
    myPlayer.centerAnchor();

    // Chain adding the ball and player to stage
    System.root.addChild(new Entity().add(myBall).add(myPlayer));

    // placing the ball in the middle of the stage
    myBall.x._ = System.stage.width/2;
    myBall.y._ = System.stage.height/2;

    myPlayer.x._ = myBall.x._ - 120;
    myBall.y._ = myBall.y._ - 100;

    // waiting for the user to press the mouse down or tap down the device, then call handlePointerDown function
    System.pointer.down.connect(handlePointerDown);   
} 

private static function handlePointerDown(event:PointerEvent){  
    // move the ball toward mouse/finger position with an animation which lasts one second
    myPlayer.x.animateTo(event.viewX, 1);
    myPlayer.y.animateTo(event.viewY, 1);
} 

Once you’re done with coding, in the command prompt type

flambe build flash --debug

or

flambe build html --debug

to build a Flash or HTML5 version of the project, then

flambe serve

which will start a webserver and create a viewable page of your project at http://localhost:7000. Removing the --debug parameter will export the project for distribution, generating a smaller and faster build which also removes the ability to easily debug.

Since Flambe uses Haxe's compiler, you get access to all the great libs and enhancements supported by the language and are in no way obligated to use just Flambe's libs. Haxe also supports build conditions, which let you run code for parameters set in your build script.

The beautiful thing about Flambe is that it just works. I've had to make no further allowances iOS or Android to get it running at a solid 60fps. Although initially it can be a small pain to get into this workflow with Flambe. For instance, Flambe uses Flump for handling animations, which means if you have pre-made animations, you'll need to import them into Flash, and then export again to Flump. Although if your workflow already included Flash, then it should be painless.

If you're interested to know more about this awesome 2D game engine (I know Disney and Nickelodeon are)!, you should check out a Wiki written by Mark Knol https://github.com/markknol/flambe-guide/wiki or if you have any feedback, tweet me on twitter!