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,一经查实,立即删除!

相关文章

4.3 设备管理

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

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…

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

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

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

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

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

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

1.9-改进的CBOW模型的实现

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

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

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

KDP数据分析实战:从0到1完成数据实时采集处理到可视化

智领云自主研发的开源轻量级Kubernetes数据平台&#xff0c;即Kubernetes Data Platform (简称KDP)&#xff0c;能够为用户提供在Kubernetes上的一站式云原生数据集成与开发平台。在最新的v1.1.0版本中&#xff0c;用户可借助 KDP 平台上开箱即用的 Airflow、AirByte、Flink、K…

关于原型和原型链的学习和实践

在前端面试中&#xff0c;原型和原型链始终是一个避不开的问题&#xff0c;今天就弄明白! 原型和原型链 对象的创建方式工厂模式构造函数模式原型模式 原型和原型链实践 对象的创建方式 原型和原型链都是关于对象的内容&#xff0c;先来看一下JavaScript中对象的构建方式。 工…

代码随想录(day3)有序数组的平方

暴力求解法&#xff1a; 注意&#xff1a;需要确定范围&#xff0c;比如nums.sort()是在for循环之外&#xff0c;根据函数的功能来确定 return返回的是nums&#xff0c;而不是nums[i]因为返回的是整个数组 class Solution(object):def sortedSquares(self, nums):for i in r…

人话学Python-基础篇-数字计算

一&#xff1a;数字类型 对于最常见的数据类型,数字在Python中分为三类&#xff1a; 整型(int) 表示的是整数类型的所有数字&#xff0c;包括正整数&#xff0c;负整数和0。和C语言不同的是&#xff0c;Python中的int型没有范围的限制&#xff0c;理论上可以从无限小的整数取到…

react基础语法,模板语法,ui渲染,jsx,useState状态管理

创建一个react应用 这里使用create-react-app的脚手架构建项目&#xff08;结构简洁&#xff0c;基于webpack-cli&#xff09;&#xff0c; npx create-react-app [项目名称] 使用其他脚手架构建项目可以参考&#xff1a;react框架&#xff0c;使用vite和nextjs构建react项目…

数学建模国赛入门指南

文章目录 认识数学建模及国赛认识数学建模什么是数学建模&#xff1f;数学建模比赛 国赛参赛规则、评奖原则如何评省、国奖评奖规则如何才能获奖 国赛赛题分类及选题技巧国赛赛题特点赛题分类 国赛历年题型及优秀论文数学建模分工技巧数模必备软件数模资料文献数据收集资料收集…

白蛇插画:成都亚恒丰创教育科技有限公司

白蛇插画&#xff1a;古韵今风&#xff0c;情深意长 在浩瀚的艺术长河中&#xff0c;插画作为一种独特的艺术形式&#xff0c;以其生动形象的画面、丰富多彩的色彩和深邃悠远的意境&#xff0c;成都亚恒丰创教育科技有限公司深受人们喜爱。而“白蛇插画”&#xff0c;作为融合…

bug - while parsing file included at

bug 如下 找到这个对应文件tb_top.sv的对应行&#xff0c;发现是一个 include "inc_tb_tests_xxx.sv" 问题点&#xff1a;头文件&#xff0c;重复定义&#xff0c;那么 解决方法- 在被include的文件首尾加入 ifndef MY_TRANSACTION__SV define MY_TRANSACTION__SV …

GenAI 技术堆栈架构师指南 - 十种工具

这篇文章于 2024 年 6 月 3 日首次出现在 The New Stack 上。 我之前写过关于现代数据湖参考架构的文章&#xff0c;解决了每个企业面临的挑战——更多的数据、老化的Hadoop工具&#xff08;特别是HDFS&#xff09;以及对RESTful API&#xff08;S3&#xff09;和性能的更大需求…

前端--第一个前端程序

第一个前端程序 第一步&#xff1a; 使用记事本&#xff0c;编写代码 在你的一个磁盘里面创建一个文件夹&#xff0c;名为前端&#xff0c;然后在里面新建一个记事本&#xff0c;在里面写如下代码&#xff0c;注意一定要使用英文&#xff0c;然后把后缀名称改为.html。 第二…

你明白C++中的多态吗?(暑假提升-多态专题)

内不欺己&#xff0c;外不欺人。———孔子 有趣的多态 1、前言2、概念3、多态定义与产生条件4、多态的重要组成成员-(虚函数)5、虚函数的重写(覆盖)6、辅助关键字override与final(了解即可)7、重载&#xff0c;重定义(隐藏)&#xff0c;重写(覆盖)8、抽象类9、多态的原理9、1、…

PHP老照片修复文字识别图像去雾一键抠图微信小程序源码

&#x1f50d;解锁复古魅力&#xff0c;微信小程序黑科技大揭秘&#xff01;老照片修复&更多神奇功能等你来试&#xff01; &#x1f4f8; 【老照片修复&#xff0c;时光倒流的美颜术】 你是否珍藏着一堆泛黄的老照片&#xff0c;却因岁月侵蚀而模糊不清&#xff1f;现在…