分作兩個部分來提,一個是官網範例介紹的PIXI.particles.ParticleContainer 類別,另一個是 Pixi Particles,粒子系統
ParticleContainer
DEMOS - Particle Container:
官網上的粒子範例,看到的可能是下方 圖1 或 圖2
圖1 - WebGL模式:10000個 sprites,隨機顏色
畫面不同的主要原因是:
16. var totalSprites = app.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100;
如果目前是 WebGL 模式,sprite 數量設定為 10000
非 WebGL 模式時,sprite 數量設定為 100
範例裡沒特別提到 canvas 模式下沒有隨機顏色的效果的原因,
但應該是 PIXI.particles.ParticleContainer 在 canvas 模式下運作的關係
程式碼:
4. var sprites = new PIXI.particles.ParticleContainer(10000, {
5.     scale: true,
6.     position: true,
7.     rotation: true,
8.     uvs: true,
9.     alpha: true
10. });
...
18. for (var i = 0; i < totalSprites; i++) {
19. 
20.     // create a new Sprite
21.     var dude = PIXI.Sprite.fromImage('required/assets/tinyMaggot.png');
...
51.     sprites.addChild(dude);
52. }
範例裡使用 PIXI.particles.ParticleContainer 當做容器
使用上與 PIXI.Container 類別差不多,初始後把可視物件加進去
第四行初始化的時候,設定了 maxSize 為 10000,用作分配 buffer 使用
PIXI.particles.ParticleContainer 文件:
http://pixijs.download/dev/docs/PIXI.particles.ParticleContainer.html
The ParticleContainer class is a really fast version of the Container built solely for speed, so use when you need a lot of sprites or particles. The tradeoff of the ParticleContainer is that most advanced functionality will not work.
大意是說:
當要使用大量的 sprites 或 particles 時,可使用 PIXI.particles.ParticleContainer 類別來當做容器。PIXI.particles.ParticleContainer 運算很快,但一些進階方法可能會無法使用。
Pixi Particles:
網址:http://pixijs.io/pixi-particles/docs/
範例的數量不會很多,看過每個範例的程式碼比較容易理各個參數的差異
使用範例:
var emitter = new PIXI.particles.Emitter(
    container,
    [PIXI.Texture.fromImage('image.jpg')],
    {
        alpha: {
            start: 0.8,
            end: 0.1
        },
        scale: {
            start: 1,
            end: 0.3
        },
        color: {
            start: "fb1010",
            end: "f5b830"
        },
...
        lifetime: {
            min: 0.5,
            max: 0.5
        },
        frequency: 0.008,
        emitterLifetime: 0.31,
        maxParticles: 1000,
        pos: {
            x: 0,
            y: 0
        },
        addAtBack: false,
        spawnType: "circle",
        spawnCircle: {
            x: 0,
            y: 0,
            r: 10
        }
設定粒子發射器的容器、粒子的圖像、粒子持續時間、發送頻率、數量等
PIXI.particles.Emitter 文件:
http://pixijs.io/pixi-particles/docs/PIXI.particles.Emitter.html
PixiParticlesEditor:
http://pixijs.io/pixi-particles-editor/
可測試粒子效果與匯出 json 功能