要想给游戏注入活力和互动性，粒子引擎是很一个很重要的元素。只需要采用比较简单的系统，你就能创建出几乎是无穷的效果，只需要改动几个参数就能产生比如火焰、水滴、烟雾、火花、血溅、爆炸以及天气等效果。本教程将带领大家用Javascript创建一个简单而又丰富的2D粒子系统。到本文的第一部分结束时，你就会拥有一个最基本但可以使用的粒子系统，它能创建广泛的基本效果。
单个粒子
首先定义粒子对象
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var Particle = function(x, y, angle, speed, life, size) { /* the particle's position */ this.pos = { x: x || 0, y: y || 0 }; /* set specified or default values */ this.speed = speed || 5; this.life = life || 1; this.size = size || 2; this.lived = 0; /* the particle's velocity */ var radians = angle * Math.PI / 180; this.vel = { x: Math.cos(radians) * speed, y: -Math.sin(radians) * speed }; }; |
这一步很简单，而且直到本教程结束也不会有大的改动。构造方法的参数分别是坐标，以度数表示的角度，以像素/秒为单位的速度，以秒为单位的生命长度以及以像素为单位的大小。接下来创建一个坐标向量，然后给其他属性赋值并把速度和角度转换成速度向量。这里采用的角度和速度值是便于理解，但是转换成一个简单的向量表示更便于处理X和Y值。由于Y轴是从顶部递增，这里Y值要求是负数。
创建喷射器
粒子对象本身其实没什么用，所以我们需要一个东西来控制它， 那就是喷射器。喷射器根据设定的参数喷射粒子，当生命周期结束后消亡。首先定义一些喷射器需要的设置，先来一些简单的吧。这里我们把这些设置命名为“基本”并放入到settings对象中保持整洁。这样我们就能通过”settings.fire”或者”settings.smoke”等方式来应用不同的设置。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var settings = { 'basic': { 'emission_rate': 50, 'min_life': 3, 'life_range': 2, 'min_angle': 0, 'angle_range': 360, 'min_speed': 25, 'speed_range': 15, 'min_size': 3, 'size_range': 2, 'colour': '#82c4f5' } }; |
喷射速率表示每秒钟喷射的粒子数量。其余的设置可以顾名思义。粒子对象的构造方法中每一个参数都对应一个设置项，除了粒子的坐标参数，它默认值为0，0（喷射器的坐标）。以_range结尾的设置指定特定参数的范围，比如速度的取值范围是55到60.
现在我们需要对这些设置进行应用，下面开始定义喷射器。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var Emitter = function(x, y, settings) { /* the emitter's position */ this.pos = { x: x, y: y }; /* set specified values */ this.settings = settings; /* How often the emitter needs to create a particle in milliseconds */ this.emission_delay = 1000 / settings.emission_rate; /* we'll get to these later */ this.last_update = 0; this.last_emission = 0; /* the emitter's particle objects */ 重要的元素。只需要采用比较简单的系统，你就能创建出几乎是无穷的效果，只需要改动几个参数就能产生比如火焰、水滴、烟雾、火花、血溅、爆炸以及天气等效果。本教程将带领大家用Javascript创建一个简单而又丰富的2D粒子系统。到本文的第一部分结束时，你就会拥有一个最基本但可以使用的粒子系统，它能创建广泛的基本效果。
单个粒子 首先定义粒子对象
这一步很简单，而且直到本教程结束也不会有大的改动。构造方法的参数分别是坐标，以度数表示的角度，以像素/秒为单位的速度，以秒为单位的生命长度以及以像素为单位的大小。接下来创建一个坐标向量，然后给其他属性赋值并把速度和角度转换成速度向量。这里采用的角度和速度值是便于理解，但是转换成一个简单的向量表示更便于处理X和Y值。由于Y轴是从顶部递增，这里Y值要求是负数。 创建喷射器 粒子对象本身其实没什么用，所以我们需要一个东西来控制它， 那就是喷射器。喷射器根据设定的参数喷射粒子，当生命周期结束后消亡。首先定义一些喷射器需要的设置，先来一些简单的吧。这里我们把这些设置命名为“基本”并放入到settings对象中保持整洁。这样我们就能通过”settings.fire”或者”settings.smoke”等方式来应用不同的设置。
喷射速率表示每秒钟喷射的粒子数量。其余的设置可以顾名思义。粒子对象的构造方法中每一个参数都对应一个设置项，除了粒子的坐标参数，它默认值为0，0（喷射器的坐标）。以_range结尾的设置指定特定参数的范围，比如速度的取值范围是55到60. 现在我们需要对这些设置进行应用，下面开始定义喷射器。
|
