Flambe

by Bruno Garcia / @b_garcia / @aduros

Quick Bio

  • Game developer, ex-Three Rings (SEGA), ex-Zynga.
  • Haxe compiler team member dedicated to JS target. Work on js.html.* externs, source mapping, optimizations, etc.
  • Still can't figure out OCaml.
  • Co-authored a book on HTML5 game development.
  • Started haxememes.tumblr.com.
  • Also wrote Flambe.

What's Flambe?

  • A game engine written in Haxe.
  • Strong focus on HTML5, tools integration, and rapid development.
  • WebGL renderer with Canvas fallback. Flash support too, rendered with Stage3D.
  • Started off as a hobby project in 2011.
  • Now used in 200+ commercial games!
  • Let's look at a typical example game.

Ground Zero: Children's Media

  • Push for HTML5 games at Nickelodeon started in 2012.
  • Evaluated 10+ game engines.
  • Today, all new games built with Flambe.
  • Developers trained in Flambe continue using it in other projects, going viral across industry.

Flambe + Haxe Powered

Top 4 Media Companies Worldwide

  1. Comcast
  2. Disney
  3. Time Warner
  4. Viacom

Flambe + Haxe Powered

Top 3 Toy Companies Worldwide

  1. Hasbro
  2. Mattel
  3. Bandai

Flambe + Haxe Powered

Yet More Name Dropping

  • Coca Cola
  • Toyota
  • Spil Games
  • Mozilla

Why Are They Choosing Haxe + Flambe?

  1. Good HTML5 support.
  2. Flump.
  3. High performance.
  4. Native extensions.
  5. Developer UX.

1. Good HTML5 Support

Flambe API was designed with capabilities of HTML5 in mind.

  • Avoids performance and compatibility traps (drawText).
  • Modular asset loading.
  • Graceful enhancement (HTML5 canvas to WebGL, HTML5 audio to Web Audio). Feature set remains the same.
  • Can still deploy to Flash. Kids are slow to upgrade their browser (dependent on parents).

2. Flump

Imports animations from Flash. (website)

  • Converts Flash vector animation to cutout animation.
  • High performance on all platforms.
  • Not as feature rich as vector, but almost all animations can be converted.
  • Leverage huge time investment artists have already put into learning Flash.

3. High Performance

What makes Flambe fast?

  • Lots of time spent optimizing rendering and asset loading.
  • Avoids allocation.
  • Dead code elimination by default. Avoids reflection.
  • Designed around HTML5 performance limitations.

4. Native Extensions

  • For many companies, integrating with several native extensions is a hard requirement.
  • Flurry, Google Analytics, Game Center, AdMob, social, etc.
  • Since Flambe supports AIR, can use ANEs that already exist... mostly.

5. Developer UX

  • Focus on rapid development.
  • Code is decently documented. All new APIs must have documentation.
  • Improved dox template, open sourcing soon.
  • Install process is (somewhat) easy.
  • Automated Selenium tests improve stability.
  • Lots of tutorials out there at this point: Mark Knol's guide, Mozilla blog post, other new blog posts.
  • flambe.System class is an intuitive entry point to most Flambe functionality.
  • API will give you warm fuzzy feelings! (Yeah, I'm a little biased)

Code Time: Event vs Value

// AS3
[Event(name="fullscreenChanged", type="FullscreenEvent")]
class Stage extends EventDispatcher
{
  public var fullscreen :Boolean;
}

class FullscreenEvent extends Event
{
  public static final var FULLSCREEN_CHANGED :String = "fullscreenChanged";

  public var fullscreen :Boolean;

  public function FullscreenEvent (type :String, fullscreen :Boolean) {
    super(type);
    this.fullscreen = fullscreen;
  }
}
// Haxe + Flambe
class Stage
{
  public var fullscreen :Value<Bool>;
}

Code Time: Adding a Listener

// AS3
trace("Fullscreen is currently " + stage.fullscreen);

// Add a listener
stage.addEventListener(FullscreenEvent.FULLSCREEN_CHANGED,
  function (event :FullscreenEvent) :void {
    // ...do something with event.fullscreen
  });

// Update and notify listeners
stage.fullscreen = true;
stage.dispatchEvent(new FullscreenEvent(FullscreenEvent.FULLSCREEN_CHANGED, true));
// Haxe + Flambe
trace("Fullscreen is currently " + stage.fullscreen.get());

// Add a listener
stage.fullscreen.connect(function (fullscreen) {
  // ...do something with fullscreen
});

// Update and notify listeners
stage.fullscreen.set(true);

Code Time: Everything is Animatable

class AnimatedFloat extends Value<Float>
{
  public function animate (from :Float, to :Float, duration :Float)
  {
    // ...
  }
}
// Move a sprite from x=0 to x=100 over 5 seconds
sprite.x.animate(0, 100, 5);

// Fade a sound from volume=1 to volume=0 over 3 seconds
sound.volume.animate(1, 0, 3);

Future Plans

  • Features users have been asking for: tilemap loading, polygon rendering, video playback.
  • Further simplify installation process.
  • Dedicated (minimal) Flambe IDE.
  • New native app backend built on Lime or CocoonJS?

THE END

presentation.dispose();

by Bruno Garcia / @b_garcia / @aduros