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

要想给游戏注入活力和互动性,粒子引擎是很一个很重要的元素。只需要采用比较简单的系统,你就能创建出几乎是无穷的效果,只需要改动几个参数就能产生比如火焰、水滴、烟雾、火花、血溅、爆炸以及天气等效果。本教程将带领大家用Javascript创建一个简单而又丰富的2D粒子系统。到本文的第一部分结束时,你就会拥有一个最基本但可以使用的粒子系统,它能创建广泛的基本效果。

单个粒子

首先定义粒子对象

这一步很简单,而且直到本教程结束也不会有大的改动。构造方法的参数分别是坐标,以度数表示的角度,以像素/秒为单位的速度,以秒为单位的生命长度以及以像素为单位的大小。接下来创建一个坐标向量,然后给其他属性赋值并把速度和角度转换成速度向量。这里采用的角度和速度值是便于理解,但是转换成一个简单的向量表示更便于处理X和Y值。由于Y轴是从顶部递增,这里Y值要求是负数。

创建喷射器

粒子对象本身其实没什么用,所以我们需要一个东西来控制它, 那就是喷射器。喷射器根据设定的参数喷射粒子,当生命周期结束后消亡。首先定义一些喷射器需要的设置,先来一些简单的吧。这里我们把这些设置命名为“基本”并放入到settings对象中保持整洁。这样我们就能通过”settings.fire”或者”settings.smoke”等方式来应用不同的设置。

喷射速率表示每秒钟喷射的粒子数量。其余的设置可以顾名思义。粒子对象的构造方法中每一个参数都对应一个设置项,除了粒子的坐标参数,它默认值为0,0(喷射器的坐标)。以_range结尾的设置指定特定参数的范围,比如速度的取值范围是55到60.

现在我们需要对这些设置进行应用,下面开始定义喷射器。

很简单吧。假如我们想在100,100的位置创建喷射器就可以采用下面的代码:

开干吧!

到目前为止喷射器还干不了啥事,我们需要添加一个Update方法来管理粒子。更新喷射器的关键在于计算与上一次更新的时间差,从这个值上我们可以得出需要喷射多少数量的粒子,哪些粒子需要消亡,粒子的位置以及喷射器是否需要消亡等。完成这一功能我们只需要使用 Date.now(), 它会返回自从1970年1月1日 00:00:00 AM UTC到现在的毫秒数。我们可以减去上一次更新时的这个值就能得出距离上一次更新的毫秒数。
下面是update方法的基本结构:

为了得到粒子对象某些按范围取值的属性,我们可以采用Math.random(), 它返回一个0到1的数,如果我们乘以范围值再加上最小值就能得到在范围内的某个值。所以我们可以采用下面的方法来创建粒子。

目前我们把粒子的坐标都设置为0,0,这是相对于喷射器的坐标。所有粒子的生命都将从这里开始。

计算粒子的新坐标很简单,只需要用速度向量乘以距上次更新的时间,然后加到当前坐标就行了。要注意的是我们的速度单位是像素/秒,但是这里时间单位是毫秒,所以需要除以1000才能得到正确值。

接下来就该描绘粒子了。这里我们只使用一种颜色,就是我们在设置里指定的颜色。是有点枯燥,但好戏留到第二部分吧,到时候我们会加入闪亮的变色系统,可以让粒子融入到另一种颜色或者渐隐,这样会显得更自然和真实。由于粒子的坐标是相对于喷射器的坐标的,所以我们需要把两者加在一起才能正确的得出粒子应该被显示的坐标。

现在我们画的是粒子,但你可以画任何你想要的形状。你可以用ctx.fillRect来画矩形或用ctx.drawImage来使用图片。

下面是完整的update方法:

终于等来高潮:

现在是万事俱备只欠东风了,东风就是创建一个喷射器对象并在每一帧调用Update方法。别忘了清理画布。下面就是最终效果。

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

 

有点无聊是不是,你可以修改一些设置来创建一些不同的效果。

接下来干啥?

基本的粒子系统已经有了,第二部分就是对它进行优化。

第二季内容:

  • 重力效果
  • 色彩变换
  • 纹理渲染
  • 坐标设置
  • 还有你猜…

上面这些实现之后,我们的粒子引擎将会比现在要耀眼以及丰富得多得多。。。

先说到这儿吧,希望你喜欢。 敬请期待下一季……

收藏 1 评论

关于作者:梧桐

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

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部