你如何創造火,煙,魔法和爆炸等效果?你製作了許多小精靈,幾十,幾百,甚至上千個精靈。然後對這些精靈應用一些物理效果,使它們的行爲類似於你嘗試模擬的元素。你還必須給他們一些關於它們應該如何出現和消失以及應該形成什麼樣的模式的規則。這些微小的精靈被稱爲粒子。你可以使用它們爲遊戲製作各種特效。
使用 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);
}
製作粒子
參數:
名稱 | 類型 | 默認值 | 描述 |
---|---|---|---|
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://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.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://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.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>