學習 PixiJS — 粒子效果

FEWY發表於2019-01-22
JS

你如何創造火，煙，魔法和爆炸等效果？你製作了許多小精靈，幾十，幾百，甚至上千個精靈。然後對這些精靈應用一些物理效果，使它們的行為類似於你嘗試模擬的元素。你還必須給他們一些關於它們應該如何出現和消失以及應該形成什麼樣的模式的規則。這些微小的精靈被稱為粒子。你可以使用它們為遊戲製作各種特效。

使用 Dust 庫

Pixi 沒有內建的製作粒子效果的功能，但你可以使用一個名為 Dust 的輕量級的庫來製作它們。

注意：Dust 是一種快速簡便的方法，可以製作遊戲所需的大部分粒子效果，但如果你需要功能更全面，更復雜的庫，請檢視 Proton

使用 Dust 庫和使用 SpriteUtilities 庫是一樣的。

首先直接用 script 標籤，引入 js 檔案

<script src="https://www.kkkk1000.com/js/dust.js"></script>
複製程式碼

然後建立它的例項

d = new Dust(PIXI);
複製程式碼

變數 d 現在就代表 Dust 例項。

接下來，在遊戲迴圈中呼叫 Dust 的 update 方法，這個方法用於更新粒子。我們在上篇文章中製作的示例中有 gameLoop 和 play 兩個函式 ，你可以在這兩個函式中執行此操作。建議在 gameLoop 中執行此操作，就在呼叫 state 函式之後但在渲染階段之前，如下所示：

function gameLoop(){
 requestAnimationFrame(gameLoop);
 state();
 d.update();
 renderer.render(stage);
}
複製程式碼

製作粒子

製作粒子需要用到 Dust 庫的 create 方法

引數：

名稱 型別 預設值 描述
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>
複製程式碼

檢視效果

上一篇 學習 PixiJS — 精靈狀態

下一篇 學習 PixiJS — 視覺效果

相關文章