初學粒子系統

• • 粒子系統簡介
  • 粒子系統的元件（ParticlreSystem）
  • ParticleSystem屬性
  • 如何用代碼控制粒子
  • 一款免費制作粒子的工具
  • 用粒子實作煙花效果

粒子系統簡介

粒子系統是指計算機圖形學中模拟特定現象的技術，它在模仿自然現象、實體現象及空間扭曲上具備得天獨厚的優勢，能為我們實作一些真實自然而又帶有随機性的效果（如爆炸、煙花、水流）提供了友善。

粒子系統的元件（ParticlreSystem）

該元件是用來讀取 粒子資源 資料，并且對其進行一系列例如播放、暫停、銷毀等操作。

ParticleSystem屬性

屬性	功能說明
Preview	在編輯器模式下預覽粒子，啟用後選中粒子時，粒子将自動播放
Play On Load	如果設定為 true 運作時會自動發射粒子
Auto Remove On Finish	粒子播放完畢後自動銷毀所在的節點
File Plist	格式的粒子配置檔案
Custom	是否自定義粒子屬性。開啟該屬性後可自定義以下部分粒子屬性
Sprite Frame	自定義的粒子貼圖
Duration	發射器生存時間，機關秒，-1 表示持續發射
Emission Rate	每秒發射的粒子數目
Life	粒子的運作時間及變化範圍
Total Particle	粒子最大數量
Start Color	粒子初始顔色
Start Color Var	粒子初始顔色變化範圍
End Color	粒子結束顔色
End Color Var	粒子結束顔色變化範圍
Angle	粒子角度及變化範圍
Start Size	粒子的初始大小及變化範圍
End Size	粒子結束時的大小及變化範圍
Start Spin	粒子開始自旋角度及變化範圍
End Spin	粒子結束自旋角度及變化範圍
Source Pos	發射器位置
Pos Var	發射器位置的變化範圍。（橫向和縱向）
Position Type	粒子位置類型，包括 FREE、RELATIVE、GROUPED 三種。詳情可參考 PositionType API
Emitter Mode	發射器類型，包括 GRAVITY、RADIUS 兩種。詳情可參考 EmitterMode API
Gravity	重力。僅在 Emitter Mode 設為 GRAVITY 時生效
Speed	速度及變化範圍。僅在 Emitter Mode 設為 GRAVITY 時生效
Tangential Accel	每個粒子的切向加速度及變化範圍，即垂直于重力方向的加速度。僅在 Emitter Mode 設為 GRAVITY 時生效
Radial Accel	粒子徑向加速度及變化範圍，即平行于重力方向的加速度。僅在 Emitter Mode 設為 GRAVITY 時生效
Rotation Is Dir	每個粒子的旋轉是否等于其方向。僅在 Emitter Mode 設為 GRAVITY 時生效
Start Radius	初始半徑及變化範圍，表示粒子發射時相對發射器的距離。僅在 Emitter Mode 設為 RADIUS 時生效
End Radius	結束半徑。僅在 Emitter Mode 設為 RADIUS 時生效
Rotate Per S	粒子每秒圍繞起始點的旋轉角度及變化範圍。僅在 Emitter Mode 設為 RADIUS 時生效
Src Blend Factor	混合顯示兩張圖檔時，原圖檔的取值模式。
Dst Blend Factor	混合顯示兩張圖檔時，目标圖檔的取值模式。

組建上的屬性都有注解

如何用代碼控制粒子

外面元件是在想要的粒子效果的節點上加一個ParticleSystem元件。

一款免費制作粒子的工具

如果你不滿足組建的設定也可以用軟體制作自己喜歡的粒子效果，網址：http://www.effecthub.com/particle2dx

用粒子實作煙花效果

代碼

cc.Class({
    extends: cc.Component,
    properties: {
        //聲明預制體
        fireworks:cc.Prefab,
    },
    start () {
        // 煙花對象池
        this.fireworksPool = new cc.NodePool();
        // 預先放20個煙花進去
        var initCount = 20;
        for(var i = 0;i < initCount;i ++){
            //建立煙花節點
            var fireworks = cc.instantiate(this.fireworks);
            //通過put接口放入對象池
            this.fireworksPool.put(fireworks);
        }
        // 計時器，從第0秒開始，每隔1秒放一個，放15+1=16次
        this.schedule(this.createfireworks,1,15,0);
    },
 
    // 制造煙花
    createfireworks(){
        // 通過size接口判斷對象池中是否有空閑的對象
        if(this.fireworksPool.size() > 0) {
            var fireworks = this.fireworksPool.get();
        }
        else {
        //如果沒有空閑對象，也就是對象池中備用對象不夠時，我們就用 cc.instantiate 重新建立
            var fireworks = cc.instantiate(this.fireworks);
        }
        // 設定父節點
        fireworks.parent = this.node;
        // 随機位置（960 * 640）
        fireworks.x =  -450+960 * Math.random();
        fireworks.y =  -320+640 * Math.random();
        // resetSystem()函數重置發射器，開始發射粒子;
        fireworks.getComponent(cc.ParticleSystem).resetSystem();
        // 4秒後自動回收
        this.scheduleOnce(function(){
            // 回收之前stopSystem();
            fireworks.getComponent(cc.ParticleSystem).stopSystem();
            this.fireworksPool.put(fireworks);
        },4);
    },


});

           

粒子組建的調試如下

效果圖如下