iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
1
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具系列 第 22

[PixiJS - Day-22] PixiJS 粒子效果

  • 分享至 

  • twitterImage
  •  

分作兩個部分來提,一個是官網範例介紹的PIXI.particles.ParticleContainer 類別,另一個是 Pixi Particles,粒子系統


ParticleContainer

DEMOS - Particle Container:
官網上的粒子範例,看到的可能是下方 圖1圖2

圖1 - WebGL模式:10000個 sprites,隨機顏色
alt

圖1 - 非WebGL模式:100個 sprites
alt

畫面不同的主要原因是:

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/

alt

範例的數量不會很多,看過每個範例的程式碼比較容易理各個參數的差異

使用範例:

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:
alt
http://pixijs.io/pixi-particles-editor/
可測試粒子效果與匯出 json 功能


上一篇
[PixiJS - Day-21] 看起來像用了骨塊工具的 Strip 範例 與 Spine 範例
下一篇
[PixiJS - Day-23] 將 PixiJS 的畫面匯出
系列文
PixiJS,方便好用的 WebGL 內容產生工具31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言