Flutter - Flame入门

如果你想使用Flutter开发一款2d游戏，你可以使用Flame来开发2d游戏，它包含了物理引擎、spine动画、tiled地图等2d游戏所需要的扩展。

添加依赖

在创建完Flutter项目后通过如下命令可以将最新版本的Flame添加到dependencies中:

flutter pub add flame

GameWidget

整个游戏UI绘制都是在GameWidget中绘制的，GameWidget跟普通的Flutter Widget一致可以插入到Flutter Widget树中的任何地方，如果我们的游戏不需要用到Material的任何组件，可以直接在runApp直接使用GameWidget。

void main() {
runApp(
GameWidget(game: MyGame())
);
}

Game

在GameWidget初始化时，我们需要传入一个Game，我们可以创建一个MyGame继承FlameGame:

class MyGame extends FlameGame{
}

在创建Game时，我们可以给他传入子组件列表，游戏世界World，相机组件：

• world : 游戏的世界，一般把游戏所有的（除了浮窗菜单）UI组件都放在世界中，比如游戏的地图、玩家等等。
• camera : 相机组件，代表玩家查看这个游戏的视角，可以自定义这个视角的大小

游戏循环

FlameGame

  在Flame中，基本上所有的组件都继承Component（连FlameGame也是），它们结合起来实现了一个组件树，Flame会调用这个树中所有的update和render方法。将这个基于组件的系统称为 Flame 组件系统 (FCS)。

Component可以添加其他的任何组件到组件树中

add(component);
addAll(components);

下面定义一个16像素大小的组件，并将其添加到世界中：

class MyCrate extends SpriteComponent {
MyCrate() : super(size: Vector2.all(16));

@override
Future<void> onLoad() async {
sprite = await Sprite.load('crate.png');
}
}

class MyWorld extends World {
@override
Future<void> onLoad() async {
await add(MyCrate());
}
}

游戏循环

Flame的游戏循环概念跟大多数游戏一样都是基于两种方法构建的：

• 渲染方法使用画布来绘制游戏的当前状态。
• 更新方法接收自上次更新以来的微秒内的增量时间，并允许您移动到下一个状态。

大小调整

每次需要调整游戏大小时，例如当方向改变时，FlameGame 都会调用所有Component方法onGameResize，并且还会将该信息传递给相机。

指向坐标空间中的控件FlameGame.camera应该位于取景器的锚点，[0,0]Anchor.center默认位于视口的中心 ( )。

生命周期

当FlameGame首次将添加到时，将按顺序调用GameWidget生命周期方法onGameResize、onLoad 、onMount。然后，每个组件都会按顺序调用 onMount->update->render 。如果从组件树中移除 ，则调用 onRemove。

调试模式

Flame 的FlameGame类提供了一个名为 的变量debugMode，默认情况下为false。但是，可以将其设置为true以启用游戏组件的调试功能。请注意 ，此变量的值在将其组件添加到游戏时传递给其组件，因此如果您debugMode在运行时更改 ，默认情况下不会影响已添加的组件。

class GameWorld extends World{

@override
FutureOr<void> onLoad() {
debugMode = true;
}

}

更改背景颜色

要更改游戏的背景颜色，FlameGame可以重写backgroundColor方法。

class MyGame extends FlameGame {
@override
Color backgroundColor() => const Color(0x00000000);
}

暂停/恢复/游戏执行

FlameGame可以通过两种方式暂停和恢复：

• 使用pauseEngine和resumeEngine方法。
• 通过改变paused属性。

HasPerformanceTracker

在优化游戏时，跟踪游戏更新和渲染每一帧所花费的时间会很有用。这些数据有助于检测代码中运行最频繁的区域。它还有助于检测游戏中渲染时间最长的视觉区域。

要获取更新和渲染时间，只需将HasPerformanceTracker混入到FlameGame中：

class MyGame extends FlameGame with HasPerformanceTracker {
// access `updateTime` and `renderTime` getters.
}

资产结构

Flame定义了一个固定的目录结构，其中包括标准 Flutter assets 目录以及一些子目录：audio、images和tiles。

class MyGame extends FlameGame {
@override
Future<void> onLoad() async {
await FlameAudio.play('explosion.mp3');

// Load some images
await Flame.images.load('player.png');
await Flame.images.load('enemy.png');

// Or load all images in your images folder
await Flame.images.loadAllImages();

final map1 = await TiledComponent.load('level.tmx', tileSize);
}
}

Flame 预期会按照以下文件结构来查找文件：

.
└── assets
 ├── audio
 │ └── explosion.mp3
 ├── images
 │ ├── enemy.png
 │ ├── player.png
 │ └── spritesheet.png
 └── tiles
 ├── level.tmx
 └── map.json

不要忘记将这些文件添加到pubspec.yaml文件中：

assets:
 - assets/audio/
 - assets/images/
 - assets/tiles/