国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

學習 PixiJS — 粒子效果

chanjarster / 1678人閱讀

摘要：使用粒子發射器方法會產生一次粒子爆發，但通常你必須產生連續的粒子流。發射器具有和方法，可讓打開和關閉粒子流，并可以定義粒子的創建間隔。

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

使用 Dust 庫

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

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

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

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

然后創建它的實例

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 最大旋轉速度

返回值：

返回一個數組，其中包含對用作粒子的所有精靈的引用，如果需要進行碰撞檢測等原因必須訪問它們，這可能很有用。

現在我們來試試這個方法。

示例代碼：

查看效果

使用 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();

效果圖：

完整代碼：

查看效果

上一篇 學習 PixiJS — 精靈狀態

下一篇 學習 PixiJS — 視覺效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101289.html

相關文章

  • 學習 PixiJS — 小精靈冒險

    摘要：說明小精靈冒險是一書中最后一個案例。在游戲循環中，通過減小平鋪精靈的值，使其向左移動。如果方法返回，則退出循環，表示小精靈碰撞到柱子了。重置游戲如果小精靈碰撞到柱子，則在秒鐘延遲后重置游戲。 說明 小精靈冒險 是 Learn Pixi.js 一書中最后一個案例。點擊屏幕讓小精靈飛起來，小精靈上升時，會拍打翅膀，并且會有小星星產生。如果她撞到柱子上，她會爆炸成一堆小星星。幫助她通過15個...

    dmlllll 評論0 收藏0

  • 學習 PixiJS — 精靈狀態

    摘要：每個單獨的行為稱為狀態。狀態播放器用于控制精靈狀態。這個雪碧圖中實際上有八個精靈狀態四個靜態狀態和四個動畫狀態。下圖顯示了雪碧圖上的狀態以及標識這些狀態的幀號。將每個鍵的值設置為與狀態對應的幀編號。 精靈狀態 如果你有復雜的游戲角色或交互式對象，你可能希望該角色根據游戲環境中發生的情況，以不同的方式運行。每個單獨的行為稱為狀態。如果你在精靈上定義狀態，那么只要游戲中出現與該狀態相對應的...

    Tonny 評論0 收藏0

  • 學習 PixiJS — 視覺效果

    摘要：將水平高斯模糊應用于對象。下一步是將此值分配給渲染選項的屬性。蛇圖像的寬度為像素，因此大約個片段會產生很好的效果。通過循環將數組中的每個按照橢圓形的軌跡移動，形成波浪效果。 平鋪精靈 平鋪精靈是一種特殊的精靈，可以在一定的范圍內重復一個紋理。你可以使用它們創建無限滾動的背景效果。要創建平鋪精靈，需要使用帶有三個參數的 TilingSprite 類（PIXI.extras.TilingS...

    xavier 評論0 收藏0

  • 學習 PixiJS — 補間動畫

    摘要：方法的參數如下名稱默認值描述需要移動的精靈貝塞爾曲線的坐標點的數組補間需要的幀數，也就是動畫應該持續多長時間緩動類型用于確定精靈是否應在補間的起點和終點之間來回移動。 說明 補間動畫指的是，我們可以通過為精靈的位置、比例、透明度，等屬性，設置開始值和結束值，制作動畫，動畫中間需要的部分由軟件自動計算填充。 Pixi 沒有內置補間引擎，但是你可以使用很多很好的開源的補間庫，比如 Twee...

    levius 評論0 收藏0

  • 開始學習 PixiJS

    摘要：它自動偵測使用或者。開發者無需專門學習就能感受到強大的硬件加速的力量。要注意的是，雖然非常適合制作游戲，但它并不是一個游戲引擎，它的核心本質是盡可能快速有效地在屏幕上移動物體。可以被處理的圖像被稱作紋理。 PixiJS 介紹 PixiJS 是一個超快的2D渲染引擎。它自動偵測使用 WebGL 或者 Canvas。開發者無需專門學習 WebGL 就能感受到強大的硬件加速的力量。 Pixi...

    fredshare 評論0 收藏0

發表評論

0條評論

chanjarster

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<