【Flutter&Flame游戏 – 拾伍】粒子系统 | ParticleSystemComponent

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

---

前言

这是一套 张风捷特烈 出品的 Flutter&amflutter是什么意思p;Flame 系列教程，发布于社区。如果你在其他平台看到本文，可以根据对于链接移步到中查看。因为文章可索引的优缺点能会更新github永久回家地址、修正，一切以文章版本为准。本系列源码于 【toly_game】 ，如果本系列对你有所帮助，希望点fluttering赞支持，本系列文章一览：

• 【Flutter&Flame 游戏 – 壹】开启新世界的大门
• 【Flutter&Flame 游戏 – 贰】操纵杆与角色移动
• 【Flutter&Flame 游戏 – 叁】键盘事件与手势操作
• 【Flutter&Flame 游戏 – 肆】精灵图片加载方式
• 【Flutter&Flame 游戏 – 伍】Ca索引失效的几种情况nvas 参上 | 角色的血条
• 【Flutter&Flgitlabame 游戏 – 陆】暴击 Dash | 文字构件的使用
• 【Flutt索引超出矩阵维度er&amp烟花三月下扬州全诗词;Flame 游戏 – 柒】人随指动 | 动画点触与移动
• 【Flutter&Flaflutter面试题me游戏 – 捌】装弹完毕 | 角色武器发射
• 【Flutter&Flame游戏 – 玖】探索构件 | Component 是什么
• 【Fl烟花模拟器utter&Fflutter开发的app有哪些lame游戏 – 拾】探索构件 | Componegitint 生命周期回调
• 【Flutter&Flame游戏 –flutter翻译 拾壹】探索构件 | Component 使用细节
• 【Flutter&Flam烟花e游戏 – 拾贰】探索构件 |烟花 角色管理
• 【Fl索引失效utter&Flame游戏 – 拾叁】碰撞检测 | CollisionCallbacks
• 【Flutter&索引失效的几种情况Flame游戏 – 拾肆】碰撞检测 | 之前代码优化
• 【Flutter&Flame游戏 – 拾伍】粒子系统 | ParticleSystem烟花模拟器Component (本文)

---

1. Flam动画片猫和老鼠e 中的粒子系统

在 Flagitlabme 中，一切的呈现都依赖于构件，烟花易冷粒子系统也不例外。目前和粒子相关的有两个构件，其中 ParticleCoflutter面试题mponent 已经过时了，不推荐使用。所以 Flame 中的粒子系统主要使用的是 ParticleSystemComponent 构件。

---

首先说一下什么是粒子，举个观的例子：现实中烟花的爆炸，会生flutter菜鸟教程成大量细小的颗粒，维持短暂的时间后消失。像这样的大量的，有存动画电影在时间的显示物就可以通过粒子系统来呈现。Flame 的官方案例中有一些案例，但放在一块有些杂乱，这里将用 2 篇文章，由详细介绍一下 ParticleSystemComponengithub永久回家地址t 的使用。

---

2. 通过 ParticleSystemComponent 显示一个粒子

如下，使用 ParticleSystemComponent 构件，显示一个生命时长为 1 s 的圆形粒子：代码详见 【15/01】

使用 ParticleSystemComponent 有三个步骤：

• 1. 创建 Particle 粒子对象
• 2. 创建 Pa动画大放映rticleSystemComponent 构件对象
• 3. 将构建加入到动画树中，进行显示

其中 2、3 步骤非flutter菜鸟教程常简单，所以对于粒子系统而言，如何创建 Particle 对象是重中之重。这里显示一个圆形的粒子，可以使用 Particle 的衍生类 CircleParticle 。其中有索引的优缺点三个入参：paint 表示粒子的绘制画板；radius 表示动画片猫和老鼠粒子的半径；lifespan 表示粒子的存在多少秒后消失动画片小猪佩奇。

void createParticle(){
  // 创建 Particle 对象
  Paint circlePaint = Paint()..color = Colors.white;
  Particle particle = CircleParticle(
    paint: circlePaint,
    radius: 20,
    lifespan: 1,
  );
  // 创建 ParticleSystemComponent 构件
  final ParticleSystemComponent psc = ParticleSystemComponent(
    particle: particle,
  );
  // 添加 ParticleSystemComponent 构件
  add(psc);
}

---

3. 区分 PartiGitcleSystemComponent 和 Particle

在进一步介绍粒子系统之前，有必要先认识一下 ParticleSystemComponent 和 Particle 两个类之间的索引的作用区别与联系。从如下 Particl动画片猫和老鼠eSystemComponent 源码中可以看出，它是一个 PositionComponent ，构造时必须传入 Particle 对象。另外构造时还可以指定一些 PositionCompone动画制作软件nt 的大小、位置、锚点等属性。

---

而 Particle 本身只是抽象类，不是 Component 的衍生类，它有自己的衍生体系。

如下，在 Flame 的 part索引超出矩阵维度icles 包中定义了烟花模拟器很多实现类以供使用：

---

瞄一下 CircleflutteringParticle 的源码可以看出，其实现还是非常简单的，就是画个圈而已。如果有需要的话，我们也可以根据需求来自己定义 Particle 。核心就是在 render 方法了进行绘制，有了 Canvas ，就可画万物。

---

4. 移动粒子 MovingParticle

在 Particle 的衍生类中可以看到有很多支持传入 child 的例子，这些实现类往往可以基于某个粒子，是些特点的功能。比如 MovingParticle 可以让粒子进行运动，如下所示：可以让粒子在 lifespan 时间内，按照 curve 的变化曲线，从起点移动到终点。 【15/02】

// 创建 Particle 对象
Paint circlePaint = Paint()..color = Colors.white;
Particle particle = MovingParticle(
  lifespan: 3,
  curve: Curves.easeIn,
  from: Vector2.zero(),
  to: Vector2(200,0),
  child: CircleParticle(
    radius: 20.0,
    paint: circlePaint,
  ),
);

---

5.批量生成粒子

Particle 有个 generate 的方法可以生成多个粒子，下面是 Flame 官方的一个小例子，感觉挺有趣，这里来看一下。代码详见flutter菜鸟教程 【15/03】

这里通过 Particle.generate 生成多个粒子，其中 count 表示粒子生成粒子的数量，generator 是根据索引生成 Particle 的github中文官网网页函数；再使用 MovingParticle 实现粒子的移动；另外使用 PaintParticle 通过调节 paint 的 blendMode ，产生叠合效果。

其实这里giti轮胎不用 PaintPar烟花的唯美句子ticle ，直接设置 CircleParticlegit教程#paint 的 blendM动画片猫和老鼠ode 也可以得到相同的效果。可能是案例想github中文官网网页多介绍一种 Particle 吧。

final List<Color> colors = [
  const Color(0xffff0000),
  const Color(0xff00ff00),
  const Color(0xff0000ff),
];
final List<Vector2> positions = [
  Vector2(-10, 10),
  Vector2(10, 10),
  Vector2(0, -14),
];
// 创建 Particle 对象
Particle particle = Particle.generate(
  count: 3,
  lifespan: 3,
  generator: (i) => PaintParticle(
    paint: Paint()..blendMode = BlendMode.difference,
    child:MovingParticle(
    curve: Curves.easeIn,
    from: positions[i],
    to: i == 0 ? positions.last : positions[i - 1],
    child: CircleParticle(
      radius: 20.0,
      paint: Paint()..color = colors[i],
    ),
  ),
));

---

本问简单介绍了一下 ParticleSystemComponent 的使用，并Flutter了解了 CircleParticle 、MovingParticle、PaintParticle 和 Particle.generate 的使用。下一篇我们将进一步认识 Part动画制作软件icle 一族，并结合随机数来完成某些粒flutter是什么意思子效果。那本文就到这里，明天见 ~

• @张风捷特烈 2022.06.10 未允禁转
• 我的 公众号:flutter菜鸟教程 编程之王
• 我的 主页 : 张风捷特烈
• 我的 B站主页 : 张风捷特烈
• 我的 github 主页 : toly1994328