學習 PixiJS — 粒子效果

時間  2019-11-07
標籤 學習 pixijs 粒子 效果 简体版
原文   原文鏈接

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

使用 Dust 庫

Pixi 沒有內置的製做粒子效果的功能，但你可使用一個名爲 Dust 的輕量級的庫來製做它們。git

注意：Dust 是一種快速簡便的方法，能夠製做遊戲所需的大部分粒子效果，但若是你須要功能更全面，更復雜的庫，請查看 Proton github

使用 Dust 庫和使用 SpriteUtilities 庫是同樣的。canvas

首先直接用 script 標籤，引入 js 文件segmentfault

<script src="https://www.kkkk1000.com/js/dust.js"></script>

而後建立它的實例數組

d = new Dust(PIXI);

變量 d 如今就表明 Dust 實例。app

接下來，在遊戲循環中調用 Dust 的 update 方法，這個方法用於更新粒子。咱們在上篇文章中製做的示例中有 gameLoop 和 play 兩個函數 ，你能夠在這兩個函數中執行此操做。建議在 gameLoop 中執行此操做，就在調用 state 函數以後但在渲染階段以前，以下所示：dom

function gameLoop(){
 requestAnimationFrame(gameLoop);
 state();
 d.update();
 renderer.render(stage);
}

製做粒子

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

參數：oop

名稱 類型 默認值 描述
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 — 視覺效果

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程