持续创造，加速生长！这是我参加「日新方案 6 月更文挑战」的第 29 天，点击查看活动详情
前语
这是一套 张风捷特烈 出品的 Flutter&Flame 系列教程，发布于社区。假如你在其他渠道看到本文，能够依据对于链接移步到中查看。因为文章可能会更新、修正，一切以文章版别为准。本系列源码于 【toly_game】和 【pinball】 ，假如本系列对你有所帮助，希望点赞支撑，本系列文章一览：
- 【Flutter&Flame 游戏 – 壹】开启新世界的大门
- 【Flutter&Flame 游戏 – 贰】操纵杆与人物移动
- 【Flutter&Flame 游戏 – 叁】键盘事情与手势操作
- 【Flutter&Flame 游戏 – 肆】精灵图片加载方式
- 【Flutter&Flame 游戏 – 伍】Canvas 参上 | 人物的血条
- 【Flutter&Flame 游戏 – 陆】暴击 Dash | 文字构件的运用
- 【Flutter&Flame 游戏 – 柒】人随指动 | 动画点触与移动
- 【Flutter&Flame 游戏 – 捌】装弹完毕 | 人物武器发射
- 【Flutter&Flame 游戏 – 玖】探索构件 | Component 是什么
- 【Flutter&Flame 游戏 – 拾】探索构件 | Component 生命周期回调
- 【Flutter&Flame 游戏 – 拾壹】探索构件 | Component 运用细节
- 【Flutter&Flame 游戏 – 拾贰】探索构件 | 人物管理
- 【Flutter&Flame 游戏 – 拾叁】磕碰检测 | CollisionCallbacks
- 【Flutter&Flame 游戏 – 拾肆】磕碰检测 | 之前代码优化
- 【Flutter&Flame 游戏 – 拾伍】粒子系统 | ParticleSystemComponent
- 【Flutter&Flame 游戏 – 拾陆】粒子系统 | 粒子的种类
- 【Flutter&Flame 游戏 – 拾柒】构件特效 | 了解 Effect 系统
- 【Flutter&Flame 游戏 – 拾捌】构件特效 | ComponentEffect 一族
- 【Flutter&Flame 游戏 – 拾玖】构件特效 | 了解 EffectController 系统
- 【Flutter&Flame 游戏 – 贰拾】构件特效 | 其他 EffectControler
- 【Flutter&Flame 游戏 – 贰壹】视差组件 | ParallaxComponent
- 【Flutter&Flame 游戏 – 贰贰】菜单、字体和浮层
- 【Flutter&Flame 游戏 – 贰叁】 资源管理与国际化
- 【Flutter&Flame 游戏 – 贰肆】pinball 源码剖析 – 项目结构介绍
- 【Flutter&Flame 游戏 – 贰伍】pinball 源码剖析 – 资源加载与 Loading
- 【Flutter&Flame 游戏 – 贰陆】pinball 源码剖析 – 游戏主菜单界面
- 【Flutter&Flame 游戏 – 贰柒】pinball 源码剖析 – 人物挑选与玩法面板
- 【Flutter&Flame 游戏 – 贰捌】pinball 源码剖析 – 游戏主场景的构成
- 【Flutter&Flame 游戏 – 贰玖】pinball 源码剖析 – 视口与相机
第一季完结，谢谢支撑 ~
1. 游戏主界面的构成
经过前面四篇，咱们剖析了 pinball 项目的全体结构，以及资源加载、主菜单、人物挑选和玩法介绍等面板。最终剩下最重要的一块，便是游戏的主界面，主要包括六个部分：布景 、发射器 、轨迹、小球、磕碰得分物 以及底部 摆动挡板 ，其中最杂乱的是各种磕碰体人物。
上面提及的游戏主界面构件，基本上都定义在 pinball_components 中。这也是 pinball 项目中文件最多，结构最杂乱的包。
对游戏主界面的构成剖析，也便是看这些构件以什么类型，怎么分布在游戏场景中。下面咱们就来一一介绍场景中的几个部分。
2.布景构件
主界面最吸引人的是外表有一定的 透视感 和 深度感 ，这样就形成了一个视觉上的立体空间。其实看到资源图片就会知道，这仅仅图片自身的效果，并非真实的 3D 模型。
如下是布景图片资源，能够看出，图片自身便是带有透视效果的。别的布景图片的边缘是比较随意的，因为它仅仅一个布景，在其周围会有相关的覆盖物。
对资源进行定位，很简单知道布景图的运用场景，如下是资源管理工具会生成 boardBackground 办法应用获取布景图片：
接下来持续追寻，能够看到在 board_background_sprite_component 文件中运用到了布景资源。在剖析代码时，依据细微的头绪去追寻有价值信息，是一件十分风趣的事。咱们面对杂乱的源码系统，寻觅适宜的切入点十分重要，没有必要一开始就硬啃核心代码处理逻辑。从周边入手，一层层剥离外围，找出头绪，逐步深入，是一个很好的研讨方式。
如下，就定位到了布景所对应的构件 BoardBackgroundSpriteComponent 。其中在 onLoad 办法中经过布景图片资源，为 sprite 成员赋值，而且尺度是原图的十分之一。
紧接着，能够持续追寻 BoardBackgroundSpriteComponent 的运用场景。如下，它在 PinballGame 的 onLoad 办法中被加入到场景中：
2. 地板构件和小球构件
在布景的底层，能够看到有个 ArcadeBackground 组件，它对应的便是最底层的地板。咱们上一篇说过，这个地板会随着挑选的人物而改变，这儿就来看一下其中的原因。
别的有一个小细节，在移动端是没有地板的，整个视口都是游戏面板。究竟移动端是竖屏的，没有空间显现更多内容。
如下所示，主要显现的内容由 ArcadeBackgroundSpriteComponent 觉得，他会监听 ArcadeBackgroundState 的改变。在新状况产出时，会更新 sprite 成员对应的图像。
能够看出，这儿的地板的图片资源是定义在 CharacterTheme 中的，每个实现类都有相关的资源图片。比方下面是 android 对应的资源，这样就不难理解为什么人物的改变，会让地板图片发生改变。
接下来，最终一个问题，挑选人物主题的逻辑是由 CharacterThemeCubit 完成的，产出的是 CharacterThemeState。而这儿源码是监听的是 ArcadeBackgroundState 状况，对应的是 ArcadeBackgroundCubit ，这显然是两个不同的 Bloc 。那这两者是怎么发生相关的呢？也便是说挑选人物时，CharacterThemeState 的改变怎么通知到 ArcadeBackgroundCubit 。
以 ArcadeBackgroundCubit#onCharacterSelected 事情为头绪，不难定位到：在 CharacterSelectionBehavior 中，会监听 CharacterThemeState 的改变，来触发 ArcadeBackgroundCubit 的事情，产出新的 ArcadeBackgroundState ，然后促使地板进行切换图片资，这个逻辑建立能够整理一下。
别的，从上面代码能够发现，小球 Ball 构件，也会受到人物主题的影响。仔细观察也不难发现，不同的人物主题，对应的小球色彩是不同的：
| dash | android | sparky |
|---|---|---|
 |
 |
 |
经过查看 BallSpriteComponent 中逻辑的，能够知道小球构件会监听 BallState 的状况，来更新图片资源，而该资源便是定义在主题类中的。
比方 dash 主题对应的是小蓝球：
当用户挑选某个人物主题，在 CharacterSelectionBehavior 中触发 onNewState 。如下红框在会寻觅 Ball 对应的 BallCubit 来触发 onCharacterSelected 事情，产出新状况。然后更新小球的图片资源，这和地板的资源改变是一个道理。
3. 鸿沟构件： Boundaries
在布景的上面是 Boundaries 构件：
从构件的定义中，很简单看出三个部分分别对应 boundary 文件夹中的三个图片。能够发现 pinall 项目无论是对 Flutter 中的组件，还是 Flame 中的构件，抽离分层的处理还是很细致和到位的。
经过图片资源能够看出，Boundaries 便是对布景之上的鸿沟进行处理。比方左图的外框，中心是镂空的透明色，将布景图叠在其下，就能够遮住上面布景四周的部位。这样在视觉上就能营造出一种立体效果。
4.发射台构件：Launcher
Launcher 构件主要包括三个部分：发射杆、发射台 、轨迹 。如下是三个部分的暗示：
从资源中能够看出，发射台 、轨迹 、挡板 这些都是独立的资源。经过在主界面上拼接，进行组合，出现的全体视觉效果。
如下 Launcher 构件在有四个子构件， LaunchRamp 是轨迹、Plunger 是发射杆、RocketSpriteComponent 是发射台。别的 Flapper 构件用于处理鸿沟，限制小球在外壁之内，试了一下，假如把下面的 Flapper 注释掉，小球就会飞出鸿沟之外。 对于能够运转的代码，当咱们不提理解一处的效果，能够将其屏蔽掉，看一下前后的差异，然后知道某个模块的效果。
5. 磕碰体
别的还有许多小的障碍物，用于磕碰后得分，这儿就不一一细看了。在处理上都比较相似，能够依据资源中的图片来定位到相关的构件。
比方右侧中心的小恐龙，在游戏中会一向动，这对应的资源是 dino/animatronic 下的序列帧：
能够依据资源称号，追寻到 DashAnimatronic 构件，它是一个 SpriteAnimationComponent 。其中序列帧的资源运用的便是上面的图片：
底部能够摆动的两个挡板资源图片在 flipper 文件夹下，对应的构件是 BottomGroup ，包括左右两个_BottomGroupSide 构件。
整个游戏主界面的结构就介绍到这儿，别的关于小球磕碰的相关处理，pinball 中运用的是 flame_forge2d ，我现在还没有研讨，就先不剖析了。下一篇，咱们来看一下 Flame 中视口和相机的概念，并结合 pinball 中对相机的运用来实际领会相机的效果。那本文就到这儿，明天见 ~
@张风捷特烈 2022.06.24 未允禁转我的 公众号: 编程之王-
我的 主页: 张风捷特烈 -
我的 B站主页: 张风捷特烈 -
我的 github 主页: toly1994328
\
