Flambe 是一款基于 Haxe 编程语言的高性能跨平台开源游戏引擎。游戏编译为 HTML5 或 Flash，并且可以针对桌面或移动浏览器进行优化。HTML5 渲染器使用 WebGL，但提供回退到 Canvas 标签，即使在低端手机上也能正常运行。Flash 渲染使用 Stage 3D，并且使用 Adobe AIR 打包原生 Android 和 iOS 应用。

Flambe 提供了许多其他功能，包括

• 简单的资源加载
• 场景管理
• 触摸支持
• 完整的物理库
• 加速度计访问

它已被用于创建许多可在 nick.com/games 和 m.nick.com/games 上找到的 Nickelodeon 游戏。要查看其他游戏示例以及其他一些使用该引擎的知名品牌，请查看 Flambe 展示。

在过去的几周里，Flambe 引擎的开发人员一直在努力添加对 Firefox OS 的支持。随着 Flambe 4.0.0 版本的发布，现在可以将 Flambe 游戏打包成可发布的 Firefox OS 应用程序，并附带清单文件。

Firefox 应用商店游戏

要了解在 Firefox OS 平台上使用 Flambe 引擎可以实现哪些功能，请查看最近提交到 Firefox 应用商店 的两个游戏。第一个游戏——由 Mark Knol 编写的 萤火虫游戏——以一只必须穿过一群饥饿鸟类的萤火虫为特色。该游戏对物理、声音和触摸的使用非常有效。

第二个游戏名为 Shoot’em Down，测试玩家在射击尽可能多的敌机时躲避炮火的技能。该游戏由 Flambe 引擎的主要开发者 Bruno Garcia 编写。该游戏的 源代码 作为引擎的演示应用程序之一提供。

使用 Flambe 构建 Firefox OS 应用

在开始使用 Flambe 引擎编写游戏之前，您需要安装和设置一些软件

1. Haxe。下载页面提供了适用于 OSX、Windows 和 Linux 的自动安装程序。
2. 用于构建项目的 Node.js。需要 0.8 或更高版本
3. Java 运行时。

满足这些先决条件后，您可以运行以下命令来安装 Flambe

# Linux and Mac may require sudo
npm install -g flambe
flambe update

这将安装 Flambe，您可以开始使用该引擎编写应用。

创建项目

要创建新项目，请运行以下命令。

flambe new

这将在您为 ProjectName 提供的任何位置创建一个目录。在此目录中，您将拥有多个文件和其他目录，用于配置和编写项目代码。默认情况下，新命令创建一个非常简单的项目，该项目说明了如何加载和动画化图像。

项目目录中的 YAML (flambe.yaml) 文件定义了项目的多个构建特性。此文件包含应用的开发人员、名称和版本的标签，以及其他项目元数据，例如描述。此外，它还包含将作为应用程序入口点触发的主类名。此标签需要设置为完全限定的 Haxe 类 名。即，如果您在 Haxe 源文件中使用包名，则需要在此标签中添加包名，如下所示：packagename.Classname。（默认示例使用 urgame.Main。）您还可以在 YAML 文件中设置应用的方向。

对于 Firefox OS 开发人员，YAML 文件的一部分包含可以修改的部分 manifest.webapp。构建项目时，此数据将合并到完整的 manifest.webapp 中。

主项目文件夹还包含一个用于资源（图像、声音、动画和粒子效果文件）的目录。icons 文件夹包含将与您的应用一起使用的图标。src 文件夹包含应用程序的 Haxe 源代码。

构建项目

Flambe 提供了一种构建方法，可以将您的代码编译到相应的输出。要构建应用，请运行

flambe build 

其中 output 为 html、flash、android、ios 或 firefox。或者，您可以将 –debug 选项添加到构建命令中，生成更适合调试的输出。对于 Firefox OS，这将生成未压缩的 JavaScript 文件。构建过程会将 build 目录添加到您的应用程序中。在 build 目录内，将创建一个包含 Firefox OS 应用的 firefox 目录。

调试项目

您可以在 Firefox 应用管理器中调试您的应用程序。有关使用应用管理器安装和调试的详细信息，请参阅 使用应用管理器。在应用管理器中，您可以使用“添加打包应用”按钮并选择 ProjectName/build/firefox 目录来添加构建的应用。Flambe 文档 中描述了其他平台的调试。

-debug 选项可以提供更多调试和性能调整的见解。除了能够单步执行生成的 JavaScript 之外，Flambe 还创建了一个源映射，允许您在调试时查看原始 Haxe 文件。

要在调试器中查看原始 Haxe 文件，请在调试器的最右角选择调试器选项图标，然后选择“显示原始源”。

此外，在使用 -debug 选项时，您可以使用快捷键 (Ctrl + O) 启动应用视图，该视图说明了过度绘制——这测量了在帧中绘制像素的次数。像素越亮，绘制次数越多。通过减少过度绘制量，您应该能够提高游戏的性能。

关于 Haxe 和 Flambe

Haxe 是一种面向对象、基于类的编程语言，可以编译成许多其他语言。在 Flambe 中，您的源代码需要使用 Haxe 特定语法 编写。熟悉 Java、C++ 或 JavaScript 的开发人员会发现学习这门语言相对简单。Haxe 网站包含一份 参考指南，其中很好地记录了该语言。对于 编辑，有许多选项可用于处理 Haxe。我正在使用带有 Haxe 插件的 Sublime。

Flambe 提供了一些在构建应用时需要使用的其他类。为了更好地理解这些类，让我们浏览一下运行 flambe new 命令时创建的简单应用。源目录中创建的 Main.hx 文件包含 Main 类的 Haxe 源代码。它看起来像这样

package urgame;

import flambe.Entity;
import flambe.System;
import flambe.asset.AssetPack;
import flambe.asset.Manifest;
import flambe.display.FillSprite;
import flambe.display.ImageSprite;

class Main
{
  private static function main ()
  {
    // Wind up all platform-specific stuff
    System.init();

    // Load up the compiled pack in the assets directory named "bootstrap"
    var manifest = Manifest.fromAssets("bootstrap");
    var loader = System.loadAssetPack(manifest);
    loader.get(onSuccess);
  }

  private static function onSuccess (pack :AssetPack)
  {
    // Add a solid color background
    var background = new FillSprite(0x202020, System.stage.width, System.stage.height);
    System.root.addChild(new Entity().add(background));

    // Add a plane that moves along the screen
    var plane = new ImageSprite(pack.getTexture("plane"));
    plane.x._ = 30;
    plane.y.animateTo(200, 6);
    System.root.addChild(new Entity().add(plane));
  }
}

Haxe 包和类

package 关键字提供了一种方法，可以让类和其他 Haxe 数据类型进行分组，并由其他代码段通过目录进行寻址。import 关键字用于在您正在处理的文件中包含类和其他 Haxe 类型。例如，import flambe.asset.Manifest 将导入 Manifest 类，而 import flambe.asset.* 将导入 asset 包中定义的所有类型。如果您尝试使用未导入到代码中的类并运行构建命令，则会收到一条错误消息，指出找不到该特定类。所有 Flambe 包都 记录 在 Flambe 网站上。

Flambe 子系统设置和入口点

main 函数类似于其他语言，充当应用的入口点。Flambe 应用程序必须有一个 main 函数，并且每个应用程序只有一个。在 main 函数中，调用 System.init() 函数来设置代码和 Flambe 引擎所需的所有子系统。

Flambe 资源管理

Flambe 使用动态资源管理系统，可以非常简单地加载图像、声音文件等。在此特定实例中，Manifest 类中定义的 fromAssets 函数检查 assets 目录中位于 bootstrap 文件夹中的所有可用文件，以创建清单。loadAssetPack 系统函数根据此清单创建 AssetPack 的实例。AssetPack 的一项功能是 get，它接受一个函数参数，在将资源包加载到内存中时调用该参数。在默认示例中，唯一的资源是名为 plane.png 的图像。

Flambe 实体和组件

Flambe 使用实体和组件的抽象概念来描述和操作游戏对象。实体本质上只是一个没有定义特征的游戏对象。组件是附加到实体的特征。例如，可以将图像组件附加到实体。实体也是分层的，可以嵌套。例如，可以创建实体 A 并附加图像。然后可以创建实体 B 并使用不同的图像。然后可以将实体 A 附加到系统根（顶层实体），然后可以将实体 B 附加到实体 A 或系统根。实体嵌套顺序用于渲染顺序，这可以用于确保较小的可见对象不会被其他游戏对象遮挡。

在示例应用中创建实体和组件

加载程序实例在 AssetPack 加载后调用默认样本中的 onSuccess 函数。该函数首先创建一个 FillSprite 组件的实例，该组件是由显示视口宽度和高度定义的矩形。此矩形使用第一个参数中定义的十六进制值进行着色。要使 FillSprite 实际显示在屏幕上，您首先必须创建一个 Entity 并将组件添加到其中。new Entity().add(background) 方法首先创建 Entity，然后添加 FillSprite 组件。整个视口层次结构从 System.root 开始，因此 addChild 命令将此新实体添加到根。请注意，这是添加的第一个实体，它将首先进行渲染。在此示例中，此实体表示深色背景。

接下来创建飞机图像。这是通过将加载的飞机图像传递给 ImageSprite 组件构造函数来完成的。请注意，正在使用 AssetPack 类的 getTexture 方法来检索加载的飞机图像。AssetPack 类还包含用于检索其他类型资源的方法。例如，要检索和播放声音，您可以使用 pack.getSound("bounce").play();。

Flambe 动画数据类型

Flambe 将许多默认的 Haxe 数据类型 包裹在类中，并引入了一些新的数据类型。其中之一是 AnimatedFloat 类。此类本质上包装了一个浮点数，并提供了一些实用程序函数，允许以特定方式更改浮点数。例如，AnimatedFloat 类的一个函数名为 animateTo，它接受参数以指定最终浮点值和动画发生的时间。Flambe 系统中的许多组件都使用 AnimatedFloat 作为属性值。在默认应用程序中加载的飞机是 ImageSprite 组件的实例。它的 x 和 y 位置值实际上是 AnimatedFloat。可以直接设置 AnimatedFloat 值，但必须使用特殊语法 (value._)。

在示例中，ImageSprite 的 x 值使用此语法设置为 30：plane.x._ = 30;。然后将 ImageSprite 的 y 值在 6 秒内动画化为 200。ImageSprite 的 x 和 y 值表示放置到视口中时图像的左上角。您可以使用 ImageSprite 类的 centerAnchor 函数来更改此值。在进行此调用后，x 和 y 值将参考图像的中心。虽然默认示例没有执行此操作，但可以通过调用 plane.centerAnchor(); 来完成此操作。最后一行代码只是创建一个新的实体，将平面组件添加到实体，然后将新实体添加到根。请注意，这是添加到根的第二个实体，它将在渲染背景后进行渲染。

Flambe 事件模型

Flambe 另一个需要理解的领域是其事件模型。Flambe 使用信号系统，其中子系统、组件和实体具有可用的信号属性，可以连接到这些属性以侦听特定信号事件。例如，调整屏幕大小会触发信号。可以使用以下代码连接此事件。

System.stage.resize.connect(function onResize() {
  //do something
});

在处理应用中的其他组件时，这是一个非常好的功能。例如，要在用户单击或触摸应用中的 ImageSprite 时执行某些操作，可以使用以下代码

//ImageSprite Component has pointerDown signal property
myBasketBallEntity.get(ImageSprite).pointerDown.connect(function (event) {
    bounceBall();
});

在这种情况下，当用户使用鼠标按下或触摸手势时，会触发 pointerDown 信号。

演示应用

Flambe 存储库还包含许多 演示应用，可用于进一步了解引擎的机制和 API。这些演示已在 Firefox OS 上进行了测试，并且性能非常好。下面是在运行 Firefox OS 的 Geeksphone Keon 上拍摄的几个屏幕截图。

在演示中，物理和粒子演示尤其值得注意。物理演示使用 Nape Haxe 库，并允许创建一些非常酷的环境。Nape 网站包含 所有可用包的文档。要使用此库，您需要运行以下命令

haxelib install nape

粒子演示说明了如何在基于 Flambe 的游戏中使用 PEX 文件中定义的粒子描述。可以使用粒子编辑器（如 Particle Designer）定义 PEX 文件。

总结

如果您是当前的 Flambe 游戏开发人员，并且拥有一个或多个现有游戏，为什么不使用新版本的引擎将它们编译并打包到 Firefox OS 中呢？如果您是 Firefox OS 开发人员，并且正在寻找开发新游戏平台的好方法，Flambe 提供了一种开发引人入胜、性能出色的 Firefox OS 游戏（以及许多其他平台）的绝佳方法！

此外，如果您有兴趣为 Flambe 做出贡献，我们也欢迎您。