ShaderHelper2 組件升級，支持自動枚舉參數！

• 2019 年 10 月 11 日
• 筆記

ShaderHelper2 組件新體驗視頻演示：

ShaderHelper2 組件我們已經介紹過兩次了，不了解的夥伴可以看下面兩篇文章：

• 新版ShaderHelper，終於支持 Creator 2.1.2 了！
• ShaderHelper2正式回歸，並全面使用TypeScript語言！

本文主要介紹這次組件改進的地方，文末還有更多驚喜！

雖然 ShaderHelper2 支持了在 Cocos Creator 2.1.2 以上引擎版本使用，使用體驗也得到了改進，但是 Shawn 編寫的組件的理念是希望能為策劃、美術以及非程序員提供內容生產的能力，在易用性上再進一步，改進功能點如下：

自動隱藏props屬性

當一個Shader Effect中不含有可調節的參數，ShaderHelper 組件將不會顯示props屬性到屬性面板上，看下圖：

可以看Dissolve特效組件屬性非常簡潔，僅有一個 Program 屬性

我們仍然可以使用 ShaderTime 組件調節動態 time 參數。

自動枚舉參數到props屬性

如果一個Shader Effect 是含有參數的，當切換 Program 屬性時將會自動刷新 props 屬性，枚舉出Shader 的可控參數，看下圖：

同時注意，參數的Key值是只讀，不會因為誤操作修改出錯，

props屬性中的參數 value 同樣支持動態調節，可以在場景編輯器中實時看到修改後的效果。

優化提示警告

之前的版本，在切換不同的特效時當Effect中並沒有定義USE_TEXTURE時會有警告，看下圖：

通過對 EffectAsstes 屬性檢查，將此警告屏蔽掉了，以免在使用過程中產生產生煩人的提示，檢查代碼如下：

 //在材質對象上開啟USE_TEXTURE定義  let defineUserTexture = !!effectAsset.shaders.find(shader => shader.defines.find(def => def.name === 'USE_TEXTURE'));  if (defineUserTexture) {      material.define('USE_TEXTURE', true);  }

同樣，如果選擇非動態Shader，同時為節點添加了 ShaderTime 組件，也會出現類似上面的警告，同樣得到的修正：

protected update(dt) {      this._material = this.getComponent(cc.Sprite).sharedMaterials[0];      if (this.node.active && this._material && this._material.effect._properties.time) {          this._setShaderTime(dt);      }  }

結語

以上是本次 ShaderHelper2 組件主要的改進之處，Shawn 現在將組件放到了微店上，但不用擔心，組件是免費的，我在微店上帖出了組件在 Github 倉庫地址。

因為微店上不能有0元的商品，所以設置為1元不用購買，點擊【閱讀原文】進入後即可看到Github地址。

同時 Shawn 的微店上還上架了 《消消大冒險》七夕版本，本來是計劃是在9月份錄一套制系統「消除遊戲」的視頻教程，內容是從引擎編輯器->JS語言->消除遊戲項目，但目前只錄製了引擎編輯器的最前面10集，效果非常不理想，馬上9月就要完了，只好先將遊戲源碼放出，在微店上售價2元。

相信在國慶期間仍然有想着學習的夥伴，微店上還有社區中其他夥伴的遊戲項目源碼，並且都部署了在線體驗，一定不會讓你感覺寂寞！