本篇文章相關導讀：
01 基本用法
在中秋節的三天假期里，Shawn 終於將 ShaderHelper2 的組件 接口完全還原到舊版本 ShaderHelper 一樣了，看下圖：
同時新版 ShaderHelper 支持在組件上傳遞參數到片元着色器中，如下效果：
需要注意 ShaderHelper 的 props 參數只是用來設置片元代碼中變量的初值。當你在編輯器中實時調節 props 中的參數值時，可以在場景編輯器中實時看到參數變化后的效果。
02 動態效果
要讓Shader運行起來具有動態效果，我這里參考了前面一篇文章《一起來看，社區大佬揭開 Creator 2.1.2 材質系統的神秘面紗！》中「lxb229」大佬的作法，增加了一個 ShaderTime 的組件專用於更新 Shader 代碼中的 time 參數，看下圖：
ShaderTime 組件是在 update 回調中不停地更新 Shader 中的 time 參數值，從 0 累加到 65535 再回到 0。我在「lxb229」大佬的基礎上，稍微增強了一點點，將 max 屬性保留成了組件屬性，同時當你在調節 max 屬性時也能在場景編輯中做實時預覽。
為什么想到這這樣一個功能了，主要是有幾個 Shader 效果參數在0~1之間才有效，超過這個值就看不到效果或者是什么都不顯示，還以為出問題了呢？還有一點是，我錄的視頻，大家看不效果！
03
我們自己要添加新的 Shader，並能被 ShaderHelper 的 program 屬性所檢索到，只需要將 Cocos Creator 生成的 Effect 文件保存到resources/effects目錄下，請看下圖：
其中關於圓形頭像的Shader，我們需要在代碼中關閉引擎的動態圖集的功能：
cc.dynamicAtlasManager.enabled = false;
04
Shawn 最近也開始學習使用 TypeScript 啦！因此新版 ShaderHelper2 中的組件腳本全部采用 TypeScript 語言來編寫。使用 TypeScript 的優點我這里不用多說，請看 KUOKUO 大佬的文章《為什么要選擇使用TypeScript》。
而且 Shawn 還向 Cocos Creator 引擎組打聽到，他們內部還對是否支持 JavaScript 做過投票，由於 JavaScript 的用戶基數特別大，因此被保留了下來。因此建議初學者直接使用 TypeScript 作為 Creator 游戲開發的首先語言！
不過這里稍微吐糟一下 Creator 提供的 creator.t.ds，因為 Shawn 在使用 TypeScript 編寫 ShaderHelper2 的過程中也遇到不少坑。其中一個就是引擎提供的 creator.t.ds 居然沒有 cc.Effect 的數據類型定義，以及 cc.Material 對象中的屬性、方法都是空的… 編寫的組件代碼在 IDE 中出現煩人的紅線提示，我這里就強行修改了 creator.t.ds，增加需要用到的屬性和函數。
1 export class Material extends Asset { 2 effectAsset: Asset; 3 define(name: string, val: any): void; 4 setProperty(name:string, val: any); 5 } 6 export class EffectAsset extends Asset { 7 }
還有種是使用了引擎內部的接口，在 creator.t.ds 中也沒有定義，因此只能用硬來了將紅線直接干掉，下面是具體做法：
//@ts-ignore cc.Class.Attr.setClassAttr(...);
如果你也遇到類似的問題，這里提供三種解決方法：
-
手動修改 creator.t.ds 文件；
-
使用 “//@ts-ignore” 屏蔽下一行的語法檢查（僅一行）；
-
向 Cocos Creator 提供源碼注釋。
其中第3項，是最徹底的解決方法，因為引擎組的大佬們實在是太忙了，有時會忘記為源碼添加注釋，因此在 creator.t.ds 沒有留下定義。這是一個很好的向引擎提交源碼的機會，具體的方法可以參考這里：
https://docs.cocos.com/creator/manual/zh/submit-pr/submit-pr.html
ShaderHelper2最新源碼，請在公眾號回復【ShaderHelper2】獲取，感謝你的閱讀，願前進的道路上我們一起砥礪前行，共同成長！