持续创作,加速成长!这是我参与「日新计划 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&烟花三月下扬州全诗词;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