学习 PixiJS — 粒子效果
你如何创造火，烟，魔法和爆炸等效果？你制做了许多小精灵，几十，几百，甚至上千个精灵。而后对这些精灵应用一些物理效果，使它们的行为相似于你尝试模拟的元素。你还必须给他们一些关于它们应该如何出现和消失以及应该造成什么样的模式的规则。这些微小的精灵被称为粒子。你能够使用它们为游戏制做各类特效。javascript
使用 Dust 库
Pixi 没有内置的制做粒子效果的功能，但你能够使用一个名为 Dust 的轻量级的库来制做它们。html
注意：Dust 是一种快速简便的方法，能够制做游戏所需的大部分粒子效果，但若是你须要功能更全面，更复杂的库，请查看 Protonjava
使用 Dust 库和使用 SpriteUtilities 库是同样的。git
首先直接用 script 标签，引入 js 文件github
<script src="https://www.kkkk1000.com/js/dust.js"></script>
复制代码
而后建立它的实例canvas
d = new Dust(PIXI);
复制代码
变量 d 如今就表明 Dust 实例。数组
接下来，在游戏循环中调用 Dust 的 update 方法，这个方法用于更新粒子。咱们在上篇文章中制做的示例中有 gameLoop 和 play 两个函数 ，你能够在这两个函数中执行此操做。建议在 gameLoop 中执行此操做，就在调用 state 函数以后但在渲染阶段以前，以下所示：app
function gameLoop(){
requestAnimationFrame(gameLoop);
state();
d.update();
renderer.render(stage);
}
复制代码
制做粒子
参数：函数
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| x | number | 0 | 粒子出现的 x 坐标 |
| y | number | 0 | 粒子出现的 y 坐标 |
| spriteFunction | function | 一个函数，它返回要用于每一个粒子的精灵，若是提供具备多个帧的精灵，Dust 将随机显示不一样帧 | |
| container | object | 一个 PIXI 容器 | 要添加粒子的容器 |
| numberOfParticles | number | 20 | 要建立的粒子数 |
| gravity | number | 0 | 重力 |
| randomSpacing | boolean | true | 随机间隔 |
| minAngle | number | 0 | 最小角度 |
| maxAngle | number | 6.28 | 最大角度 |
| minSize | number | 4 | 最小尺寸 |
| maxSize | number | 16 | 最大尺寸 |
| minSpeed | number | 0.3 | 最小速度 |
| maxSpeed | number | 3 | 最大速度 |
| minScaleSpeed | number | 0.01 | 最小比例速度 |
| maxScaleSpeed | number | 0.05 | 最大比例速度 |
| minAlphaSpeed | number | 0.02 | 最小alpha速度 |
| maxAlphaSpeed | number | 0.02 | 最大alpha速度 |
| minRotationSpeed | number | 0.01 | 最小旋转速度 |
| maxRotationSpeed | number | 0.03 | 最大旋转速度 |
返回值：
返回一个数组，其中包含对用做粒子的全部精灵的引用，若是须要进行碰撞检测等缘由必须访问它们，这可能颇有用。
如今咱们来试试这个方法。
示例代码：
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="px-render"></div>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
<script src="https://www.kkkk1000.com/js/dust.js"></script>
<script> //建立一个 Pixi应用 须要的一些参数 let option = { width: 400, height: 300, transparent: true, } //建立一个 Pixi应用 let app = new PIXI.Application(option); //获取舞台 let stage = app.stage; //获取渲染器 let renderer = app.renderer; let playground = document.getElementById('px-render'); //把 Pixi 建立的 canvas 添加到页面上 playground.appendChild(renderer.view); let su = new SpriteUtilities(PIXI); let d = new Dust(PIXI); //须要加载的图片的地址 let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-ParticleEffects/star.png"; //加载图像，加载完成后执行setup函数 PIXI.loader.add(imgURL).load(setup); function setup() { stars = d.create( 128, //x 起始坐标 128, //y 起始坐标 () => su.sprite(imgURL), //返回要用于每一个粒子的精灵 stage, //粒子的容器 50, //粒子数 0,//重力 false,//随机间隔 0, 6.28,//最小/最大角度 30, 90,//最小/最大尺寸 1, 3//最小/最大速度 ); //开始游戏循环 gameLoop(); } function gameLoop() { requestAnimationFrame(gameLoop); d.update(); renderer.render(stage); } </script>
</body>
</html>
复制代码
使用 ParticleContainer
在前面的示例代码中，咱们建立的粒子都被添加到根容器（第四个参数）。可是，你能够将粒子添加到任何你喜欢的容器或任何其余精灵。
Pixi 有一个叫 ParticleContainer 的方法，任何在 ParticleContainer 里的精灵都会比在一个普通的 Container 的渲染速度快2到5倍。
到这里能够了解 ParticleContainer
若是要对粒子使用 ParticleContainer，只需在 create 方法的第四个参数中添加要使用的 ParticleContainer 对象的名称。如下是修改前面的示例代码以将粒子添加到名为 starContainer 的 ParticleContainer 的方法。
//建立ParticleContainer并将其添加到stage
let starContainer = new PIXI.particle.ParticleContainer(
1500,
{ alpha: true, scale: true, rotation: true, uvs: true }
);
stage.addChild(starContainer);
function setup() {
//建立星形粒子并将它们添加到starContainer
stars = d.create(
128, //x 起始坐标
128, //y 起始坐标
() => su.sprite(imgURL),
starContainer, //粒子的容器
50, //粒子数
0,//重力
false,//随机间隔
0, 6.28,//最小/最大角度
30, 90,//最小/最大尺寸
1, 3//最小/最大速度
);
//开始游戏循环
gameLoop();
}
复制代码
ParticleContainers 针对推送数千个精灵进行了优化，所以，除非你为不少粒子设置动画，不然你可能不会注意到对于使用普通 Container 对象的性能提高。
使用粒子发射器
create 方法会产生一次粒子爆发，但一般你必须产生连续的粒子流。你能够在粒子发射器的帮助下完成此操做。粒子发射器以固定的间隔产生粒子以产生流效果，你能够使用 Dust 的 emitter 方法建立一个粒子发射器。发射器具备 play 和 stop 方法，可以让打开和关闭粒子流，并能够定义粒子的建立间隔。
下面的代码是使用 Dust 的 emitter 方法的通常格式。它须要两个参数。
第一个参数是建立粒子间隔（以毫秒为单位）。
第二个参数与咱们在前面的示例中使用的 create 方法相同。
let particleStream = d.emitter(
100,
() => d.create();
);
复制代码
任何100毫秒或更短的间隔值将使颗粒看起来以连续流的形式流动。这里有一些产生星形喷泉效果的代码。
let particleStream = d.emitter(
100,
() => d.create(
128, 128,
() => su.sprite(imgURL),
stage,
30,
0.1,
false,
3.14, 6.28,
30, 60,
1, 5
)
);
复制代码
第六个参数，0.1，是重力。将重力设置为更高的数字，粒子将更快的下落。 角度介于3.14和6.28之间。这使得粒子出如今其原点之上的半月形大小的角度内。下图说明了如何定义该角度。
星星在中心原点处建立，而后在圆圈的上半部分向上飞出。然而，星星在重力的做用下，最终将落在画布的底部，这就是产生星形喷泉效果的缘由。
你能够使用 emitter 的 play 和 stop 方法在代码中随时打开或关闭粒子流，以下所示：
particleStream.play();
particleStream.stop();
复制代码
效果图：
完整代码：
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="px-render"></div>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
<script src="https://www.kkkk1000.com/js/dust.js"></script>
<script> //建立一个 Pixi应用 须要的一些参数 let option = { width: 400, height: 300, transparent: true, } //建立一个 Pixi应用 let app = new PIXI.Application(option); //获取舞台 let stage = app.stage; //获取渲染器 let renderer = app.renderer; let playground = document.getElementById('px-render'); //把 Pixi 建立的 canvas 添加到页面上 playground.appendChild(renderer.view); let su = new SpriteUtilities(PIXI); let d = new Dust(PIXI); let particleStream; //须要加载的图片的地址 let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-ParticleEffects/star.png"; //加载图像，加载完成后执行setup函数 PIXI.loader.add(imgURL).load(setup); function setup() { let particleStream = d.emitter( 100, () => d.create( 128, 128, () => su.sprite(imgURL), stage, 30, 0.1, false, 3.14, 6.28, 30, 60, 1, 5 ) ); particleStream.play(); //开始游戏循环 gameLoop(); } function gameLoop() { requestAnimationFrame(gameLoop); d.update(); renderer.render(stage); } </script>
</body>
</html>
复制代码