【Flutter&Flame游戏 – 拾柒】构件特效 | 了解 Effect 体系

持续创造，加速生长！这是我参与「日新计划 6 月更文挑战」的第 18 天，点击查看活动详情

---

前语

这是一套 张风捷特烈 出品的 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. Effect 是什么

比方马里奥吃到蘑菇变大动画；僵尸被寒冰射手击中，全体色彩变成偏蓝色；当主角被击中时闪耀几下，或怪物被消灭时透明突变消失。这些视觉上的效果处理，会增加游戏的动感，刚好地和用户交互。当你对一个构件进行移动、缩放、旋转、透明度、尺度、色彩进行换行时，就能够考虑增加 Effect 。

本质上来说 Effect 是一个 Component ,它往往是被附加在其他构件上，完结功能。也就是说，一般并不单独展示 Effect 构件。别的，Effect 是一个抽象类，不能直接运用，Flame 中供给的 Effect 完结类在 effects 包下，如下所示：

---

Flame 供给的 Effect 有如下几个，首要分为两类：第一种是进行根本变换操作，及：移动 、旋转、缩放 等；另一种是 ComponentEffect ，为构件增加色彩、透明度、尺度等变换特效。下面来结合粒子介绍一下。

---

2. 移动特效：MoveEffect

由 MoveEffect 支撑移动特效，不过它是一个抽象类，不能作为运行时运用。它有两个子类：MoveByEffect 和 MoveToEffect ，分别运用 移动了 和 移动到 某位移。之前点击屏幕，让人物移动到指定方位，用的就是 MoveToEffect 。 下面经过两个一个小例子来介绍它们的运用办法和差异：本文代码均在 【18/01】

当按下数字 1 键时让人物 0.5 秒位移 Vector2(10, -10) 。完结创立 MoveByEffect 目标，设置偏移量和控制器，然后附加在人物构建上面即可。代码如下：

void addMoveByEffect(){
  Effect effect = MoveByEffect(
    Vector2(10, -10),
    EffectController(duration: 0.5),
  );
  player.add(effect);
}

---

当按下数字 2 键时让人物 0.5 秒移动到屏幕中心。完结创立 MoveToEffect 目标，设置目标点和控制器，然后附加在人物构建上面即可。代码如下：

void addMoveToEffect(){
  Effect effect = MoveToEffect(
    size / 2,
    EffectController(duration: 0.5),
  );
  player.add(effect);
}

别的留意一个小细节，MoveEffect 虽然是抽象类，但定义了 by 和 to 的工厂结构办法，来创立子类目标。本质上和直接运用 MoveByEffect 和 MoveToEffect 没有差异，能够依据自己的喜爱来用。我更倾向于用 MoveEffect 的命名结构，感觉语义上好一些。

---

3. 旋转特效 ：RotateEffect

从源码中来看 RotateEffect 也有 by 和 to 两个结构，意义上和移动相似。 by 表明旋转了多少度，to 表明旋转到多少度。

---

下面经过按下数字键 3 让人物旋转 15 ，经过下面的 addRotateEffectBy 完结；按下数字键 4 让人物旋转到 0 , 经过下面的 addRotateEffectTo 完结。如下所示：

void addRotateEffectBy(){
  Effect effect = RotateEffect.by(
    15/180*pi,
    EffectController(duration: 0.5),
  );
  player.add(effect);
}
void addRotateEffectTo(){
  Effect effect = RotateEffect.to(
    0,
    EffectController(duration: 0.5),
  );
  player.add(effect);
}

---

4. 缩放特效：ScaleEffect

同样 ScaleEffect 也有 by 和 to 两个结构，和前面的也相似。 by 表明缩放了多少，to 表明缩放到多少。

---

下面经过按下数字键 5 让人物缩放 Vector2(1.2,1.2) ，经过下面的 addScaleEffectBy 完结；按下数字键 6 让人物旋转到 0 , 经过下面的 addScaleEffectTo 完结。如下所示：

void addScaleEffectBy(){
  Effect effect = ScaleEffect.by(
    Vector2(1.2,1.2),
    EffectController(duration: 0.5),
  );
  player.add(effect);
}
void addScaleEffectTo(){
  Effect effect = ScaleEffect.to(
    Vector2(1,1),
    EffectController(duration: 0.5),
  );
  player.add(effect);
}

---

5. 移除特效: 移除特效

从 RemoveEffect 的源码中能够看出，这个特效十分简略，甚至连控制器都不需求指定。RemoveEffect 的作用是在 delay 秒后，移除附加的构件。假如时长为 0 ，那这和构件直接触发 removeFromParent 没有什么太大的差异。

如下测试中，点击数字键 7 ，显现边框信息示意，然后在 3 秒后消失。代码如下：

void addRemoveEffect(){
  Effect effect = RemoveEffect(
    delay:3
  );
  player.add(effect);
}

---

6. Effect 的结束回调事情

在 【第七篇】 人随指动的一文中，运用到了 MoveEffect ，那时有朋友问了一下 Effect 是否有履行完结的回调。这里来解答一下：

---

其实瞄一眼 Effect 的源码就很简单看到，有个 onFinishCallback 的办法能够监听结束回调：

运用办法也十分简略，直接设置 onFinishCallback 回调即可：

void addMoveByEffect(){
  Effect effect = MoveByEffect(
    Vector2(10, -10),
    EffectController(duration: 0.5),
  );
  effect.onFinishCallback =(){
    print('=====onFinishCallback========');
  };
  player.add(effect);
}

---

别的，留意一点：Effect 中有一个 removeOnFinish 办法，默认为 true ，就表明在特效完结时，会主动从宿主身上移除。假如不想移除能够把该属性设为 false ，能够触发 Effect#reset 办法来让特效在此履行。

---

本文介绍了 Effect 的系统和根本的用法，写了几个小例子认识变换相关的特效。下一篇咱们将继续认识一下 ComponentEffect 系列的特效，特效好有个十分重要的 EffectController 概念，在后面也会逐渐介绍。那本文就到这里，明天见 ~

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

\