學習 PixiJS — 粒子效果

時間 2019-11-06

標籤學習 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);
}
複製代碼

製做粒子

製做粒子須要用到 Dust 庫的 create 方法dom

參數：函數

名稱	類型	默認值	描述
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>
複製代碼