如果你玩過一些游戲加載頁或者角色釋放技能時的特效一定見過那種彩色光帶繞著一個中心點不斷旋轉(zhuǎn)的畫面——紅橙黃綠青藍(lán)紫依次切換像是把彩虹擰成了一根麻花。這種效果在 Cocos 里做其實有好幾條路硬編碼貼圖序列幀、引擎自帶的 Tween 旋轉(zhuǎn)節(jié)點、或者直接上自定義 Shader。我自己的結(jié)論是貼圖序列幀最笨重Tween 旋轉(zhuǎn)只有形沒有色最值得學(xué)習(xí)的方案是在 Cocos 里寫一個彩色旋轉(zhuǎn) Shader一條代碼同時搞定旋轉(zhuǎn)、換色、流動還能讓美術(shù)直接調(diào)參數(shù)。這篇東西不是貼一段代碼就完事我想把整個思考過程、數(shù)學(xué)原理、Cocos Creator 3.x 和 2.x 的具體落地差異、真機上的性能坑都講清楚。無論你是想給加載界面加個動態(tài)背景還是給角色技能做光環(huán)特效或者單純想入門 Cocos Shader這篇文章都夠用。1. 先拆解需求“彩色旋轉(zhuǎn)”到底包含了哪幾層1.1 一個看似簡單但很容易做丑的小效果我第一次接到這個需求是在做一個消除類游戲的開場界面策劃想要一個“彩色旋轉(zhuǎn)光效”當(dāng)背景裝飾。當(dāng)時第一反應(yīng)是找美術(shù)出一張彩虹螺旋貼圖然后用 Cocos 的node.rotation接口每幀轉(zhuǎn)一下。結(jié)果有兩個問題一是貼圖是靜止的只是整體旋轉(zhuǎn)看不出“色彩流動”二是貼圖稍微放大一點邊緣就有鋸齒觀感特別廉價。后來換了一種思路把彩虹做成一條從中心向外擴散的色帶色帶本身繞中心旋轉(zhuǎn)同時色相還在不斷變化。這其實就是“彩色旋轉(zhuǎn) Shader”的完整含義它不是簡單的圖片旋轉(zhuǎn)而是顏色空間里的動態(tài)旋轉(zhuǎn) 屏幕 UV 空間的旋轉(zhuǎn)兩個旋轉(zhuǎn)疊加在一起視覺上才會又花又爽。1.2 拆開看UV 旋轉(zhuǎn)、時間驅(qū)動、顏色映射三個要素一旦想清楚了目標(biāo)效果拆起來就很簡單。任何一個“彩色旋轉(zhuǎn)”效果本質(zhì)上由三件事組成UV 旋轉(zhuǎn)把采樣坐標(biāo)或者說顏色生成坐標(biāo)繞某個中心點旋轉(zhuǎn)。旋轉(zhuǎn)的幅度由引擎時間驅(qū)動這樣畫面才會動。顏色映射旋轉(zhuǎn)后的坐標(biāo)不能直接作為 UV 去采樣圖片而是要映射成一個顏色值。最理想的做法是把坐標(biāo)轉(zhuǎn)換到 HSV 色環(huán)上讓不同角度對應(yīng)不同的色相。隨時間流動除了旋轉(zhuǎn)本身色相也可以隨時間做偏移這樣同樣一個色環(huán)每幀看到的顏色都在變動態(tài)感更強。這三個要素不是必須捆綁的但如果你想要效果足夠“魔性”三者缺一不可。很多新手寫 Shader 時只做了第一件事旋轉(zhuǎn)是轉(zhuǎn)了但顏色根本沒變化看起來就是一個靜態(tài)貼圖在轉(zhuǎn)效果大打折扣。1.3 為什么不用引擎自帶的材質(zhì)或動畫系統(tǒng)Cocos Creator 的編輯器確實提供了內(nèi)置材質(zhì)和 Tween 動畫系統(tǒng)比如把一張彩虹貼圖的rotation屬性打關(guān)鍵幀確實能轉(zhuǎn)。但它的上限很低你沒法讓多個顏色帶朝向不同方向旋轉(zhuǎn)沒法讓色相在旋轉(zhuǎn)過程中自動漸變也沒法通過一個參數(shù)從“彩色旋轉(zhuǎn)”平滑過渡到“原圖呈現(xiàn)”。Shader 最大的優(yōu)勢在于所有變化都是數(shù)學(xué)函數(shù)算出來的不需要額外資源也不需要關(guān)鍵幀動畫。同一個材質(zhì)可以掛給任意 Sprite、任意粒子紋理甚至掛在 UI 上只需要微調(diào)幾個 uniform 參數(shù)就能適配不同場景。所以我堅持用自定義 Effect 文件來做這也是 Cocos 里做特效的正確姿勢。2. 核心數(shù)學(xué)部分UV 旋轉(zhuǎn)矩陣、時間驅(qū)動和 HSV 顏色映射2.1 給 Shader 一個“心跳”統(tǒng)一使用 cc_timeCocos Creator 內(nèi)置了一個全局時間變量cc_time在 3.x 里它是vec4類型cc_time.x是從引擎啟動到當(dāng)前的秒數(shù)cc_time.y是增量時間cc_time.z是總時間的 sin 值包裝cc_time.w是另一個包裝值。我們最常用的就是cc_time.x它天然就是不斷增長的浮點數(shù)適合乘系數(shù)當(dāng)角度。要特別說明一點不要在 Shader 里自己寫sin(uTime)或者float time 0.016這種邏輯。片元著色器是并行執(zhí)行的所有像素需要拿到同一個時間值自己維護一個“每秒加點”的變量在 Shader 里是不可行的。讓引擎把時間傳進來我們只用它來驅(qū)動角度變化這是 Cocos Shader 的基本共識。2.2 在 UV 坐標(biāo)系里做旋轉(zhuǎn)然后映射到色環(huán)UV 坐標(biāo)通常就是(0,0)到(1,1)的矩形區(qū)域Tonemapping 之前你先要判斷一個很關(guān)鍵的問題你希望旋轉(zhuǎn)中心在哪里。對于一張加載頁背景中心大概率是(0.5, 0.5)。所以第一步是把 uv 平移一下讓中心對齊到坐標(biāo)原點也就是uv - center。然后就是二維旋轉(zhuǎn)矩陣。繞原點的逆時針旋轉(zhuǎn)可以寫成x x * cos(angle) - y * sin(angle) y x * sin(angle) y * cos(angle)這個矩陣用在 Shader 里就是一次mat2乘法。旋轉(zhuǎn)完之后這個坐標(biāo)已經(jīng)帶著旋轉(zhuǎn)信息了。接下來別急著拿它去采樣貼圖先看它的極坐標(biāo)atan(y, x)能算出當(dāng)前點相對于中心的角度length(vec2(x, y))能算出它離中心多遠(yuǎn)。角度映射到色相就是整個效果的靈魂。把弧度換算到0~1的范圍然后丟給 HSV 轉(zhuǎn) RGB 的函數(shù)不同角度就會呈現(xiàn)不同顏色。想讓顏色旋轉(zhuǎn)只需要讓角度加上一個cc_time.x的倍數(shù)想讓色相流動只需要在 HSV 的 H 通道上再加一個時間偏移。2.3 HSV 比 RGB 更適合做彩虹色寫 Shader 的人都有個經(jīng)驗想要彩虹色一定要用 HSV不要直接硬編碼 RGB 分段。用 RGB 做漸變中間過渡全是臟色而且顏色不連續(xù)。HSV 的思路是色相 H 從 0 轉(zhuǎn)到 1飽和度 S 固定明度 V 固定直接轉(zhuǎn)成 RGB出來的就是從紅到紫的完整光譜。相當(dāng)于你什么都不用管H 通道就是彩虹。HSV 轉(zhuǎn) RGB 的 GLSL 函數(shù)網(wǎng)上有很多版本我習(xí)慣用這一個短小精悍效率也不錯vec3 hsv2rgb(vec3 c) { vec4 K vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p abs(fract(c.xxx K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); }到這里“彩色旋轉(zhuǎn)”的數(shù)學(xué)骨架就完整了旋轉(zhuǎn)矩陣負(fù)責(zé)讓坐標(biāo)轉(zhuǎn)起來極坐標(biāo)的角度負(fù)責(zé)給 H 通道提供輸入HSV 轉(zhuǎn) RGB 負(fù)責(zé)把色相變成真正的顏色。剩下的都是工程落地問題。3. 在 Cocos Creator 中落地完整 Effect 代碼與掛載流程3.1 3.x 版本的 Effect 文件可以直接抄Cocos Creator 3.x 里自定義 Shader 的載體是.effect文件。文件里面同時包含頂點著色器、片元著色器和屬性定義。下面這個是我常用的彩色旋轉(zhuǎn)材質(zhì)直接在資源管理器里新建 Effect 文件把代碼粘進去就能用// colorRotate.effect CCEffect %{ techniques: - passes: - vert: vs frag: fs blendState: targets: - blend: true rasterizerState: cullMode: none properties: rotationSpeed: { value: 0.6 } cycleSpeed: { value: 0.8 } saturation: { value: 0.9 } brightness: { value: 1.0 } center: { value: [0.5, 0.5] } mixFactor: { value: 0.4 } }% CCProgram vs %{ precision highp float; #include cc-global #include cc-local in vec3 a_position; in vec2 a_uv0; out vec2 v_uv0; void main () { vec4 pos vec4(a_position, 1.0); v_uv0 a_uv0; gl_Position cc_matViewProj * pos; } }% CCProgram fs %{ precision highp float; #include cc-global #include alpha-test #include texture in vec2 v_uv0; out vec4 fragColor; uniform Params { float rotationSpeed; float cycleSpeed; float saturation; float brightness; vec2 center; float mixFactor; }; vec3 hsv2rgb(vec3 c) { vec4 K vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p abs(fract(c.xxx K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } void main () { vec2 uv v_uv0 - center; float angle cc_time.x * rotationSpeed; float cosA cos(angle); float sinA sin(angle); uv mat2(cosA, -sinA, sinA, cosA) * uv; float theta atan(uv.y, uv.x) / (2.0 * 3.14159265) 0.5; float radius length(uv); float hue fract(theta cc_time.x * cycleSpeed); vec3 rainbow hsv2rgb(vec3(hue, saturation, brightness)); vec4 texColor texture(texture, v_uv0); vec3 finalColor mix(texColor.rgb, rainbow, mixFactor); fragColor vec4(finalColor, texColor.a); ALPHA_TEST(texColor.a); } }%這段代碼里有一個細(xì)節(jié)值得注意我用mixFactor把原始貼圖顏色和彩虹色做了混合。這樣做是故意的因為實際項目中很少真的需要把紋理徹底丟掉更多時候是讓彩色旋轉(zhuǎn)疊加在原圖上既能看到原圖內(nèi)容又有動態(tài)效果。如果你想做成完全純色的彩虹光環(huán)把mixFactor改成1.0就行。3.2 2.x 版本的主要差異如果你還在用 Cocos Creator 2.4.x 或更早版本思路是一樣的但語法有幾個差異2.x 的 Effect 文件是.effect結(jié)尾結(jié)構(gòu)類似但 uniform 不要包在uniform Params {}塊里直接在片元著色器頂層聲明uniform float rotationSpeed;這種單變量即可。properties 里的名字要和 fs 里聲明的 uniform 名字一致2.x 對名稱的匹配要求更嚴(yán)格。cc_time在 2.x 里也是引擎全局變量可以直接用但要確保在#include cc-global之后。2.x 的片元著色器大概長這樣uniform float rotationSpeed; uniform float cycleSpeed; uniform float saturation; uniform float brightness; uniform vec2 center; uniform float mixFactor;其余數(shù)學(xué)邏輯完全一致。說實話如果新項目建議直接上 3.x官方對 Effect 的支持和維護更積極2.x 的項目如果沒有歷史包袱遷移過來統(tǒng)一用 3.x 風(fēng)格更省心。3.3 從 Effect 到材質(zhì)到 Sprite 的掛載步驟光有一個.effect文件還不行你得先創(chuàng)建材質(zhì)再把材質(zhì)賦給精靈。操作流程很簡單在資源管理器里右鍵一個 2D 精靈然后新建一個 Material 資源。在 Material 資源上把 Effect 屬性選成你剛創(chuàng)建的colorRotate。如果用的是純色或者彩虹不需要紋理清掉紋理槽如果要疊加原圖把 SpriteFrame 拖進去。把材質(zhì)拖到場景里任意 Sprite 組件的CustomMaterial槽位中。在編輯器右上角就能看到 rotationSpeed、cycleSpeed、saturation 這些參數(shù)拖動就能實時預(yù)覽。這里有一個很常見的誤解有人把材質(zhì)拖到 Sprite 的SpriteMaterial或者直接改了Canvas的全局材質(zhì)結(jié)果效果沒出來。實際上 2D 渲染下你要找的是 Sprite 組件的CustomMaterial只有這個槽位才會走自定義 Effect否則引擎會強行用內(nèi)置的builtin-sprite材質(zhì)把你的 Effect 覆蓋掉。3.4 代碼里的 uniform 命名坑Cocos Creator 對 uniform 的命名和類型容忍度比較低。比如你在 properties 里寫的value: 0.6在 fs 里如果聲明成了float rotationSpeed名字不一致會導(dǎo)致編譯報錯或者參數(shù)不生效。最典型的就是center屬性類型是vec2你在 properties 里要寫value: [0.5, 0.5]少一個數(shù)都不行。另外Params這個 uniform 塊名在 3.x 里寫法很嚴(yán)格一定不要漏掉分號。很多新手把uniform Params {}寫成了uniform Params;結(jié)果整個 effect 編譯失敗這個錯誤極其常見。4. 從“能看”到“好用”參數(shù)化技巧和擴展玩法4.1 把參數(shù)交給美術(shù)比寫死效果好得多第一個版本我習(xí)慣把所有參數(shù)都寫死在 Shader 里后來被打擊了不同場景需求完全不同加載頁希望旋轉(zhuǎn)慢一點、色環(huán)疏一點技能特效希望轉(zhuǎn)得快、鮮艷一點UI 過場又希望透明度低、別太搶眼。與其每次改代碼不如把參數(shù)全部抽出來。現(xiàn)在的 properties 里實際上給了你一套完整的參數(shù)卡片參數(shù)含義推薦范圍rotationSpeed整體旋轉(zhuǎn)速度0.2 ~ 2.0cycleSpeed色相流動速度0.2 ~ 1.5saturation飽和度0.6 ~ 1.0brightness明度0.5 ~ 1.2center旋轉(zhuǎn)中心默認(rèn) 0.5, 0.5mixFactor彩虹與原圖混合度0 ~ 1用編輯器微調(diào)這些參數(shù)比一遍遍改代碼重新構(gòu)建有效率得多。重點是讓美術(shù)在編輯模式下直接拖他們能實時看到變化這樣合版本的時候就不用老來煩你。4.2 玩出差異化扭曲、波浪、局部彩色旋轉(zhuǎn)基礎(chǔ)版足夠應(yīng)付大多數(shù)場景但如果你想要更有辨識度的效果可以在這個骨架上做加法。波浪扭曲在計算 theta 之前給 uv 加一個正弦擾動比如uv.x sin(uv.y * 10.0 cc_time.x) * 0.05彩色帶就會扭得像一條蛇一樣。徑向漸變還原本來的色相映射把hue fract(theta time)改成hue fract(radius * flowSpeed - time)彩虹就會從中心向外圈擴散類似發(fā)射流光的效果。局部區(qū)域在 Shader 里判斷一下 uv 是否在某個圓環(huán)范圍內(nèi)然后只在圓環(huán)內(nèi)部顯示彩色旋轉(zhuǎn)外部透出原圖。這樣可以用作角色腳下的光環(huán)而不是全屏特效。這些玩法不需要改整個 Shader 的結(jié)構(gòu)只是在坐標(biāo)變換和顏色映射之間多塞幾行數(shù)學(xué)運算而已。我自己最喜歡的組合是“波浪扭曲 徑向擴散 低飽和度”用它做了一個粒子紋理整個粒子系統(tǒng)放出一種軟綿綿的彩色煙霧效果比靜態(tài)粒子好太多。4.3 混合模式的思路不是只能疊在 Sprite 上如果你把這個 Effect 掛到粒子紋理上那么 blendState 就格外重要。當(dāng)前代碼里 blend 是 true配合默認(rèn)的 SrcAlpha 和 OneMinusSrcAlpha適合大多數(shù)半透明材質(zhì)。如果你想要發(fā)光的感覺可以把 blend 改成加法混合彩虹疊加后會高亮特別適合技能爆發(fā)瞬間的沖擊特效。但要注意加法混合會讓黑色區(qū)域也變亮如果你的彩虹色飽和度拉滿疊加后很容易過曝。實際操作中建議把 brightness 控制在 1.0 左右別超過 1.3不然真機上顏色會非常刺眼。5. 真機性能觀察與踩坑記錄5.1 片元著色器里的三角函數(shù)不是免費的我知道很多教程讓你放心大膽地寫sin、cos、atan但真實移動端項目里我們的 Fragment Shader 是逐像素執(zhí)行的哪怕一張 256x256 的貼圖全屏鋪開也會有幾十萬個像素同時調(diào)用這個函數(shù)。每個像素多算一次atan和兩次三角函數(shù)粒子和 UI 疊加在一起幀率下降很快。優(yōu)化手段分兩種。如果旋轉(zhuǎn)速度不需要特別精細(xì)可以把角度計算里的一部分挪到頂點著色器里去比如旋轉(zhuǎn)矩陣只和角度有關(guān)角度和時間相關(guān)這部分可以在頂點階段算好傳下去。另一種方案是預(yù)計算一張顏色查找表把色相映射結(jié)果存成一張 256x1 的紋理在片元里采樣它替代hsv2rgb的數(shù)學(xué)計算。我實際測過后者在低端機上收益明顯。5.2 cc_time 的精度與 Android 兼容性Cocos Creator 3.x 在 Android 真機上cc_time.x是高精度浮點數(shù)理論上沒問題。但如果你在某個機型上發(fā)現(xiàn)旋轉(zhuǎn)速度忽快忽慢或者顏色跳動不連續(xù)很可能是項目里某個地方修改了全局時間縮放。比如你用了director.getDeltaTime()做了慢動作但 Shader 里直接用的是cc_time.x這倆是不同的時間體系會明顯不一致。解決辦法是如果你希望旋轉(zhuǎn)速度受游戲暫?；驎r間縮放控制就不要直接用cc_time.x而是在代碼里把時間值通過 uniform 傳進來由邏輯層統(tǒng)一控制。對于 UI 裝飾類特效直接用cc_time.x倒是沒問題因為不會暫停更新。5.3 我踩過的一個大坑UV 原點方向搞反了很多 2D 美術(shù)同事習(xí)慣把圖片左上角當(dāng)(0,0)但 OpenGL 系渲染里紋理坐標(biāo)的(0,0)在左下角。我第一版寫的中心旋轉(zhuǎn)在編輯器看著是對的一到真機上就發(fā)現(xiàn)旋轉(zhuǎn)中心偏了半個屏幕就是因為我在心里默認(rèn)了左上角原點。調(diào)試這個問題的經(jīng)驗是準(zhǔn)備一張帶明顯對角顏色的測試圖左上角紅色、右下角藍(lán)色然后看旋轉(zhuǎn)效果。如果發(fā)現(xiàn)中心點對應(yīng)的是圖片的右上角而不是正中心把center參數(shù)的 vec2 的兩個分量反過來試一下多半就是原點方向的問題。5.4 與動畫狀態(tài)機和 UI 一起用時的注意事項彩色旋轉(zhuǎn) Shader 很適合做角色狀態(tài)切換時的底光也適合掛給 UI 面板做動態(tài)邊框。但如果掛到 UI 上有幾點要特別注意UI 節(jié)點本身就帶合批系統(tǒng)如果給大量 UI 節(jié)點掛不同參數(shù)的同一材質(zhì)會導(dǎo)致 DrawCall 暴漲因為合批要求材質(zhì)參數(shù)一致。我的做法是同一界面里最多兩個節(jié)點使用這個材質(zhì)其余背景效果用序列幀或粒子替代。另外如果你在動畫狀態(tài)機里切換多個精靈幀最好保證所有幀的紋理尺寸一致否則 UV 映射會拉伸變形。我在技能系統(tǒng)里就是專門準(zhǔn)備了一張 512x512 的背景紋理把所有狀態(tài)切換都放在這一張圖上最終效果穩(wěn)定DrawCall 也低。最后分享一個小技巧給這個 Shader 的mixFactor接上一個從 0 到 1 的動畫曲線彩色旋轉(zhuǎn)就會從原圖慢慢浮現(xiàn)出來非常適合做“魔化”“覺醒”這類變身演出。你不需要額外做任何特效資源只要一個 Tween 控制參數(shù)即可這也是 Shader 參數(shù)化最迷人的地方——一個材質(zhì)可以泛生出無數(shù)種玩法。