cocos creator粒子不变色_Cocos Creator 3D 粒子系統初戰： 不要錢的酷炫火焰拿走不謝 !...

五維：技術經理，10 年編程經驗，專注遊戲領域，不斷進擊財富自由。分享實用的教程、經驗、源碼、心得！

**

先展示一下最終效果：**

最終效果

後邊圖片挺多的，使用流量看文章的，祝好運。

你聽說過 5 毛錢特效嗎 ?

我是個電視迷，在讀大學的時候，經常通宵刷劇。

有很多引人入勝的情節，搭配着粗製濫造的特效。

所以我就經常會吐槽，" 我靠，這也太假了吧！"。

我就想啊，肯定是做後期的人水平不夠嘛，要是讓我來，肯定能做的吊炸天！

不能光是想啊，我還真的付出了實際行動，

我買了一本《After Effects CS3 從入門到精通》，打算啃下來，然後去教育教育他們。

然而，半個月過去了，我還在望着書發呆，

這個時候，我再刷劇的時候，就覺得，" 嗯，這個特效也還挺好的 ..."。

我成功的做到了 "21 天，從入門到放棄 "。

最新一直在學習 Cocos Creator 3D，發現了引擎自帶的粒子系統。

我心中的小火苗又燃燒起來了，哥們當年只是暫時隱忍而已，終於到了我反擊的時候了！

5 毛錢-火焰特效-方法 1新建一個粒子系統，取名 Fire1。

創建粒子系統

默認的粒子系統效果通過觀察現實中的火焰，我們其實可以認爲，火焰的運動軌跡是從一個點生成，然後不斷向上運動的，根據這個規律，我們先對發射器模塊的參數進行調整。展開 發射器模塊 (ShapeModule) 。

將 粒子發射器半徑 (Radius) 設置爲 0.2，默認值是 1，我們不需要那麼粗的發射器。

將 開合角度 (Angle) 設置爲 0，默認值是 25，讓圓錐形的發射器變成圓柱形的發射器。

發射器模塊 (ShapeModule) 設置

此時粒子發射器變成了半徑爲 0.2 的圓柱，粒子在圓柱下方隨機產生。

有小夥伴說了，這哪裏是火焰啊！

別急，這纔剛開始呢！現在可以看到粒子是不斷向上飛的，彷彿沒有盡頭一樣，我們來調整一下主模塊的參數。

將 粒子初始速度 (StartSpeed) 設置爲 3，默認值爲 5，這樣可以降低粒子的速度，也可以間接控制火焰的高度。

將 粒子生命週期 (StartLifetime) 設置爲 0.8，默認值爲 5，這是粒子從生成到消失的時間，可以通過其控制火焰的高度。注意不要和 粒子系統運行時間 (Duration) 。

將 粒子系統運行時間 (Duration) 設置爲 1，默認值是 5。火焰是不斷循環的，不需要那麼久的運行時間。

將 每秒發射的粒子數 (RateOverTime) 設置爲 40，默認值是 10. 粒子太少了的話，達不到燃燒的效果。

將 粒子初始大小 (StartSize) 選擇兩個常數的方式，設置爲 0.5~0.8，這樣粒子的大小就會在 0.5~0.8 這個範圍內隨機。

粒子主模塊設置

注意 : 整個粒子系統運行的時間是由 粒子系統運行時間 (Duration) 和 粒子生命週期 (StartLifetime) 加在一起的。

有興趣的小夥伴可以看一下，如果把 loop 選項去掉，總體的運行時間是接近 1。8 秒的。

勾選 大小模塊 (SizeOvertimeModule)，我們來設置一下火焰粒子的大小變化。讓粒子從生成到消失慢慢變小。

怎麼樣 ? 現在有點感覺了吧！不過我們還要設置一下顏色。勾選 顏色模塊 (ColorOverLifetimeModule)，我們來設置一下火焰色顏色。

選擇 漸變模式 (gradient)，設置爲由黃到紅的透明的漸變色。

讓我們來看一下最終效果

接下來然我介紹一下另外一種火焰的製作方法。

5 毛錢-火焰特效-方法 2首先，我請 UI 小姐姐做了一張火焰的圖片，是這樣的。

新建材質，取名叫 FireMaterial。

可以看到，可供粒子系統使用的 Effect 有紅框中的三種，這裏我們要使用的就是 builtin-particle。builtin-particle: 提供給粒子系統的 渲染模塊 (Renderer)中的 ParticleMaterial 使用，當使用 cpu 渲染時，必須使用此 Effect，這個也是默認選項。

builtin-particle-gpu: 提供給粒子系統的 渲染模塊 (Renderer) 中的 ParticleMaterial 使用，當使用 gpu 渲染時，必須使用此 Effect。

builtin-particle-trail: 提供給粒子系統的 渲染模塊 (Renderer) 中的 TrailMaterial 使用。然後，我們把美術小姐姐準備好的圖片拖到 MainTexture 上，別忘記保存哦。

新建一個粒子系統，取名 Fire2，展開 渲染模塊 (Renderer) ，將材質 FireMaterial 拖入到 ParticleMaterial 中。

我們想要的效果是，固定顯示四個序列圖中的隨機一張，勾選 貼圖動畫模塊 (TextureAnimationModule)，通過對材質的觀察，我們可以看到圖片是 2*2 的序列圖。

將 橫向貼圖幀數 (NumTilesX) 設置爲 2。

將 縱向貼圖幀數 (NumTilesY) 設置爲 2。

將一個生命週期內播放幾次循環 (CycleCount)設置爲 1，默認值 0.

將 一個週期內動畫播放的幀與時間變化曲線 (FrameOverTime) 選擇兩個常數的方式，設置爲 0~3，這樣初始幀就會在 4 個序列中隨機。

貼圖動畫模塊 (TextureAnimationModule) 設置

展開 發射器模塊 (ShapeModule) ，將 粒子發射器半徑 (Radius) 設置爲 0，因爲我們希望火焰從一個點內產生，而不是一個大的範圍。

接下來對 主模塊 進行設置。將 粒子系統運行時間 (Duration) 設置爲 1，默認值是 5。火焰是不斷循環的，不需要那麼久的運行時間。

將 粒子系統所能生成的最大粒子數量 (Capacity) 設置爲 30，默認值是 100。

將 每秒發射的粒子數 (RateOverTime) 設置爲 30，默認值是 10. 粒子數量太多太少了都達不到預期的效果。

將 粒子生命週期 (StartLifetime) 選擇兩個常數的方式，設置爲 0.3~0.4，火焰的粒子不需要運行太久。

將 粒子初始速度 (StartSpeed) 設置爲 0.1，默認值爲 5，讓火焰有微微跳動的感覺。

將 粒子初始大小 (StartSize) 選擇兩個常數的方式，設置爲 0.5~0.8，這樣粒子的大小就會在 0.5~0.8 這個範圍內隨機。

將 StartRotation(StartRotation) 選擇兩個常數的方式，設置爲-30~308，給粒子添加隨機不同的旋轉角度。

將 粒子受重力影響的係數 (GravityModifier) 設置爲-1，火焰應該是向上漂浮的，所以我們給他一個向上的重力系數。

此時可以看到，現在有點像火焰的感覺了，不過火焰並不是向上運動的，而是在自己的座標系內向着 Y 軸正方向運動的，這顯然不是我們想要的效果。將 控制粒子座標計算所在的座標系 (SimulationSpace) 設置爲 World，默認是 Local，這樣火焰的運動就就在使用世界座標系了。

來，看看療效

主模塊參數設置最後一步，給火焰上上色，勾選 顏色模塊 (ColorOverLifetimeModule)，調節一個你需要的顏色。

通過，調節不同的顏色參數，可以達到很多不同的火焰特效。

熱情洋溢

來自冥界的紫焰

冷冽冰焰

要想把火焰效果做的完美，我們還需要，做一些錦上添花的優化，比如不斷升起的火星，忽明忽暗的火光，這樣纔會更逼真。

不斷升起的火星新建粒子系統，命名爲 Spark。

展開 發射器模塊 (ShapeModule) 。將 粒子發射器半徑 (Radius) 設置爲 0.2，讓發射器的半徑和火焰的半徑差不多就可以了。

將 開合角度 (Angle) 設置爲 0，讓圓錐形的發射器變成圓柱形的發射器。

主模塊設置將 粒子系統運行時間 (Duration) 設置爲 1，保持和火焰一致就好。

將 粒子系統所能生成的最大粒子數量 (Capacity) 設置爲 20，火星的數量不宜過多。

將 每秒發射的粒子數 (RateOverTime) 設置爲 20。

將 粒子生命週期 (StartLifetime) 選擇兩個常數的方式，設置爲 0.3~0.5，火星生成之後大概 0.3~0.5 秒就會消失。

將 粒子初始大小 (StartSize) 選擇兩個常數的方式，設置爲 0.08~0.12，火星的尺寸可以設置的小一點。

將 粒子初始速度 (StartSpeed) 設置爲 8，默認值爲 7，讓火星能達到的最大高度稍微高過火焰就好。

最後一步，調節一下火星的顏色，勾選 顏色模塊 (ColorOverLifetimeModule)，具體顏色可根據實際情況隨意調節。

由黃變紅的漸變色看一下火星的效果：

火星效果結合火焰一起的效果：

配合上火星的火焰效果

配合上火星的火焰效果

忽明忽暗的火光新建粒子系統，命名爲 Light。

展開 發射器模塊 (ShapeModule) 。

將 粒子發射器半徑 (Radius) 設置爲 0.01，火光和火星不同，只需要讓它在很小的方位內生成就行了。主模塊 設置。將 粒子系統運行時間 (Duration) 設置爲 1。

將 粒子系統所能生成的最大粒子數量 (Capacity) 設置爲 5，火光只需要很少的數量不斷生成就可以了。

將 每秒發射的粒子數 (RateOverTime) 設置爲 5。

將 粒子初始速度 (StartSpeed) 設置爲 0，火光不需要運動，只需要在原地就好。

將 粒子生命週期 (StartLifetime) 選擇兩個常數的方式，設置爲 0.2~0.5，讓粒子最長的生命週期比最短的還要大一倍，能最大程度感覺到閃動的效果。

將 粒子初始大小 (StartSize) 選擇兩個常數的方式，設置爲 1~2，以生成不同大小的火光。

將 粒子初始顏色 (StartColor) 設置爲接近火焰的顏色。

火光成品效果：

閃動的火光效果

Show Time：

最終效果

最後的話

一頓操作猛如虎，這樣，只值 5 毛錢的火焰特效就完成啦！

Cocos Creator 3D 的粒子系統真心非常強大，理論上可以實現各式各樣的牛逼效果，

作爲拋磚引玉的 5 毛錢特效，希望能引來更多小夥伴的作品出來！

等你來炫技！

奧利給！

工程使用 Cocos Creator 3D 1.2 製作，需要的朋友可以點擊「閱讀原文」進入作者的公衆號獲取！

我要拉票了

五維剛開始寫文章不久，文筆還很生澀，我會努力寫得更好，把更有用的知識分享給大家。

如果你覺得這篇文章對你有用，受到一點點啓發，請三連擊，在看，點贊，轉發，支持一下五維！

“我是五維，一個進擊財富自由的程序猿”

以上是由 Cocos 開發者 *五維 *分享的優質技術教程，此文同時參加了 Cocos 中文社區有獎徵稿活動，活動正在火熱進行中，最後提交作品日期爲 11 月 18 日，歡迎大家積極參與喲！

同時也歡迎各位開發者點擊【閱讀原文】查看原文，爲作者點贊，與作者進行交流學習！