FlutterFlame游戏实践#15 | 生命游戏 - 演绎启动


theme: cyanosis

本文为稀土掘金技术社区首发签约文章,30天内禁止转载,30天后未获授权禁止转载,侵权必究!


Flutter\&Flame 游戏开发系列前言:

该系列是 [张风捷特烈] 的 Flame 游戏开发教程。Flutter 作为 全平台原生级 渲染框架,兼具 全端 跨平台和高性能的特点。目前官方对休闲游戏的宣传越来越多,以 Flame 游戏引擎为基础,Flutter 有游戏方向发展的前景。本系列教程旨在让更多的开发者了解 Flutter 游戏开发。

第一季:30 篇短文章,快速了解 Flame 基础。[已完结]\ 第二季:从休闲游戏实践,进阶 Flutter\&Flame 游戏开发。

两季知识是独立存在的,第二季 不需要 第一季作为基础。本系列教程源码地址在 【toly1994328/toly_game】,系列文章列表可在《文章总集》 或 【github 项目首页】 查看。


接下来 Flutter&Flame 系列将迎来最重要的一个系列:《生命游戏》。我们将一起演绎这场计算机与数学逻辑间的绝妙故事。本篇将完成如下的功能:给定一个生命游戏的初始状态,可以进行每帧的迭代:

01.gif


一、生命游戏规则解读

我们将单元格称之为生存空间,每个空间中可以容纳一个细胞,界面中的白块表示空间中有细胞存活。对于每一块空间来说,《生命游戏》 规定了三条生存法则:

image.png

[1]. 空间周围细胞数 = 3,该空间产生细胞,或维持生存。 [2]. 空间周围细胞数 = 2,该空间维持不变。 [3]. 其余情况下,该空间细胞无法生存。


1. 上帝视角下的生命游戏

生命游戏的规则应该说非常简单,核心是计算出空间四周存活细胞个数,这里姑且称为 拥挤度 吧。下面来开启上帝视角,结合图片具体介绍一下:

  • 左上角的格子(红框)有三个邻格,三个邻格没有存活的细胞。拥挤度 = 0
  • 中间的红框中格子有8个邻格,其中两块有细胞。拥挤度 = 2

image.png

上面是上帝视角下的生命游戏,我为每个空间标记了它的 拥挤度 ,其中数字的颜色也根据状态进行了区分,以便于可视化理解生命游戏规则:

  • 灰色数字空间,下一帧不会存活细胞;
  • 绿色数据空间,会诞生细胞或继续生存;
  • 红色数字空间,细胞将会死亡;

2. 细胞的诞生和维持

细胞在空间中的 诞生维持生存,都会在下一帧存活:比如

  • 下面的第 6 行第 5 列的空间,四周有 3 个细胞;并且当前没有细胞,下一帧将会诞生新细胞。
  • 下面的第 5 行第 4 列的空间,四周有 2 个细胞;细胞在下一帧将会维持生存。

image.png


3. 细胞的死亡

下面是第二帧的情况: 其中有细胞存在且 拥挤度>3 的空间,其中数字通过红色示意。这些细胞将会在下一帧中被杀死:

image.png

下面是第三帧的情况: 在第二帧中绿色数字的区域,在第三帧会有细胞存活。以此类推:

image.png

这样,我们不仅可以展示出生命游戏的细胞存活情况,也可以通过上帝视角的空间拥挤度,掌握下一帧的细胞情况。通过可视化的手段,更容易理解规则。

2.gif

接下来,就一起通过 Flutter&Flame 实现生命游戏演示功能。在真正写代码之前,我们应该详细地分析当前需求。包括三个方面,本节将逐一分析:

  • 视图层: 界面的布局如何实现,界面元素有哪些交互逻辑。
  • 数据层: 应用在完成功能需求的过程中,需要依赖哪些数据进行展示。
  • 逻辑层: 功能需求完成的过程中,数据的操作逻辑。

二、视图层实现

当前视图结构如下,上方是标题栏,左侧是工具栏,中间是游戏面板。其中标题和侧栏的工具使用 Flutter 内置组件,而且侧栏使用了 TolyUI 组件库;游戏区通过 Flame 框架进行构建游戏界面。

image.png

也就是说 Flutter 的组件布局体系和 Flame 的构件布局体系是可以兼容的。在构建界面的过程中可以各取所长。侧栏的按钮第一版中包括:运行、下一帧、前一帧、重置、清空五个按钮。通过事件触发来通知游戏区的数据发生变化。


1. 视图层:空间管理器 SpaceManager

游戏区和上一篇实现的扫雷类似,都是在宫格中盛放内容。这里称每个宫格是生存的空间 Space,游戏世界 LifeWord 中通过 SpaceManager 维护 Space 空间集合。

image.png

空间管理器负责绘制网格与添加空间构件,完成核心的展示任务。如下所示,在构造方法中传入网格的行列数,已经每个单元格的边长 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 就可以展示在网格中:

image.png

image.png

```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 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 枚举记录对应的行为和图标。

image.png

```dart enum ToolAction { play(TolyIcon.iconplay), next(TolyIcon.iconnext), prev(TolyIcon.iconprev), reset(TolyIcon.iconreset), clear(TolyIcon.icon_clear), ;

final IconData icon;

const ToolAction(this.icon); } ```

然后定义 ActionToolbar 组件构建侧栏按钮的展示,这里用到了 TolyUI 中的 TolyAction 组件,展示一个图标按钮;通过 onAction 回调将事件传递给使用者,做具体的行为逻辑处理。

```dart class ActionToolbar extends StatelessWidget { final ValueChanged 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 createState() => _LifeGameViewState(); }

class _LifeGameViewState extends State { 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 中定义了 spacesspaceValueMap 两个映射关系,前者是地图数据,后者是为了便于开上帝视角而维护的当前帧拥挤度关系。 本文我们只看一个固定案例的生命游戏演化,自己绘制的功能将在写篇实现。在 reset 方法中重置地图数据,给出当前存活的细胞。也就是下面的初始场景:

image.png

```dart typedef XY = (int, int);

class Frame { XY size;

/// 地图数据 Map spaces = {}; /// 拥挤度关系 Map 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 | 扫雷 - 逻辑实现》 一文中已经领略过了,这里再说明一下

image.png

如下所示 _calculate 函数计算 (x,y) 坐标四周的空间存活细胞数。只需要遍历 [x-1,x+1] ~ [y-1,y+1] 区间的九个格点即可。另外和扫雷不同的时,当前格点不计入计算。下面看起来是一个二重 for 循环,但该函数只会触发 9 次循环体,是一个 O(1) 复杂度的函数,而非 O(n^2)。

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 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 {

final SpaceManager spaceManager = SpaceManager();

@override FutureOr onLoad() { spaceManager.setFrame(game.frame); add(spaceManager); return super.onLoad(); } } ```

游戏的主类是 LifeGame,其中维护 Frame 对象,在 onLoad 中通过将相机居中;另外,我们知道 Flame 的游戏循环是一致会触发渲染的,但是生命游戏查看下一帧功能,并不需要持续渲染。可以通过在 update 回调中通过 paused = true 来暂停游戏世界的时间。这样在按钮的操作是只需要开启一下,就可以触发一帧的游戏动画。

```dart class LifeGame extends FlameGame { LifeGame() : super(world: LifeWord());

Frame frame = Frame((9,9));

@override FutureOr 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); } } ```


到这里,我们就完成了生命游戏的下一帧演化功能,这也是生命游戏最最基础的展示能力。通过可视化空间拥挤度,也可以让大家更直观地了解生命游戏的规则。后期将带来生命游戏更复杂的操作功能,比如自定义绘制地图数据、自动运行、空间行列数自动扩张等。敬请期待 ~

2.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/44357.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android 居中对齐

在 Android 中&#xff0c;要使 LinearLayout 中的内容居中对齐&#xff0c;你可以通过设置 android:gravity 属性或使用 android:layout_gravity 属性来实现。这两个属性的使用取决于你希望对齐的内容是 LinearLayout 内部的子视图还是 LinearLayout 本身相对于其父布局的对齐…

4.3 设备管理

大纲 设备分类 输入输出 虚设备和SPOOLING技术

管理客户的10个CRM系统技巧

客户是企业生存和发展的基石。为此&#xff0c;客户关系管理系统&#xff08;CRM&#xff09;应运而生&#xff0c;旨在帮助企业实现大规模的个性化客户接触&#xff0c;并通过定制化的互动增强客户忠诚度&#xff0c;从而推动企业的持续增长。 然而&#xff0c;引入CRM系统并…

vue3对比 Setup、Render、SFC 从 vue 底层实现和性能开销上全面分析三者区别及优略

vue3 中对比 Setup、Render、SFC 从 vue 底层实现和性能开销上全面分析三者区别及优略 /* setup 方式 */ export const Setup defineComponent({setup() {const handleChange (v: any) > {};return () > {return (<div><button onClick{handleChange}>Tes…

AD确定板子形状

方法1 修改栅格步进值&#xff0c;手动绘制 https://cnblogs.com/fqhy/p/13768031.html 方法2 器件摆放确定板子形状 https://blog.csdn.net/Mark_md/article/details/116445961

Java实战:寻找完美数

文章目录 一、何谓完美数二、寻找完美数&#xff08;一&#xff09;编程思路&#xff08;二&#xff09;编写程序&#xff08;三&#xff09;运行程序 三、实战小结 一、何谓完美数 完美数是一种特殊的自然数&#xff0c;它等于其所有正除数&#xff08;不包括其本身&#xff…

百问网全志D1h开发板MIPI屏适配

MIPI屏适配 100ASK-D1-H_DualDisplay-DevKit V11 1. 显示适配 1.1 修改设备树 1.1.1 修改内核设备树 进入目录&#xff1a; cd /home/ubuntu/tina-d1-h/device/config/chips/d1-h/configs/nezha/linux-5.4修改board.dts: &lcd0 {lcd_used <1>;lcd…

类的生命周期详解

第1部分&#xff1a;引言 1.1 面向对象编程简介 面向对象编程&#xff08;OOP&#xff09;是一种编程范式&#xff0c;它使用“对象”来设计软件。对象可以包含数据&#xff08;通常称为属性或字段&#xff09;和代码&#xff08;通常称为方法或函数&#xff09;。OOP的核心概…

Vue 项目中 history 路由模式的使用

在最近帮客户开发的一个项目中&#xff0c;由于项目的特殊性&#xff0c;需要用到 Vue 中的 history路由模式。该模式使用时会涉及到“上传白屏”和“刷新 404 问题”。在帮助客户解决这两个问题的过程中&#xff0c;总结问题的解决方案并记录下来&#xff0c;希望能够保留这篇…

眼外伤险失明辗转成都爱尔眼科就医保视力,患者复查送锦旗!

近日患者王先生到成都爱尔眼科医院进行硅油取出后的二次复查&#xff08;硅油为眼底病手术中一种“填充物”&#xff09;&#xff0c;他激动地为蔡裕主任献上锦旗&#xff0c;感谢医生的救治避免了失明。 意外发生在半年之前&#xff0c;王先生不慎滑倒右眼磕碰到茶几边缘&…

【前端从入门到精通:第九课:CSS3新增属性及伸缩盒布局】

弹性盒模型 介绍 伸缩盒模型也叫弹性盒模型&#xff0c;或flex。它决定一个盒子在其它盒子中的分布&#xff0c;以及如何处理可用的空间。使用该模型&#xff0c;可以轻松的创建“自适应”浏览器窗口的流动布局。 flexbox是一个很新的东西&#xff0c;在w3c希望可以使用flexbo…

力扣1472.设计浏览器历史记录

力扣1472.设计浏览器历史记录 用双指针记录历史记录 以及栈顶高度移动时会直接把之前的记录消掉 class BrowserHistory {int pos-1;int top0;string history[5010];public:BrowserHistory(string homepage) {visit(homepage);}void visit(string url) {pos ;top pos;histor…

[激光原理与应用-103]:配电箱的柜门与柜体为啥要接一根导线?

目录 一、概述 1.1、电气安全 1.2、减少电磁干扰 1.3、方便维修和更换 1.4、其他因素 一、铰链的材质 二、铰链的设计 三、结论 二、正确连接铜线的步骤 1、选择正确的铜线 2、清洁连接处 3、正确连接 4、检查连接是否牢固 参考&#xff1a; 一、概述 配电机柜上…

探索AI艺术的无限可能:SD模型与大模型的融合之美

艺术与科技的结合从未像今天这样紧密。AI绘画技术正以惊人的速度改变着我们创作和欣赏艺术的方式。在这场革命中&#xff0c;Stable Diffusion&#xff08;SD&#xff09;模型扮演了至关重要的角色。 &#x1f31f; SD模型&#xff1a;艺术创作的新维度 SD模型以其生成高质量图…

力扣682.棒球比赛

力扣682.棒球比赛 数组模拟栈记录分数 class Solution {public:int calPoints(vector<string>& ops) {int res0;vector<int> points;for(auto &op:ops){int n points.size();char c op[0];if(c ){res points[n-1] points[n-2];points.push_back(po…

在数据库设计中,选择自增 ID 还是 GUID?这篇文章讲清楚

在数据库设计中&#xff0c;选择自增 ID 还是 GUID 取决于具体的应用场景和需求。 自增 ID 的优点&#xff1a; 性能较好&#xff1a;在插入数据时&#xff0c;自增 ID 的生成速度通常较快&#xff0c;因为数据库可以高效地顺序分配新的 ID 值。存储空间小&#xff1a;通常只…

1.9-改进的CBOW模型的实现

文章目录 0引言1 CBOW模型的重构1.1模型初始化1.2模型的前向计算1.3模型的反向传播 2总结 0引言 前面讲述了对word2vec高速化的改进&#xff1a; 改进输入侧的计算&#xff0c;变成Embedding&#xff0c;即从权重矩阵中选取特定的行&#xff1b;改进输出侧的计算&#xff0c;包…

Perl中的文件系统守卫:实现自定义访问控制

&#x1f6e1;️ Perl中的文件系统守卫&#xff1a;实现自定义访问控制 在系统编程中&#xff0c;文件系统访问控制是确保数据安全和完整性的关键机制。Perl作为一种功能强大的脚本语言&#xff0c;提供了丰富的接口来实现自定义的文件系统访问控制。本文将深入探讨如何在Perl…

【C语言】【排序算法】----- 归并排序

由于最近要考试&#xff0c;好久没有发博客了&#xff0c;非常抱歉大家对我的支持。之后我会不断更新博客&#xff0c;继续创作出高质量的文章&#xff0c;希望能帮到大家&#xff01; 文章目录 一、归并排序基本思想二、递归实现三、非递归实现四、效率分析 一、归并排序基本…

Foxit Reader:高效、安全、多功能的PDF阅读器技术解析

引言 在当今数字化时代&#xff0c;PDF&#xff08;Portable Document Format&#xff09;文档已成为工作、学习和生活中不可或缺的一部分。作为处理PDF文件的重要工具&#xff0c;PDF阅读器的选择显得尤为关键。今天&#xff0c;我们将深入探讨一款备受推崇的PDF阅读器——Fo…