【Flutter&Flame 游戏 – 贰壹】视差组件

持续创作，加快成长！这是我参加「日新方案 6 月更文应战」的第 22 天，点击查看活动详情

前语

这是一套张风捷特烈出品的 Flutter&Flame 系列教程，发布于社区。假如你在其他渠道看到本文，能够根据关于链接移步到中查看。由于文章可能会更新、批改，全部以文章版本为准。本系列源码于【toly_game】，假如本系列对你有所帮助，期望点赞支撑，本系列文章一览：

【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. 什么是 Parallax

Parallax 译为 视差 。能够想想一下，在你做火车时，旁边的树会飞速向后退，而远处的云却在缓慢运动，这便是由于物体距观察者间隔不同，而发生的 视差 。在某些游戏中咱们也期望模仿这种视觉感受，这便是 ParallaxComponent 存在的意义。

首要 ParallaxComponent 的特点是会以某个基础速度 运动，其次它支撑多以不同速度运动的图层。没找到什么好的图片素材，Flame 官方的这个事例还不错，就直接拿来看了。如下选中的五张图片分别是从内向外依次是：

bg.png ：布景
mountain-far.png : 远山
mountains.png : 近山
trees.png ：远树
foreground-trees.png : 近树

【Flutter&Flame 游戏 - 贰壹】视差组件 | ParallaxComponent

经过 ParallaxComponent 进行叠合运动，就能够发生如下的效果：远处的图层运动慢，近处的图层运动快：代码详见【21/01】

如下是代码完成，经过 loadParallaxComponent 办法加载 ParallaxComponent 目标。其间需求传入图层关于的图片数据，索引靠后的图层在前方。另外 baseVelocity 是图层运动的基础速度；velocityMultiplierDelta 是前一层和后一层的速度之比，也就相当于视差的倍率。

class BasicParallaxExample extends FlameGame {
  final _imageNames = [
    ParallaxImageData('parallax/bg.png'),
    ParallaxImageData('parallax/mountain-far.png'),
    ParallaxImageData('parallax/mountains.png'),
    ParallaxImageData('parallax/trees.png'),
    ParallaxImageData('parallax/foreground-trees.png'),
  ];
  @override
  Future<void> onLoad() async {
    final ParallaxComponent parallax = await loadParallaxComponent(
      _imageNames,
      baseVelocity: Vector2(20, 0),
      velocityMultiplierDelta: Vector2(1.4, 1.0),
    );
    add(parallax);
  }
}

2. 指定某层视差速度

经过 loadParallaxComponent 直接加载多个层，有个缺点：每层间的速度比值是稳定的。假如想要动态指定每层的速度该怎么办呢？咱们能够经过创立一个个的层来指定不同的速度比：代码见【21/02】

经过 loadParallaxLayer 办法，能够加载一个 ParallaxLayer 目标。如下经过 formLayerByMap 办法，把 Map 目标，转化成 ParallaxLayer 列表。

final _layersMeta = {
  'parallax/bg.png': 1.0,
  'parallax/mountain-far.png': 1.5,
  'parallax/mountains.png': 2.3,
  'parallax/trees.png': 3.8,
  'parallax/foreground-trees.png': 6.6,
};
Future<List<ParallaxLayer>> formLayerByMap(Map<String,double> data) async{
  List<ParallaxLayer> result = [];
  for(String image in data.keys){
    ParallaxLayer layer =  await loadParallaxLayer(
      ParallaxImageData(image),
      velocityMultiplier: Vector2(data[image]!, 1.0),
    );
    result.add(layer);
  }
  return result;
}

在 ParallaxComponent 组件中，传入 Parallax 目标，该目标结构时，需求指定 ParallaxLayer 列表。这样就能够指定不同层的速度比值，更精确地控制视差的效果。

@override
Future<void> onLoad() async {
  List<ParallaxLayer> layers =  await formLayerByMap(_layersMeta);
  final parallax = ParallaxComponent(
    parallax: Parallax(
      layers,
      baseVelocity: Vector2(20, 0),
    ),
  );
  add(parallax);
}

3. 加载序列帧资源

如下在最外层增加一个序列帧动画，能够看出此时由于布景在向后运动，所以序列帧所在的层保持停止即可。在视觉上会有一种飞机在向前飞的幻觉，这便是相对的参考系。代码见【21/03】

如下是创立一个序列帧层的办法，运用 ParallaxAnimationData 加载。ParallaxLayer 创立结束之后，增加到上面的 layers 列表中即可。

final ParallaxLayer airplaneLayer = await loadParallaxLayer(
  ParallaxAnimationData(
    'parallax/airplane.png',
    SpriteAnimationData.sequenced(
      amount: 4,
      stepTime: 0.2,
      textureSize: Vector2(320, 160),
    ),
  ),
  repeat: ImageRepeat.noRepeat,
  velocityMultiplier: Vector2.zero(),
  fill: LayerFill.none,
  alignment: Alignment.center,
);

这儿阐明一下：仅仅介绍一下如安在 ParallaxComponent 中加入序列帧图层，像小人这种主角，一般仍是作为一个 Component 加入游戏场景中的，这样便利操作。

4. 简略射击

结合前面学的常识，完成一个简略的规划场景应该不在话下，代码见【21/04】

另外， ParallaxComponent 也能够抽离出来，单独作为一个构建来运用，没必要把太多逻辑写在 Game 完成类中。如下，经过 Background 构件加载 Parallax ，完成视差的布景效果。

接下来大家能够自己拓宽一下，比方增加敌人、射击击中的检测、得分显现，和之前的小事例是一样的，这儿就不过多引申了。其实关于游戏而言， UI 的资源也是一个很大的瓶颈。有些好想法，但由于规划素材缺少，也很难完成。那本文就到这儿，明天见 ~

番外: Flame 1.2.0 更新内容：

Falme 最近更新了一个版本，到了 1.2.0 ，咱们来看一下现在进行了哪些改变：

首要，Compoment 的一个特点发生了改变：

Compoment#shouldRemove  ==>  bullet.isRemoving

比照 1.1.1 和 1.2.0 能够发现，新版本中对 text 进行了优化：之前文字经过一个 text.dart 文件进行完成，现在多了一个 text 的包，并且供给了 SpriteFontRenderer 来烘托精灵图字体。但现在源码看来并不是很好用，需求指定的参数非常费事，特别是 GlyphData ，感觉需求和特定的东西结合，加上解析才能用。