持续创作,加快成长!这是我参加「日新方案 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】

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

如下是代码完成,经过 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】

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


经过 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】

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

如下是创立一个序列帧层的办法,运用 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】

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

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

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


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


番外: Flame 1.2.0 更新内容:

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

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

首要,Compoment 的一个特点发生了改变:

Compoment#shouldRemove  ==>  bullet.isRemoving

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

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


另外 1.2.0 中增加了 utils 包,其间有两个贝塞尔曲线相关的东西函数:

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


另外,对 Component 的事情支撑做了优化,供给了 events 包:关于构件的事情经过 XXXCallback 进行处理,这是为了替换掉曾经的 XXXable ,这点仍是比较赞的。

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


effects 中供给了 AnchorEffect 能够对构件的锚点进行特效处理:

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


components/input 包中增加了 KeyboardListenerComponent ,这样监听键盘事情能够更便利了:

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


components/mixin 中增加了三个混入类 :

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

components 中增加了两个显现 fps 相关的构件:

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

最后 assets 包并入了 cache 包中:

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


  • @张风捷特烈 2022.06.16 未允禁转
  • 我的 大众号: 编程之王
  • 我的 主页 : 张风捷特烈
  • 我的 B站主页 : 张风捷特烈
  • 我的 github 主页 : toly1994328

\