Cookbook

This article details how to perform some common tasks in Flambe.

Lots more recipes can be found over in Mark's guide.

Beginner

Customizing the embed page and size

Edit your web/index.html and rebuild to customize the embed page.

The size of the game stage is controlled with CSS. To always make the game a certain size, change the #content CSS sizing in the default embed page (and remove the media query that goes fullscreen on small screens).

Displaying a preloader

System.loadAssetPack returns a Promise. Its progressChanged signal can be listened on to show a progress bar:

    var loader = System.loadAssetPack(Manifest.build("bootstrap"));
    loader.progressChanged.connect(function () {
        trace("Download progress: " + (loader.progress/loader.total));
    });
    loader.get(function (pack) {
        // Download complete, use the pack to start the game
    });

Take a look at Space Date's preloader for an example of a simple progress bar. Many games will want to show images and sound in their preloader. In this case, create two asset packs, "bootstrap" and "main". "bootstrap" is loaded first and contains only the assets required to display the preloader, while "main" contains all the rest of the game's assets.

Loading remote assets

A Manifest object lists assets and where they can be found. Typically Manifest.build() is used to create a Manifest from files in the project's assets directory, but they can also be dynamically constructed, to load assets from other sources over the web.

    var manifest = new Manifest();

    // The asset's type is inferred from the URL's file extension
    manifest.add("logo", "https://raw.github.com/aduros/flambe/master/tools/embedder/logo.png");

    // Sometimes the URL doesn't have a file extension, so the type must be specified
    // Also note that the name can be any unique text, it's only used to lookup the asset by name
    manifest.add("facebookPhoto", "https://graph.facebook.com/bruno.e.garcia/picture", JPG);

    System.loadAssetPack(manifest).get(function (pack) {
        var logo = pack.getTexture("logo");
        var facebookPhoto = pack.getTexture("facebookPhoto");
    });

Playing sound

Place a mysound.mp3 and mysound.ogg in one of your asset pack directories. Flambe will try to load the MP3 if the environment supports it, otherwise (such as in Firefox) the OGG will be loaded. Once you have the asset pack, this will play the sound:

    var playback = pack.getSound("mysound").play(); // or loop()

Note the lack of file extension. The Playback object that is returned can be used to control volume and timing. Calling dispose() on it will stop the sound prematurely.

Animation and timing

Many properties in Flambe are AnimatedFloats. Using animateTo() on an AnimatedFloat value makes it dead simple to say, spin a sprite or fade out a sound. But what if you want to do something more complicated, like chain animations together, loop them, or run code at certain times?

The classes in flambe.script provide a way to compose complex animations. The Script component can be added to an entity to give it some scripted behavior.

    var script = new Script();

    // First spin a sprite, and then fade out a sound
    script.run(new Sequence([
        new AnimateTo(someSprite.rotation, 360, 1),
        new AnimateTo(somePlayback.volume, 0, 1),
    ]));

    // Call a function every two seconds
    script.run(new Repeat(new Sequence([
        new CallFunction(function () {
            trace("Tick");
        }),
        new Delay(2),
    ])));

    entity.add(script);