持续创作,加速成长!这是我参与「日新计划 6 月更文挑战」的第 21 天,点击查看活动概况


前言

这是一套 张风捷特烈 出品的 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. 推迟特效控制器: DelayedEffectController

上一篇中,介绍了 DurationEffectController 一族的特效控制器,本节咱们持续来认识一下其他的六种控制器。如下两边的六个控制器有一个共同的特点,它们都会持有 子控制器 ,也就是说它们是在一个控制器的基础上,再施加的改变。本文代码均在 【20/01】

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler


如下是 DelayedEffectController 的结构办法,其间有必要传入 child 控制器,别的需求指定延时的秒数。以此达到:子控制器延时 delay 秒开始动画的作用。

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler

如下事例,经过 DelayedEffectController 作用控制器, 让 Curved 作用延时 2s 触发。主需求将 Curved 作用作为 DelayedEffectController 的孩子,并指定 delay2 即可:

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler

void delayedEffectController(){
  EffectController child = CurvedEffectController(2,Curves.ease);
  EffectController ctrl = DelayedEffectController(child,delay: 2);
  Effect effect = MoveByEffect(
    Vector2(0, -100),
    ctrl,
  );
  player.add(effect);

2. 重复控制器:Repeated 和 无限控制器 Infinite

望文生义,RepeatedEffectController 能够让子作用的动画重复履行 repeatCount 次。

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler

上一节介绍了几个震动型改变的作用,能够结合 RepeatedEffectController 进行重复震动。这样就能够完成震动、闪烁等特效,比方下面经过重复履行 5SineEffectController ,完成简单的左右震动:

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler

void repeatedEffectController(){
  EffectController child = SineEffectController(period: 0.1);
  EffectController ctrl2 = RepeatedEffectController(child,5);
  Effect effect = MoveByEffect(
    Vector2(-2, 0),
    ctrl2,
  );
  player.add(effect);
}

InfiniteEffectControllerRepeatedEffectController 相似,都能够让子作用 重复运转 。只不过 Infinite 表明重复次数无限,Repeated 能够指定重复次数。比方上面的抖动假如运用 InfiniteEffectController ,就会一直不停抖动。

void infiniteEffectController(){
  EffectController child = SineEffectController(period: 0.1);
  EffectController ctrl2 = InfiniteEffectController(child);
  Effect effect = MoveByEffect(
    Vector2(-2, 0),
    ctrl2,
  );
  player.add(effect);
}

这时可能会有人疑问,那怎么停止呢?Effect 自身是附在加人物之上的 构建 ,只需移除 Effect ,特效就会消失。这样可插拔的规划,正是特效的优势,比方下面代码能够移除 player 身上的所有特效:

player.removeAll(player.children.whereType<Effect>());

3.随机作用控制器: RandomEffectController

这儿的随机值得是 时长随机 ,其间的 child 子作用有必要是 DurationEffectController 一族的。而且,运用 RandomEffectController 后,子级设置的时长会被无效。

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler


处理普通结构办法外,RandomEffectController 有两个 factory 结构,其间 uniform 运用的是 _UniformRandomVariable 随机数结构器。它是用于是生成在 min ~ max 之间的随机数:

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler

经过源码很容易看出 _UniformRandomVariable 生成随机数的方式:

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler


别的一个是 exponential 结构,随机数生成器是 _ExponentialRandomVariable ,其间传入一个 double 类型的 beta 小数:

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler

源码中能够看出,其对随机数处理的逻辑。其间 log 函数是以 e 为底 。 1-_random.nextDouble() 小于 1 ,log(x) 的定义域取值规模是 0~1 ,值域是 -无量 ~ 0 。这儿是 -logx * beta ,所以取值规模是 0 ~ 无量beta 起到扩大作用。
别的吐槽一下,这儿命名运用的是 exponential (指数) ,但从逻辑来看这儿运用的是 logarithm (对数) ,感觉不怎么严谨。

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler

别的假如有需求,咱们也能够自定义 RandomVariable 完成特定的随机数生成器。


4. 速度作用控制器: SpeedEffectController

相同,SpeedEffectController中的 child 子作用有必要是 DurationEffectController 一族,且子级设置的时长会被无效。结构时需求传入 double 型的 speed 参数,表明 每秒的改变量

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler

如下事例,向上移动 100 ,速度是 10 ,就表明 10 s 移动到目的地。细心思考一下,这个特效关于子弹来说是比较有用的,能够结合 Curve沿曲线运动 来完成一些更好玩的子弹。

void speedEffectController(){
  DurationEffectController child = LinearEffectController(2);
  EffectController ctrl = SpeedEffectController(child,speed: 10);
  Effect effect = MoveByEffect(
    Vector2(0, -100),
    ctrl,
  );
  player.add(effect);
}

5. 控制器序列:SequenceEffectController

SequenceEffectController 中能够传入控制器列表,注意这个序列是次序的序列,不是各个控制器数值进行叠加。也就是说,会这些控制器会 顺次 履行动画。

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler


比方下面是 SequenceEffectController 中放入了三个控制器,人物会顺次履行各个控制器的动画:

void sequenceEffectController(){
  DurationEffectController child1 = LinearEffectController(2);
  EffectController child2 = ZigzagEffectController(period: 2);
  EffectController child3 = CurvedEffectController(2,Curves.ease);
  EffectController ctrl = SequenceEffectController([
    child1,child2,child3
  ]);
  Effect effect = MoveByEffect(
    Vector2(0, -100),
    ctrl,
  );
  player.add(effect);
}

6. EffectController 结构

虽然 EffectController 是抽象类,但它有一个 factory 结构,集成了若干参数。细心看一下就能发现,这些其实都是前面介绍的各个完成类中需求的特点,也就是说 EffectController 经过了一个大杂烩的结构,来减缓控制器的运用。

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler


瞄一下源码就能够看出,本质上就是利用这些参数来实例化完成类进行返回罢了。前面的常识理解后, EffectController 的结构办法能够说是方便的解决。

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler

【Flutter&Flame游戏 - 贰拾】构件特效 |  其他 EffectControler


到这儿,经过四篇内容,介绍完了所以的 Effect 和所有的 EffectController 。这儿仅仅针对每个完成类举个小例子,实际中,咱们能够结合若干个作用或许控制器来完成一些组合特效。乃至去封装一些特定场景下的特效,以便复用。那本文就到这儿,明天见 ~

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

\