寫在前面

大家閱讀此文之前，可以先看一篇MiloYip的文章：用JavaScript玩轉(zhuǎn)游戲物理(一)運(yùn)動(dòng)學(xué)模擬與粒子系統(tǒng)，看完之后再看此文，更加容易理解。

MiloYip使用的粒子是canvas中繪制的圓，還有一些粒子效果是基于 像素級(jí)別的，如：火焰字 ，但是使用像素的計(jì)算成本太大，因?yàn)樾枰牧Ｗ訑?shù)量太多，甚至要配合一些nosie算法，如（perlin nosie），計(jì)算量太大。

所以一般會(huì)先設(shè)計(jì)好粒子的紋理（每個(gè)紋理假設(shè)是32*32，一個(gè)粒子就包含了九百多個(gè)像素了），這樣需要的粒子個(gè)數(shù)不多，計(jì)算量也不大，管理粒子的成本也不高（對(duì)粒子增刪改查）。

canvas globalCompositeOperation

粒子系統(tǒng)在什么時(shí)候最漂亮？晚上！所以在繪制紋理的時(shí)候，需要設(shè)置globalCompositeOperation 的值為lighter。其作用是：在圖形重疊的地方，顏色由兩種顏色值的加值來決定。

globalCompositeOperation 還有非常多的屬性可以設(shè)置，詳情見：w3school。

粒子系統(tǒng)

粒子系統(tǒng)的本質(zhì)其實(shí)就是粒子從發(fā)射到消失的過程。所以，可以立刻想到一些配置項(xiàng)目：

1.發(fā)射速度（每個(gè)粒子的速度、方向、角度范圍）

2.發(fā)射區(qū)域（定點(diǎn)發(fā)射，還是在某個(gè)區(qū)域發(fā)射）

3.重力場（你是在月球上發(fā)射，還是在地球上發(fā)射，還是太空的失重狀態(tài)下）

4.粒子紋理（你發(fā)射的是激光、還是五角星、還是煙霧）

5.紋理濾鏡（激光是紅色還是藍(lán)色）

6.發(fā)射頻率（你是一秒發(fā)射一次、還是一秒發(fā)射100次）

每個(gè)參數(shù)的變化都會(huì)導(dǎo)致呈現(xiàn)效果截然不同。

數(shù)學(xué)與物理

比如運(yùn)動(dòng)方向的獨(dú)立性，2維空間可以使用new Vector2(1,2)來描繪速度，把速度拆分成x和y方向，1代表x軸方向的速度，2代表y軸方向的速度

同樣，重力場也可以拆封成兩個(gè)方向。如new Vector2(0,0.98),0代表x軸方向的速度，0.98代表y軸方向的速度

簡單的積分思想：（如：速度是加速度在時(shí)間上的累加，路程是速度在時(shí)間上的累加等等）。

當(dāng)然，聽上去好像要會(huì)微積分才能寫粒子系統(tǒng)似的，但其實(shí)微積分根本體現(xiàn)不再程序里面，因?yàn)槌绦?游戲里面有core loop，loop里面干的事情就是積分… 比如：

tick: function () {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity.multiply(0.1));
    this.rotatingSpeed+=this.rotatingAcceleration;
    this.rotation += this.rotatingSpeed;
    this.alpha -= this.hideSpeed;
}

所以有這個(gè)思想就行，根本不需要會(huì)微積分 =  =！

Canvas UI小控件

整個(gè)編輯器的所有控件都是canvas寫的，感覺就三個(gè)詞：簡單、粗暴、直接。使用起來也非常方便。如，下面這個(gè)控制發(fā)射范圍、粒子、方向的控件：

使用控件的代碼：

var dirCtrl=new PE.CircleAdjust({
    min: 0,
    max: 50,
    rotation: -30,
    value: 10,
    angleRange:50,
    change: function (value,angle) {
        ps.setAngle(angle);
        ps.setSpeed(value);
    },
    renderTo: document.getElementById("emitAngleCtrl")
 
});

當(dāng)然這里不是否定dom寫控件，而是，有的時(shí)候canvas寫UI更具備優(yōu)勢。還有一些場景是dom寫控件無法實(shí)現(xiàn)的。（比如全局的濾鏡效果、波浪效果等，也就是跟像素有關(guān)，dom相對(duì)較弱）

其他

粒子編輯器，還使用了一些HTML5特性，比如拖拽、FileReader、和blob下載功能。如，基于blob封裝了一個(gè)工具函數(shù)用于下載文件：

Util.downloadFile=function(code, fileName) {
    if (window.URL.createObjectURL) {
        var fileParts = [code];
        var bb = new Blob(fileParts, {
            type: "text/plain"
        });
        var dnlnk = window.URL.createObjectURL(bb);
        var dlLink = document.createElement("a");
        dlLink.setAttribute("href", dnlnk);
        dlLink.setAttribute("download", fileName);
        dlLink.click();
    }
}

傳送門

demo: http://alloyteam.github.io/ParticleEditor/

github: https://github.com/AlloyTeam/ParticleEditor

ps:編輯器使用小測驗(yàn)：你能使用demo的粒子編輯器實(shí)現(xiàn)下面那只企鵝效果嗎？:)