Flutter&Flame 游戏开发系列前言:
该系列是 [张风捷特烈] 的 Flame 游戏开发教程。Flutter 作为 全平台 的 原生级 渲染框架，兼具 全端 跨平台和高性能的特点。目前官方对休闲游戏的宣传越来越多，以 Flame 游戏引擎为基础，Flutter 有游戏方向发展的前景。本系列教程旨在让更多的开发者了解 Flutter 游戏开发。
第一季：30 篇短文章，快速了解 Flame 基础。
[已完结]
第二季：从休闲游戏实践，进阶 Flutter&Flame 游戏开发。文章源自灵鲨社区-https://www.0s52.com/bcjc/flutterjc/16837.html
两季知识是独立存在的，第二季 不需要 第一季作为基础。本系列教程源码地址在 【toly1994328/toly_game】，系列文章列表可在《文章总集》 或 【github 项目首页】 查看。文章源自灵鲨社区-https://www.0s52.com/bcjc/flutterjc/16837.html
接下来 Flutter&Flame 系列将迎来最重要的一个系列：《生命游戏》。我们将一起演绎这场计算机与数学逻辑间的绝妙故事。本篇将完成如下的功能：给定一个生命游戏的初始状态，可以进行每帧的迭代：文章源自灵鲨社区-https://www.0s52.com/bcjc/flutterjc/16837.html
文章源自灵鲨社区-https://www.0s52.com/bcjc/flutterjc/16837.html
一、生命游戏规则解读
我们将单元格称之为生存空间，每个空间中可以容纳一个细胞，界面中的白块表示空间中有细胞存活。对于每一块空间来说，《生命游戏》 规定了三条生存法则：文章源自灵鲨社区-https://www.0s52.com/bcjc/flutterjc/16837.html
文章源自灵鲨社区-https://www.0s52.com/bcjc/flutterjc/16837.html
[1]. 空间周围细胞数 = 3，该空间产生细胞，或维持生存。
[2]. 空间周围细胞数 = 2，该空间维持不变。
[3]. 其余情况下，该空间细胞无法生存。文章源自灵鲨社区-https://www.0s52.com/bcjc/flutterjc/16837.html
1. 上帝视角下的生命游戏
生命游戏的规则应该说非常简单，核心是计算出空间四周存活细胞个数，这里姑且称为 拥挤度 吧。下面来开启上帝视角，结合图片具体介绍一下:文章源自灵鲨社区-https://www.0s52.com/bcjc/flutterjc/16837.html
- 左上角的格子(红框)有三个邻格，三个邻格没有存活的细胞。拥挤度 = 0
- 中间的红框中格子有8个邻格，其中两块有细胞。拥挤度 = 2
文章源自灵鲨社区-https://www.0s52.com/bcjc/flutterjc/16837.html
上面是上帝视角下的生命游戏，我为每个空间标记了它的 拥挤度 ，其中数字的颜色也根据状态进行了区分，以便于可视化理解生命游戏规则：文章源自灵鲨社区-https://www.0s52.com/bcjc/flutterjc/16837.html
- 灰色数字空间，下一帧不会存活细胞；
- 绿色数据空间，会诞生细胞或继续生存；
- 红色数字空间，细胞将会死亡；
2. 细胞的诞生和维持
细胞在空间中的 诞生 和 维持生存，都会在下一帧存活：比如
- 下面的第 6 行第 5 列的空间，四周有 3 个细胞；并且当前没有细胞，下一帧将会诞生新细胞。
- 下面的第 5 行第 4 列的空间，四周有 2 个细胞；细胞在下一帧将会维持生存。
3. 细胞的死亡
下面是第二帧的情况: 其中有细胞存在且 拥挤度>3 的空间，其中数字通过红色示意。这些细胞将会在下一帧中被杀死:
下面是第三帧的情况: 在第二帧中绿色数字的区域，在第三帧会有细胞存活。以此类推：
这样，我们不仅可以展示出生命游戏的细胞存活情况，也可以通过上帝视角的空间拥挤度，掌握下一帧的细胞情况。通过可视化的手段，更容易理解规则。
接下来，就一起通过 Flutter&Flame 实现生命游戏演示功能。在真正写代码之前，我们应该详细地分析当前需求。包括三个方面，本节将逐一分析：
- 视图层: 界面的布局如何实现，界面元素有哪些交互逻辑。
- 数据层: 应用在完成功能需求的过程中，需要依赖哪些数据进行展示。
- 逻辑层: 功能需求完成的过程中，数据的操作逻辑。
二、视图层实现
当前视图结构如下，上方是标题栏，左侧是工具栏，中间是游戏面板。其中标题和侧栏的工具使用 Flutter 内置组件，而且侧栏使用了 TolyUI 组件库；游戏区通过 Flame 框架进行构建游戏界面。
也就是说 Flutter 的组件布局体系和 Flame 的构件布局体系是可以兼容的。在构建界面的过程中可以各取所长。侧栏的按钮第一版中包括：运行、下一帧、前一帧、重置、清空五个按钮。通过事件触发来通知游戏区的数据发生变化。
1. 视图层：空间管理器 SpaceManager
游戏区和上一篇实现的扫雷类似，都是在宫格中盛放内容。这里称每个宫格是生存的空间 Space，游戏世界 LifeWord 中通过 SpaceManager 维护 Space 空间集合。
空间管理器负责绘制网格与添加空间构件，完成核心的展示任务。如下所示，在构造方法中传入网格的行列数，已经每个单元格的边长 side 。然后复写 render 回调方法，通过 Canvas 基于网格行列数和格子边长绘制网格：
dart
class SpaceManager extends PositionComponent {
final double side;
final int row;
final int column;
SpaceManager({this.side = 20, this.row = 9, this.column = 9});
@override
void render(Canvas canvas) {
priority = 2;
drawGrid(canvas, side, row, column);
}
void drawGrid(Canvas canvas, double boxSize, int row, int column) {
Paint girdPaint = Paint()
..style = PaintingStyle.stroke
..color = const Color(0xff505050);
Path path = Path();
Path lightPath = Path();
double width = row * boxSize;
double height = column * boxSize;
for (int i = 0; i <= column; i++) {
path.moveTo(0, boxSize * i);
path.relativeLineTo(width, 0);
}
for (int i = 0; i <= row; i++) {
path.moveTo(boxSize * i, 0);
path.relativeLineTo(0, height);
}
canvas.drawPath(path, girdPaint);
}
}
2. 视图层：网格 Space
每个方格空间由一个 Space 构件表示，它构造时需要坐标、边长、是否存活、拥挤度 四个数据。render 回调可以控制绘制，在存活时绘制白块即可。在 onLoad 回调中通过 TextComponent 展示当前空间的拥挤度。这样在 SpaceManager 中添加若干个 Space 就可以展示在网格中：
dart
class Space extends PositionComponent {
final (int,int) p;
final double side;
final bool alive;
final int value;
Space(
this.p, {
this.side = 20,
this.alive = true,
this.value = 0,
}) : super(size: Vector2(side, side));
@override
FutureOr<void> onLoad() {
TextStyle style = TextStyle(fontSize: 16, fontFamily: 'BlackOpsOne', package: 'life_game', color: color);
TextComponent text = TextComponent(
text: '$value',
textRenderer: TextPaint(style: style),
position: Vector2(p.$1 * side, p.$2 * side),
anchor: Anchor.center,
);
add(text);
text.position = text.position + size / 2;
return super.onLoad();
}
@override
void render(Canvas canvas) {
if (!alive) return;
Paint paint = Paint()..color = Colors.white;
canvas.drawRect(Rect.fromLTWH(p.$1 * side, p.$2 * side, width, height), paint);
}
Color? get color {
if (alive && (value < 2 || value > 3)) {
return Colors.red;
}
if (!alive && (value <= 2 || value > 3)) {
return Colors.grey;
}
return Colors.green;
}
}
3. 操作工具栏
工具栏使用 Flutter 的 Widget 进行构建，目前由五个按钮。这里定义 ToolAction 枚举记录对应的行为和图标。
dart
enum ToolAction {
play(TolyIcon.icon_play),
next(TolyIcon.icon_next),
prev(TolyIcon.icon_prev),
reset(TolyIcon.icon_reset),
clear(TolyIcon.icon_clear),
;
final IconData icon;
const ToolAction(this.icon);
}
然后定义 ActionToolbar 组件构建侧栏按钮的展示，这里用到了 TolyUI 中的 TolyAction 组件，展示一个图标按钮；通过 onAction 回调将事件传递给使用者，做具体的行为逻辑处理。
dart
class ActionToolbar extends StatelessWidget {
final ValueChanged<ToolAction> onAction;
const ActionToolbar({super.key, required this.onAction});
@override
Widget build(BuildContext context) {
ActionStyle style = const ActionStyle(
backgroundColor: Colors.black,
padding: EdgeInsets.all(2),
borderRadius: BorderRadius.all(Radius.circular(4)),
);
return Container(
padding: const EdgeInsets.symmetric(vertical: 8),
width: 30,
alignment: Alignment.topCenter,
decoration: const BoxDecoration(
border: Border(top: BorderSide(color: Colors.black, width: 0.5)),
),
child: Wrap(
spacing: 6,
direction: Axis.vertical,
children: ToolAction.values.map((e) {
Color? color = e == ToolAction.play ? Colors.green : null;
return TolyAction(
style: style,
child: Icon(e.icon, size: 18, color: color),
onTap: () => onAction(e),
);
}).toList()),
);
}
}
4. Widget 与 Component
Widget 是 Flutter 的界面构建体系，Component 是 Flame 的界面构建体系。两者唯一的关联是 GameWidget，这是一个 Flutter 的 Widget ，且具有展示 Component 的能力。这里通过 Row 将 ActionToolbar 和 GameWidget 横向排列即可。在 onAction 回调中，可以操作 LifeGame 的方法，控制游戏行为：
dart
class LifeGameView extends StatefulWidget {
const LifeGameView({super.key});
@override
State<LifeGameView> createState() => _LifeGameViewState();
}
class _LifeGameViewState extends State<LifeGameView> {
final LifeGame game = LifeGame();
@override
Widget build(BuildContext context) {
return Row(
children: [
ActionToolbar(onAction: _onAction,),
Expanded(child: GameWidget(game: game)),
],
);
}
void _onAction(ToolAction value) {
switch(value){
case ToolAction.next:
game.nextFrame();
break;
case ToolAction.play:
break;
case ToolAction.prev:
break;
case ToolAction.reset:
game.reset();
case ToolAction.clear:
game.clear();
}
}
}
三、 数据层与维护逻辑
视图层已经准备完毕，接下来需要准备和维护数据。我们可以把网格坐标 XY 和生死状态 bool 建立一个映射关系，称为地图数据。每一步迭代称为一帧 Frame ，它的数据会发生变化，然后基于数据去更新界面展示。
1. Frame 的定义
Frame 中定义了 spaces 和 spaceValueMap 两个映射关系，前者是地图数据，后者是为了便于开上帝视角而维护的当前帧拥挤度关系。 本文我们只看一个固定案例的生命游戏演化，自己绘制的功能将在写篇实现。在 reset 方法中重置地图数据，给出当前存活的细胞。也就是下面的初始场景：
dart
typedef XY = (int, int);
class Frame {
XY size;
/// 地图数据
Map<XY, bool> spaces = {};
/// 拥挤度关系
Map<XY, int> spaceValueMap = {};
int spaceValue(XY key) => spaceValueMap[key] ?? 0;
Frame(this.size) {
reset();
}
void reset() {
spaces = {(3, 4): true, (4, 4): true, (5, 4): true, (4, 3): true};
_calcSpaceValue();
}
2. 空间的演化
生命游戏中最最重要的一个方法是如何计算出四周邻格的存活细胞总数。其实这个和扫雷中如何计算单元格周围的地雷个数是一个算法。我们在 《Flutter&Flame游戏实践#14 | 扫雷 - 逻辑实现》 一文中已经领略过了,这里再说明一下
如下所示 _calculate 函数计算 (x,y) 坐标四周的空间存活细胞数。只需要遍历 [x-1,x+1] ~ [y-1,y+1] 区间的九个格点即可。另外和扫雷不同的时，当前格点不计入计算。下面看起来是一个二重 for 循环，但该函数只会触发 9 次循环体，是一个 O(1) 复杂度的函数，而非 O(n^2)。
ini
int _calculate(int x, int y) {
int count = 0;
for (int i = y - 1; i <= y + 1; i++) {
for (int j = x - 1; j <= x + 1; j++) {
if ((x, y) == (j, i)) continue;
if (spaces[(j, i)] == true) count++;
}
}
return count;
}
下面 _calcSpaceValue 会遍历行列数，通过 _calculate 计算每个格点的拥挤度。该函数的复杂度本应和行列数分别正相关，为 O(n^2)。其实毕竟屏幕的尺寸是有限的，对于行列数非常大的地图，可以使用窗口的思想，仅仅解析当前视口中的网格，所以解析的行列数总是有限可数的，可以达到 O(1) 复杂度。
dart
void _calcSpaceValue() {
for (int y = 0; y < size.$1; y++) {
for (int x = 0; x < size.$2; x++) {
int count = _calculate(x, y);
spaceValueMap[(x, y)] = count;
}
}
}
现在万事俱备，可以通过 evolve 基于当前的拥挤度映射，来更新 space 中的细胞的生死情况。根据生命游戏规则：
- tag1: 当前空间有存活时，周围是 2和3 拥挤度表示细胞存活.
- tag2: 当前空间无存活时，拥挤度位 3 诞生新细胞。
_evolveAt 方法处理指定坐标空间的演化，其中很好地用代码诠释了这两条规则：
dart
void evolve() {
spaceValueMap.forEach(_evolveAt);
_calcSpaceValue();
}
void _evolveAt(XY key, int value){
bool live = spaces[key] == true;
if (live) {
bool keepAlive = (value == 2 || value == 3);
if(!keepAlive) spaces.remove(key);
} else {
if (value == 3) spaces[key] = true;
}
}
这就是生命游戏的核心数据以及演化逻辑，代码总量不过 60 行，也足以见得生命游戏规则的简单。
3. 用 Frame 渲染游戏世界
现在万事俱备，只需要将 Frame 中的数据，决定SpaceManager 中的 Space 列表即可。我在 SpaceManager 中添加了一个 setFrame 的方法，根据 Frame 对象更新管理器在的 Space 内容：
dart
class SpaceManager extends PositionComponent {
final double side;
final int row;
final int column;
SpaceManager({this.side = 20, this.row = 9, this.column = 9});
void setFrame(Frame frame) {
removeWhere((e) => true);
Map<XY, bool> data = frame.spaces;
for (int y = 0; y < row; y++) {
for (int x = 0; x < column; x++) {
bool alive = data[(x, y)] == true;
int value = frame.spaceValue((x, y));
add(Space((x, y), alive: alive, value: value));
}
}
}
游戏世界中目前只有一个 SpaceManager，在 onLoad 回调中设置帧数据，并添加到世界中。
dart
class LifeWord extends World with HasGameRef<LifeGame> {
final SpaceManager spaceManager = SpaceManager();
@override
FutureOr<void> onLoad() {
spaceManager.setFrame(game.frame);
add(spaceManager);
return super.onLoad();
}
}
游戏的主类是 LifeGame，其中维护 Frame 对象，在 onLoad 中通过将相机居中；另外，我们知道 Flame 的游戏循环是一致会触发渲染的，但是生命游戏查看下一帧功能，并不需要持续渲染。可以通过在 update 回调中通过 paused = true 来暂停游戏世界的时间。这样在按钮的操作是只需要开启一下，就可以触发一帧的游戏动画。
dart
class LifeGame extends FlameGame<LifeWord> {
LifeGame() : super(world: LifeWord());
Frame frame = Frame((9,9));
@override
FutureOr<void> onLoad() {
camera.viewfinder.anchor = Anchor.center;
return super.onLoad();
}
void clear() {
paused = false;
frame.clear();
world.spaceManager.setFrame(frame);
}
void nextFrame() {
paused = false;
frame.evolve();
world.spaceManager.setFrame(frame);
}
@override
void update(double dt) {
super.update(dt);
paused = true;
}
void reset() {
paused = false;
frame.reset();
world.spaceManager.setFrame(frame);
}
}
到这里，我们就完成了生命游戏的下一帧演化功能，这也是生命游戏最最基础的展示能力。通过可视化空间拥挤度，也可以让大家更直观地了解生命游戏的规则。后期将带来生命游戏更复杂的操作功能，比如自定义绘制地图数据、自动运行、空间行列数自动扩张等。敬请期待 ~
评论