用Javascript打造粒子引擎(第二部分)

大家好,欢迎来到粒子引擎教程第二季。如果你还没读过第一季,请先读上一季。在上一季里我们已经为粒子引擎打下了基础。生活需要多姿多彩,现在就来为引擎添加视觉效果吧。

See the Pen Particle engine tutorial Part 1 by suffick (@suffick) on CodePen.

色彩

到目前为止,我们只有一种颜色,那就是我们定义在配置里的颜色。显然这有点寒掺, 我们希望拥有丰富以及炫目的效果。所以我们要打造一个色彩变换系统。所有的颜色都由四部分组成:红,绿,蓝以及alpha值。我们把颜色值拆分到这些单项里更便于我们进行单独操控。从一种颜色渐变到另一种颜色还不够骚,更骚的是从随机的某一颜色变到另一随机的颜色。

下面我们在setting对象里定义初始颜色和目标颜色数组

这些数组里的值就是上面提到的颜色值。红,绿,蓝的值域为0到255, alpha值为0到1。我们会从初始颜色数组里随机选择一种颜色,在粒子的生命周期内渐变到另一随机的目标颜色。要实现这个目标首先我们要给粒子的构造函数增加两个变量,start_colour和colour_step, 分别代表每秒钟颜色改变的度量。

现在我们需要修改创建新粒子的代码部分(在喷射器的update方法里)。我们需要获取初始颜色和目标颜色,并计算每秒钟需要改变多少颜色量,以便粒子在生命周期内能够完成颜色转换。为了在数组中随机选择元素,我们可以在0和数组长度之间产生一个随机数,并用Math.floor()进行取整。

我们需要在产生新粒子之前获得初始颜色和目标颜色。

或者你可以将初始颜色和目标颜色进行绑定,比如你可以只产生一个随机数,从两个数组里都取这个随机数位置的元素。

接下来要计算每秒钟的颜色转换量。首先我们得知道粒子的生命值,目前这个值是在构造函数里传入的,所以我们需要在创建粒子前将他赋给一个变量。然后通过目标颜色减去初始颜色的值我们可以知道初始颜色和目标颜色的差值, 最后除以生命值就能得到每秒钟需要的颜色转换量。需要特别注意的是这里粒子的颜色值应该是start_colour数组的拷贝而不能是原数组的引用,否则所有采用这个颜色的粒子都会被改变。我们可以用Array.prototype.slice()来实现。

现在我们的创建粒子的代码应该像下面这样:

我们只需要把colour_step值添加到粒子的当前颜色然后将fillStyle设置为new Colour就行了。还需要将colour_step乘以经历的时间才能进行正确转换。

先来看一下效果:

See the Pen Particle engine tutorial part 2 [a] by suffick (@suffick) on CodePen.

太骚了,已经很不错了。

重力

对于很多效果来说重力都是非常重要的元素。重力设置有两个值, gravity.x影响X轴, gravity.y影响Y轴。 两个值都可以为正(右边和下边)也可以为负(左边和上边)还可以为0(没有重力)。 单位为像素每秒。

添加重力对象到settings。

现在需要做的就是将这些值乘以与上次更新粒子速率的时间差再加到当前速率。请看下面代码:

很简单吧,来看看效果:

See the Pen Particle engine tutorial part 2 [a] by suffick (@suffick) on CodePen.

现在看上去更加自然形象,更加具有动态。 尝试一下改变颜色,重力,角度,大小和其他设置吧,你会发现现在我们已经能创建大量的效果了。现阶段我们的粒子系统差不多可以用到游戏中了,但还差了一点儿东西。

位置变化

如果粒子相对于喷射器的初始位置能够发生变化,这将为我们打开更多效果的大门,比如说雨模拟。 要想模拟雨点效果,粒子的初始位置需要沿整个X轴随机分布,我们需要增加两个设置来实现, min_position和 position_range。 不说你也应该知道这两个值干啥用,他们定义粒子散开的范围。

先加上这两个设置:

我希望这些设置为可选项,所以我们在喷射器的构造函数里加上默认值。

默认情况下,粒子初始位置为0,0跟以前一样。如果设置了位置,我们在范围内选取一个随机值而不是直接设置把X和Y的值设置为0。

收工!下面是一些基本的效果的演示。

See the Pen Particle engine tutorial part 2 [b] by suffick (@suffick) on CodePen.

下一步?

现在我们的粒子系统已经比较完善了,但还没有完工。第三季我会讲解渲染效果让它更逼真,还有实现喷射器的生命周期以及其他效果。

感谢关注, 希望你喜欢并采用。 第三季待续。。。

收藏 评论

关于作者:梧桐

(新浪微博:@jakiewoo_vp9) 个人主页 · 我的文章 · 13

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部