資訊專欄INFORMATION COLUMN
摘要：使用粒子發(fā)射器方法會(huì)產(chǎn)生一次粒子爆發(fā)，但通常你必須產(chǎn)生連續(xù)的粒子流。發(fā)射器具有和方法，可讓打開(kāi)和關(guān)閉粒子流，并可以定義粒子的創(chuàng)建間隔。
你如何創(chuàng)造火，煙，魔法和爆炸等效果？你制作了許多小精靈，幾十，幾百，甚至上千個(gè)精靈。然后對(duì)這些精靈應(yīng)用一些物理效果，使它們的行為類似于你嘗試模擬的元素。你還必須給他們一些關(guān)于它們應(yīng)該如何出現(xiàn)和消失以及應(yīng)該形成什么樣的模式的規(guī)則。這些微小的精靈被稱為粒子。你可以使用它們?yōu)橛螒蛑谱鞲鞣N特效。
使用 Dust 庫(kù)Pixi 沒(méi)有內(nèi)置的制作粒子效果的功能，但你可以使用一個(gè)名為 Dust 的輕量級(jí)的庫(kù)來(lái)制作它們。
注意：Dust 是一種快速簡(jiǎn)便的方法，可以制作游戲所需的大部分粒子效果，但如果你需要功能更全面，更復(fù)雜的庫(kù)，請(qǐng)查看 Proton
使用 Dust 庫(kù)和使用 SpriteUtilities 庫(kù)是一樣的。
首先直接用 script 標(biāo)簽，引入 js 文件
然后創(chuàng)建它的實(shí)例
d = new Dust(PIXI);
變量 d 現(xiàn)在就代表 Dust 實(shí)例。
接下來(lái)，在游戲循環(huán)中調(diào)用 Dust 的 update 方法，這個(gè)方法用于更新粒子。我們?cè)谏掀恼轮兄谱鞯氖纠杏?gameLoop 和 play 兩個(gè)函數(shù) ，你可以在這兩個(gè)函數(shù)中執(zhí)行此操作。建議在 gameLoop 中執(zhí)行此操作，就在調(diào)用 state 函數(shù)之后但在渲染階段之前，如下所示：
function gameLoop(){
requestAnimationFrame(gameLoop);
state();
d.update();
renderer.render(stage);
}
制作粒子
制作粒子需要用到 Dust 庫(kù)的 create 方法
參數(shù)：
| 名稱 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| x | number | 0 | 粒子出現(xiàn)的 x 坐標(biāo) |
| y | number | 0 | 粒子出現(xiàn)的 y 坐標(biāo) |
| spriteFunction | function | 一個(gè)函數(shù)，它返回要用于每個(gè)粒子的精靈，如果提供具有多個(gè)幀的精靈，Dust 將隨機(jī)顯示不同幀 | |
| container | object | 一個(gè) PIXI 容器 | 要添加粒子的容器 |
| numberOfParticles | number | 20 | 要?jiǎng)?chuàng)建的粒子數(shù) |
| gravity | number | 0 | 重力 |
| randomSpacing | boolean | true | 隨機(jī)間隔 |
| 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 | 最小旋轉(zhuǎn)速度 |
| maxRotationSpeed | number | 0.03 | 最大旋轉(zhuǎn)速度 |
返回值：
返回一個(gè)數(shù)組，其中包含對(duì)用作粒子的所有精靈的引用，如果需要進(jìn)行碰撞檢測(cè)等原因必須訪問(wèn)它們，這可能很有用。
現(xiàn)在我們來(lái)試試這個(gè)方法。
示例代碼：
查看效果
使用 ParticleContainer在前面的示例代碼中，我們創(chuàng)建的粒子都被添加到根容器（第四個(gè)參數(shù)）。但是，你可以將粒子添加到任何你喜歡的容器或任何其他精靈。
Pixi 有一個(gè)叫 ParticleContainer 的方法，任何在 ParticleContainer 里的精靈都會(huì)比在一個(gè)普通的 Container 的渲染速度快2到5倍。
到這里可以了解 ParticleContainer
如果要對(duì)粒子使用 ParticleContainer，只需在 create 方法的第四個(gè)參數(shù)中添加要使用的 ParticleContainer 對(duì)象的名稱。以下是修改前面的示例代碼以將粒子添加到名為 starContainer 的 ParticleContainer 的方法。
//創(chuàng)建ParticleContainer并將其添加到stage
let starContainer = new PIXI.particle.ParticleContainer(
1500,
{ alpha: true, scale: true, rotation: true, uvs: true }
);
stage.addChild(starContainer);
function setup() {
//創(chuàng)建星形粒子并將它們添加到starContainer
stars = d.create(
128, //x 起始坐標(biāo)
128, //y 起始坐標(biāo)
() => su.sprite(imgURL),
starContainer, //粒子的容器
50, //粒子數(shù)
0,//重力
false,//隨機(jī)間隔
0, 6.28,//最小/最大角度
30, 90,//最小/最大尺寸
1, 3//最小/最大速度
);
//開(kāi)始游戲循環(huán)
gameLoop();
}
查看效果
ParticleContainers 針對(duì)推送數(shù)千個(gè)精靈進(jìn)行了優(yōu)化，因此，除非你為很多粒子設(shè)置動(dòng)畫，否則你可能不會(huì)注意到對(duì)于使用普通 Container 對(duì)象的性能提升。
使用粒子發(fā)射器create 方法會(huì)產(chǎn)生一次粒子爆發(fā)，但通常你必須產(chǎn)生連續(xù)的粒子流。你可以在粒子發(fā)射器的幫助下完成此操作。粒子發(fā)射器以固定的間隔產(chǎn)生粒子以產(chǎn)生流效果，你可以使用 Dust 的 emitter 方法創(chuàng)建一個(gè)粒子發(fā)射器。發(fā)射器具有 play 和 stop 方法，可讓打開(kāi)和關(guān)閉粒子流，并可以定義粒子的創(chuàng)建間隔。
下面的代碼是使用 Dust 的 emitter 方法的一般格式。它需要兩個(gè)參數(shù)。
第一個(gè)參數(shù)是創(chuàng)建粒子間隔（以毫秒為單位）。
第二個(gè)參數(shù)與我們?cè)谇懊娴氖纠惺褂玫?create 方法相同。
let particleStream = d.emitter( 100, () => d.create(); );
任何100毫秒或更短的間隔值將使顆?？雌饋?lái)以連續(xù)流的形式流動(dòng)。這里有一些產(chǎn)生星形噴泉效果的代碼。
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
)
);
第六個(gè)參數(shù)，0.1，是重力。將重力設(shè)置為更高的數(shù)字，粒子將更快的下落。
角度介于3.14和6.28之間。這使得粒子出現(xiàn)在其原點(diǎn)之上的半月形大小的角度內(nèi)。下圖說(shuō)明了如何定義該角度。
星星在中心原點(diǎn)處創(chuàng)建，然后在圓圈的上半部分向上飛出。然而，星星在重力的作用下，最終將落在畫布的底部，這就是產(chǎn)生星形噴泉效果的原因。
你可以使用 emitter 的 play 和 stop 方法在代碼中隨時(shí)打開(kāi)或關(guān)閉粒子流，如下所示：
particleStream.play(); particleStream.stop();
效果圖：
完整代碼：
查看效果
上一篇 學(xué)習(xí) PixiJS — 精靈狀態(tài)
下一篇 學(xué)習(xí) PixiJS — 視覺(jué)效果
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101289.html
摘要：說(shuō)明小精靈冒險(xiǎn)是一書中最后一個(gè)案例。在游戲循環(huán)中，通過(guò)減小平鋪精靈的值，使其向左移動(dòng)。如果方法返回，則退出循環(huán)，表示小精靈碰撞到柱子了。重置游戲如果小精靈碰撞到柱子，則在秒鐘延遲后重置游戲。 說(shuō)明 小精靈冒險(xiǎn) 是 Learn Pixi.js 一書中最后一個(gè)案例。點(diǎn)擊屏幕讓小精靈飛起來(lái)，小精靈上升時(shí)，會(huì)拍打翅膀，并且會(huì)有小星星產(chǎn)生。如果她撞到柱子上，她會(huì)爆炸成一堆小星星。幫助她通過(guò)15個(gè)...
摘要：每個(gè)單獨(dú)的行為稱為狀態(tài)。狀態(tài)播放器用于控制精靈狀態(tài)。這個(gè)雪碧圖中實(shí)際上有八個(gè)精靈狀態(tài)四個(gè)靜態(tài)狀態(tài)和四個(gè)動(dòng)畫狀態(tài)。下圖顯示了雪碧圖上的狀態(tài)以及標(biāo)識(shí)這些狀態(tài)的幀號(hào)。將每個(gè)鍵的值設(shè)置為與狀態(tài)對(duì)應(yīng)的幀編號(hào)。 精靈狀態(tài) 如果你有復(fù)雜的游戲角色或交互式對(duì)象，你可能希望該角色根據(jù)游戲環(huán)境中發(fā)生的情況，以不同的方式運(yùn)行。每個(gè)單獨(dú)的行為稱為狀態(tài)。如果你在精靈上定義狀態(tài)，那么只要游戲中出現(xiàn)與該狀態(tài)相對(duì)應(yīng)的...
摘要：將水平高斯模糊應(yīng)用于對(duì)象。下一步是將此值分配給渲染選項(xiàng)的屬性。蛇圖像的寬度為像素，因此大約個(gè)片段會(huì)產(chǎn)生很好的效果。通過(guò)循環(huán)將數(shù)組中的每個(gè)按照橢圓形的軌跡移動(dòng)，形成波浪效果。 平鋪精靈 平鋪精靈是一種特殊的精靈，可以在一定的范圍內(nèi)重復(fù)一個(gè)紋理。你可以使用它們創(chuàng)建無(wú)限滾動(dòng)的背景效果。要?jiǎng)?chuàng)建平鋪精靈，需要使用帶有三個(gè)參數(shù)的 TilingSprite 類（PIXI.extras.TilingS...
摘要：方法的參數(shù)如下名稱默認(rèn)值描述需要移動(dòng)的精靈貝塞爾曲線的坐標(biāo)點(diǎn)的數(shù)組補(bǔ)間需要的幀數(shù)，也就是動(dòng)畫應(yīng)該持續(xù)多長(zhǎng)時(shí)間緩動(dòng)類型用于確定精靈是否應(yīng)在補(bǔ)間的起點(diǎn)和終點(diǎn)之間來(lái)回移動(dòng)。 說(shuō)明 補(bǔ)間動(dòng)畫指的是，我們可以通過(guò)為精靈的位置、比例、透明度，等屬性，設(shè)置開(kāi)始值和結(jié)束值，制作動(dòng)畫，動(dòng)畫中間需要的部分由軟件自動(dòng)計(jì)算填充。 Pixi 沒(méi)有內(nèi)置補(bǔ)間引擎，但是你可以使用很多很好的開(kāi)源的補(bǔ)間庫(kù)，比如 Twee...
摘要：它自動(dòng)偵測(cè)使用或者。開(kāi)發(fā)者無(wú)需專門學(xué)習(xí)就能感受到強(qiáng)大的硬件加速的力量。要注意的是，雖然非常適合制作游戲，但它并不是一個(gè)游戲引擎，它的核心本質(zhì)是盡可能快速有效地在屏幕上移動(dòng)物體。可以被處理的圖像被稱作紋理。 PixiJS 介紹 PixiJS 是一個(gè)超快的2D渲染引擎。它自動(dòng)偵測(cè)使用 WebGL 或者 Canvas。開(kāi)發(fā)者無(wú)需專門學(xué)習(xí) WebGL 就能感受到強(qiáng)大的硬件加速的力量。 Pixi...
閱讀 1849·2021-09-22 15:25
閱讀 1363·2019-08-29 12:34
閱讀 1993·2019-08-26 13:57
閱讀 3266·2019-08-26 10:48
閱讀 1499·2019-08-26 10:45
閱讀 864·2019-08-23 18:23
閱讀 796·2019-08-23 18:01
閱讀 2009·2019-08-23 16:07
