簡(jiǎn)介ParticleDesigner_windows版是一款專門(mén)面向Cocos2d-x開(kāi)發(fā)者的Windows平臺(tái)粒子效果編輯器其核心價(jià)值在于用可視化操作替代繁瑣的手工編碼幫助開(kāi)發(fā)者快速設(shè)計(jì)火焰、煙霧、星光、爆炸等動(dòng)態(tài)粒子特效并一鍵導(dǎo)出項(xiàng)目可直接使用的plist粒子配置。壓縮包共包含46個(gè)文件主程序exe與多個(gè)dll動(dòng)態(tài)庫(kù)保證軟件開(kāi)箱即用14個(gè)png文件可充當(dāng)粒子紋理素材或效果預(yù)覽圖13個(gè)plist文件則是可直接復(fù)用的粒子效果配置另有xml界面配置、tga和raw等輔助資源整體包體僅2.87MB輕量便攜、環(huán)境配置簡(jiǎn)單。目前已有476人學(xué)習(xí)下載。工具提供實(shí)時(shí)預(yù)覽與即時(shí)調(diào)整能力開(kāi)發(fā)者在屬性面板中調(diào)節(jié)發(fā)射速度、粒子大小、生命周期、重力、旋轉(zhuǎn)速度、顏色變化等參數(shù)時(shí)畫(huà)面會(huì)同步反饋設(shè)計(jì)完成后導(dǎo)出的plist與配套紋理可直接整合到Cocos2d-x項(xiàng)目的ParticleSystemQuad中快速加載播放顯著縮短特效調(diào)試周期也適合作為初學(xué)粒子系統(tǒng)的演示案例幫助提升游戲畫(huà)面的視覺(jué)沖擊力與表現(xiàn)力。 做游戲開(kāi)發(fā)這些年cocos2dx 的粒子系統(tǒng)我用了不少粒子編輯工具 ParticleDesigner 的 windows 版更是我從一堆資源里篩出來(lái)后一直留在工作流里的一個(gè)。很多新手做特效一上來(lái)就想著手寫(xiě) CCParticleSystem 的代碼或者找?guī)锥尉W(wǎng)上的 plist 直接塞進(jìn)項(xiàng)目結(jié)果不是效果和預(yù)期差太多就是性能扛不住。這篇文章就從 ParticleDesigner windows 版入手把粒子效果從原理到落地到 cocos2dx 的完整鏈路講清楚適合正在用 cocos2dx 做項(xiàng)目、又對(duì)粒子特效只能靠運(yùn)氣調(diào)參數(shù)的開(kāi)發(fā)者和 TA 朋友。1. ParticleDesigner windows版它到底是什么以及為什么值得用1.1 工具定位與核心價(jià)值ParticleDesigner 是 71squared 推出的粒子特效編輯工具最早在 mac 平臺(tái)很流行后來(lái)才有了 windows 版。它和那些在線粒子生成器最大的區(qū)別在于它是一個(gè)真正意義上的桌面級(jí)編輯器能直接對(duì)接 cocos2dx、cocos2d-iphone、SpriteKit、Unity 等主流引擎。對(duì) windows 環(huán)境下的 cocos2dx 開(kāi)發(fā)者來(lái)說(shuō)這個(gè)版本直接彌補(bǔ)了工具鏈的短板——以前想調(diào)出一個(gè)像樣的粒子效果只能在 mac 上做或者靠純代碼盲調(diào)現(xiàn)在 windows 上也能可視化操作了。它的核心工作方式是這樣的你把粒子效果的所有參數(shù)通過(guò)圖形界面調(diào)節(jié)好預(yù)覽滿意之后導(dǎo)出成一個(gè) plist 文件加上一張粒子紋理圖游戲運(yùn)行時(shí)由 cocos2dx 的粒子系統(tǒng)讀取并播放。這套流程把美術(shù)、策劃和程序之間的協(xié)作成本降到了最低策劃能直接上手調(diào)特效美術(shù)不用等程序反復(fù)編譯看效果程序也不用一行行去猜參數(shù)。1.2 為什么不用代碼手寫(xiě)粒子cocos2dx 自帶 CCParticleSystem 以及后續(xù)版本中的 ParticleSystemQuad 等接口理論上你完全可以手動(dòng)創(chuàng)建粒子對(duì)象再一個(gè)個(gè)設(shè)置屬性。但手寫(xiě)最難受的點(diǎn)是什么看不到實(shí)時(shí)效果。粒子系統(tǒng)的參數(shù)動(dòng)輒十幾個(gè)重力、速度、抖動(dòng)、顏色變化、旋轉(zhuǎn)、混合模式彼此之間還有聯(lián)動(dòng)。你改一個(gè) speed視覺(jué)上可能整個(gè)效果就從“火焰”變成了“流沙”。舉個(gè)實(shí)際例子我想做一個(gè)篝火效果代碼里把 gravity 設(shè)成 (0, -100)speed 設(shè)成 80life 設(shè)成 1.2編譯運(yùn)行之后發(fā)現(xiàn)效果完全不像火反而像一團(tuán)往上飄的霧。于是再改參數(shù)再編譯再看來(lái)回十幾次可能也只是接近。這種方式的效率太低而且很難做出有層次的商業(yè)級(jí)特效。粒子編輯器的價(jià)值就是把“調(diào)參—預(yù)覽—調(diào)參”的循環(huán)壓縮到秒級(jí)你拖動(dòng)一個(gè)滑塊畫(huà)面立刻變化這才是做特效該有的節(jié)奏。1.3 支持導(dǎo)出格式與引擎適配ParticleDesigner 支持導(dǎo)出的格式包括 plist、texure atlas、代碼片段等。其中 plist 是 cocos2dx 最常用的格式文件里記錄了粒子的完整參數(shù)和紋理引用。運(yùn)行時(shí)cocos2dx 通過(guò) CCFileUtils 讀取 plist解析出參數(shù)后自動(dòng)創(chuàng)建粒子系統(tǒng)。有一點(diǎn)要注意cocos2d-x 的不同小版本對(duì) plist 的解析規(guī)則略有差異尤其是老版本和新版本之間。好在這個(gè)工具導(dǎo)出的 plist 兼容性做得不錯(cuò)主流的 cocos2d-x 3.x 版本都能直接加載。如果你用的引擎版本比較老遇到加載失敗的情況先檢查鍵名比如“maxParticles”和“emitterType”這幾個(gè)核心字段在目標(biāo)版本中是否被支持。2. 粒子系統(tǒng)的核心概念與參數(shù)拆解2.1 粒子的本質(zhì)是什么粒子系統(tǒng)本質(zhì)上是一群小型精靈在屏幕空間中的集合。每個(gè)粒子都擁有獨(dú)立的生命周期、位置、速度、顏色、尺寸和透明度等屬性同時(shí)受到全局的重力、阻尼、風(fēng)場(chǎng)之類的影響。ParticleDesigner 的職責(zé)就是把這一堆復(fù)雜屬性整理成可視化的滑塊和面板讓操作者像調(diào)濾鏡一樣調(diào)特效。理解粒子系統(tǒng)的關(guān)鍵是“少量參數(shù) 大量隨機(jī)”。引擎不會(huì)讓你為每個(gè)粒子單獨(dú)指定屬性而是通過(guò)一組基準(zhǔn)參數(shù)和方差Var來(lái)控制整群粒子的分布。比如 life 是 1 秒lifeVar 是 0.3 秒那么每個(gè)粒子的實(shí)際存活時(shí)間會(huì)在 0.7 到 1.3 秒之間隨機(jī)取值。這樣粒子群體呈現(xiàn)出自然的參差感而不是整齊劃一視覺(jué)上才不“死板”。2.2 發(fā)射器類型重力模式 vs 半徑模式ParticleDesigner 中的發(fā)射器類型分兩種重力模式和半徑模式。重力模式下粒子按照給定的重力向量運(yùn)動(dòng)適合做火焰、煙霧、雨滴、噴泉這類有明顯方向性的效果。半徑模式下粒子圍繞發(fā)射中心做旋轉(zhuǎn)和徑向運(yùn)動(dòng)適合做星云、光環(huán)、螺旋上升、能量球之類的效果。我建議在動(dòng)手調(diào)參之前先想清楚你要做的效果屬于哪一類。很多新人拿到工具就隨便選了一個(gè)模式想把火焰效果做出來(lái)卻發(fā)現(xiàn)粒子怎么都在打轉(zhuǎn)其實(shí)就是模式選錯(cuò)了。模式選對(duì)后續(xù)的調(diào)整才有效率。2.3 關(guān)鍵參數(shù)對(duì)照表參數(shù)作用說(shuō)明我的常用經(jīng)驗(yàn)值maxParticles粒子數(shù)量上限直接影響視覺(jué)效果和性能火焰 150300漫天星光可到 500duration發(fā)射持續(xù)時(shí)間-1 表示無(wú)限持續(xù)循環(huán)效果設(shè)為 -1emissionRate每秒生成的粒子數(shù)80200視效果密度調(diào)整angle / angleVar發(fā)射角度和隨機(jī)角度范圍火焰向上 90°角度范圍 15°30°speed / speedVar初始速度和隨機(jī)偏差100200具體看效果gravity重力加速度的 x/y 分量火焰向上飄可設(shè) (0, -60)life / lifeVar粒子存活時(shí)間和隨機(jī)偏差0.6s1.5s偏差取 20%40%startSize / endSize起始和結(jié)束尺寸火焰從 40 逐漸縮小到 0startColor / endColor起始和結(jié)束顏色火焰從橙黃過(guò)渡到透明紅blendFunc混合模式常見(jiàn) src_alpha one發(fā)光類效果用加法混合每個(gè)參數(shù)后面的 Var 值非常關(guān)鍵。我一般會(huì)把 Var 調(diào)到基礎(chǔ)參數(shù)的 20%50% 之間這樣粒子群能看到明顯的隨機(jī)差異但又不會(huì)失控。2.4 紋理選擇幾乎決定效果上限很多人忽略粒子紋理的重要性一上來(lái)就用默認(rèn)白點(diǎn)然后瘋狂調(diào)參數(shù)結(jié)果怎么調(diào)都差點(diǎn)意思。實(shí)際上粒子紋理對(duì)最終效果的影響不亞于參數(shù)。火焰效果用帶邊緣衰減的軟圓紋理配合加法混合視覺(jué)效果會(huì)提升一個(gè)量級(jí)而直接用硬邊白點(diǎn)出來(lái)的效果就像一堆亮片缺乏質(zhì)感。ParticleDesigner 自帶了一些默認(rèn)紋理也支持外部導(dǎo)入。項(xiàng)目里建議由美術(shù)統(tǒng)一出一套粒子紋理png 格式尺寸控制在 64×64 或 128×128 以內(nèi)。粒子數(shù)量動(dòng)輒幾百紋理太大對(duì)內(nèi)存帶寬和紋理緩存都非常不友好移動(dòng)設(shè)備上尤其明顯。3. Windows版實(shí)操?gòu)陌惭b到導(dǎo)出 plist3.1 安裝與運(yùn)行環(huán)境準(zhǔn)備ParticleDesigner windows 版屬于綠色軟件類型下載解壓后直接運(yùn)行可執(zhí)行文件就能用不需要復(fù)雜的安裝流程。不過(guò)有兩點(diǎn)要注意一是部分運(yùn)行環(huán)境依賴 Visual C Redistributable 運(yùn)行庫(kù)如果啟動(dòng)時(shí)報(bào)缺失 dll先補(bǔ)裝對(duì)應(yīng)的運(yùn)行庫(kù)版本二是 windows 上的殺毒軟件偶爾會(huì)把工具生成的臨時(shí)文件誤報(bào)或刪除我遇到過(guò)一兩次把工具目錄加入白名單就能解決。另外如果你是在跨平臺(tái)項(xiàng)目里用這個(gè)工具建議 windows 和 mac 兩邊都準(zhǔn)備一份。雖然 windows 版功能已經(jīng)很完整但 mac 版在某些細(xì)節(jié)操作上略有差異后面會(huì)講到。3.2 創(chuàng)建第一個(gè)粒子打開(kāi)工具后新建一個(gè)粒子項(xiàng)目。我習(xí)慣先選重力模式把 maxParticles 設(shè)為 100duration 設(shè)為 -1這樣粒子會(huì)持續(xù)發(fā)射。選擇一張軟圓紋理把 emissionRate 調(diào)成每秒 20 左右這時(shí)候你會(huì)看到稀疏的粒子從發(fā)射點(diǎn)冒出來(lái)。這個(gè)階段先不要急著調(diào)細(xì)節(jié)重點(diǎn)是把基礎(chǔ)流程跑通感受一下參數(shù)和預(yù)覽畫(huà)面的對(duì)應(yīng)關(guān)系。預(yù)覽區(qū)會(huì)實(shí)時(shí)顯示粒子狀態(tài)左下角還有一些統(tǒng)計(jì)信息比如當(dāng)前粒子數(shù)和幀率。編輯器本身性能開(kāi)銷不大一般電腦都能流暢跑。3.3 從火焰效果出發(fā)調(diào)一次完整參數(shù)我用火焰效果帶大家走一遍完整參數(shù)調(diào)整流程發(fā)射器類型選擇“重力模式”這是火焰最匹配的模式。maxParticles 設(shè)為 200保證火焰的密度。duration 保持 -1火焰需要持續(xù)燃燒。angle 設(shè)為 90 度向上發(fā)射angleVar 設(shè)為 20 度讓火焰有自然擴(kuò)散。speed 設(shè)為 120speedVar 設(shè) 30保證粒子向上飄且速度有差異。重力設(shè)為 x0、y-80意思是在粒子向上飛的過(guò)程中給它一個(gè)反向的力模擬火焰上升后減速的感覺(jué)。life 設(shè)為 0.8 秒lifeVar 設(shè) 0.3 秒讓粒子在 0.51.1 秒之間隨機(jī)消亡。startSize 設(shè) 40startSizeVar 設(shè) 10endSize 設(shè) 0讓粒子從大變小直到消失。startColor 選橙黃色透明度調(diào)到 255 左右endColor 選紅色透明度逐漸降至 0?；旌夏Ｊ竭x擇“src_alpha one”的加法混合這樣多個(gè)粒子疊加時(shí)會(huì)產(chǎn)生亮部模擬火焰的輝光感。完成這一步預(yù)覽區(qū)里已經(jīng)能看到一個(gè)比較像樣的火焰了。如果覺(jué)得太亮把 endColor 的透明度再降一點(diǎn)如果粒子散得太開(kāi)把 angleVar 從 20 調(diào)到 10。做火焰的訣竅就是中心亮、邊緣漸暗、向上飄散、有隨機(jī)抖動(dòng)這四點(diǎn)都能在參數(shù)里找到對(duì)應(yīng)位置。3.4 編輯器預(yù)覽與真實(shí)場(chǎng)景的差異編輯器預(yù)覽的背景默認(rèn)是深色的這會(huì)導(dǎo)致一個(gè)判斷偏差很多加法混合的粒子在深色背景下非常漂亮放到游戲的真實(shí)亮色場(chǎng)景里卻發(fā)白發(fā)灰甚至看不清。所以調(diào)到差不多之后建議把預(yù)覽背景切換成和實(shí)際場(chǎng)景接近的顏色再確認(rèn)一遍混合模式和粒子整體的明暗關(guān)系。我在實(shí)際項(xiàng)目中吃過(guò)這個(gè)虧做了個(gè)很漂亮的粒子特效一放進(jìn)主界面就糊成一片后來(lái)把背景切成實(shí)際界面顏色再調(diào)才明白了問(wèn)題所在。4. 從ParticleDesigner到cocos2dx的集成落地4.1 導(dǎo)出 plist 與紋理資源在 ParticleDesigner 中點(diǎn)擊導(dǎo)出選擇 plist 格式工具會(huì)自動(dòng)生成一個(gè) plist 文件和一個(gè)紋理 png 文件。命名上建議保持一致比如 fire.plist 對(duì)應(yīng) fire.png這樣資源的對(duì)應(yīng)關(guān)系一目了然。cocos2dx 加載 plist 時(shí)需要讀取 plist 里 texture 字段指定的紋理路徑。如果你的 plist 里寫(xiě)的是“fire.png”那么運(yùn)行時(shí)紋理文件必須能被引擎在對(duì)應(yīng)的相對(duì)路徑下找到。最穩(wěn)妥的做法是把 plist 和 png 一起放到 Resources 下的同一個(gè)子目錄里二者保持平級(jí)這樣基本不會(huì)出現(xiàn)找不到紋理的問(wèn)題。4.2 cocos2dx 加載代碼與關(guān)鍵寫(xiě)法在 cocos2d-x 3.x 中加載一個(gè)粒子系統(tǒng)非常簡(jiǎn)單auto particle ParticleSystemQuad::create(particles/fire.plist); particle-setPosition(visibleSize.width / 2, visibleSize.height / 2); particle-setAutoRemoveOnFinish(true); this-addChild(particle, 5);如果你在 plist 里把 duration 設(shè)成了 -1粒子會(huì)永久發(fā)射此時(shí) setAutoRemoveOnFinish 參數(shù)其實(shí)不會(huì)觸發(fā)移除因?yàn)榱Ｗ佑肋h(yuǎn)在補(bǔ)發(fā)。如果你希望粒子播完一次后消失就確保 duration 是有限值并且在 Finished 回調(diào)或定時(shí)器里手動(dòng) removeFromParent。老版本 cocos2d-x 對(duì) plist 的解析更嚴(yán)格如果加載報(bào)錯(cuò)可以先把 plist 文件用文本編輯器打開(kāi)確認(rèn)關(guān)鍵字段名是否和引擎預(yù)期的“cocos2d”系列鍵名一致。部分工具導(dǎo)出的鍵名格式和舊版引擎不完全匹配需要手動(dòng)修正。4.3 運(yùn)行時(shí)性能與合批優(yōu)化粒子系統(tǒng)對(duì)性能的影響主要在兩點(diǎn)粒子數(shù)量和各粒子是否共享紋理。每個(gè)粒子每幀都要更新位置、顏色、透明度等屬性粒子數(shù)越多CPU 消耗越大。我的經(jīng)驗(yàn)是移動(dòng)端單屏粒子總數(shù)控制在 500 以內(nèi)低端機(jī)再減半。編輯器里可以做得很大氣但真機(jī)上要?jiǎng)?wù)實(shí)。如果你的場(chǎng)景里有多個(gè)粒子系統(tǒng)盡量讓它們共用同一張紋理。引擎在渲染時(shí)如果多個(gè)粒子系統(tǒng)使用同一紋理可以進(jìn)入同一個(gè)批次Draw Call 數(shù)量會(huì)大幅減少。比如場(chǎng)景里有火把、火龍、火球三個(gè)效果可以讓美術(shù)把三種火焰所需的紋理合成一張圖集再分別作為粒子紋理使用。還有一個(gè)實(shí)用小技巧多次使用的粒子系統(tǒng)可以復(fù)用而不是頻繁創(chuàng)建銷毀。比如受擊飄字效果可以做一個(gè)對(duì)象池把粒子系統(tǒng)實(shí)例緩存起來(lái)需要時(shí)重新播放一次。5. 常見(jiàn)問(wèn)題與排查技巧實(shí)錄5.1 粒子在 cocos2dx 中完全不顯示這個(gè)問(wèn)題排在所有問(wèn)題之首。常見(jiàn)原因有三個(gè)plist 路徑寫(xiě)錯(cuò)、紋理路徑寫(xiě)錯(cuò)、plist 格式不兼容。路徑問(wèn)題很好排查直接用 CCFileUtils 的 getFileData 手動(dòng)讀取一下文件看能不能拿到數(shù)據(jù)。格式不兼容的話用新版本引擎重新生成一次或者手動(dòng)把鍵名替換成引擎支持的格式。5.2 導(dǎo)出后效果與編輯器預(yù)覽不一致前面講過(guò)背景色的影響還有一個(gè)容易被忽略的因素是混合模式。編輯器的繪制順序和引擎不完全一致如果粒子之間出現(xiàn)重疊疊加混合的結(jié)果會(huì)有細(xì)微差別。遇到這種情況先在編輯器里把背景改成和游戲界面一致再檢查混合模式最后再檢查粒子透明度是否在導(dǎo)出的 plist 中被正確記錄。5.3 粒子邊緣發(fā)虛或有鋸齒這是紋理邊緣沒(méi)有透明過(guò)渡導(dǎo)致的。解決辦法是使用帶羽化邊緣的軟紋理避免透明通道在邊緣處直接硬切。另外檢查紋理壓縮格式是否破壞了透明通道有些壓縮格式在移動(dòng)端會(huì)明顯劣化粒子邊緣這種情況需要改用不帶壓縮或無(wú)損壓縮的紋理格式。5.4 運(yùn)行幀率下降明顯先用引擎自帶的 stats 查看當(dāng)前 Draw Call 數(shù)量。如果 Draw Call 很多優(yōu)先檢查粒子系統(tǒng)是否使用了多張不同紋理。把所有粒子紋理合并成一張圖集或者統(tǒng)一采用某一張基礎(chǔ)紋理通常能立刻緩解。其次看粒子數(shù)量把 maxParticles 降低到 300 以內(nèi)很多卡頓都能解決。我碰到過(guò)一個(gè)比較隱蔽的問(wèn)題粒子系統(tǒng)創(chuàng)建后沒(méi)有正確釋放導(dǎo)致場(chǎng)景切換時(shí)舊粒子系統(tǒng)還掛在場(chǎng)景樹(shù)上。后來(lái)統(tǒng)一在場(chǎng)景退出時(shí)遍歷粒子節(jié)點(diǎn)并 clear 掉問(wèn)題才解決。所以如果粒子只播一次記得在播完后的回調(diào)里 removeFromParent。5.5 Windows版和小伙伴的兼容問(wèn)題如果團(tuán)隊(duì)里有人用 mac 版有人用 windows 版兩邊生成的 plist 文件在格式上是通用的可以互拷。但要注意如果美術(shù)在 mac 版里用了某個(gè)特有紋理預(yù)設(shè)導(dǎo)出時(shí)紋理資源要一并拷過(guò)來(lái)否則 windows 版打開(kāi)后紋理顯示異常。另外不同版號(hào)的工具在個(gè)別參數(shù)上可能有微小差異跨版本協(xié)作時(shí)最好統(tǒng)一版本避免參數(shù)含義出現(xiàn)偏差。6. 我實(shí)際使用中的一點(diǎn)心得用了這么多年粒子編輯工具最大的感受就是別把粒子特效當(dāng)成玄學(xué)。所有看起來(lái)驚艷的效果本質(zhì)上是紋理、混合模式和參數(shù)方差三者共同作用的結(jié)果。ParticleDesigner windows 版的優(yōu)勢(shì)在于把這三樣?xùn)|西全部可視化讓調(diào)參變得有據(jù)可查。我現(xiàn)在的工作流是這樣先在 ParticleDesigner 里把基礎(chǔ)效果調(diào)好導(dǎo)出 plist 后放進(jìn)項(xiàng)目的粒子模板庫(kù)里。后續(xù)做類似效果時(shí)直接復(fù)制模板再微調(diào)效率非常高。還有一個(gè)小習(xí)慣我每調(diào)好一個(gè)效果都會(huì)順手把關(guān)鍵參數(shù)截圖保存下來(lái)方便以后追溯。畢竟有些項(xiàng)目一隔就是半年再回來(lái)改特效時(shí)有參數(shù)截圖比打開(kāi)舊文件還要快。本文還有配套的精品資源點(diǎn)擊獲取