一起來看，社區大佬揭開 Creator 2.1.2 材質系統的神秘面紗！

• 2019 年 10 月 4 日
• 筆記

本文已向 Cocos論壇社區大佬「lxb229」獲得授權，感謝他的精彩分享！

粗解 Cocos Creator 2.1.2 Shader

最近空閑的時候，研究了一下 2.1.2 版本的 shader，這裡單獨提出來一個說明一下，希望對想了解 2.1.2 的童鞋有所幫助。

首先，新建一個Effect，從上往下說吧。

現在 2.1.2 的 Creator把 effect 做成了和 Component 類似的組件，在 properties 中，這裡可以設置外部屬性，在編譯器中暴露出來。

在當前版本中，可以在properties中設置的類型有：float、vec2、vec3、color4。

第二，在頂點著色器 vs 中，屬性名稱有所變化，請看下圖：

這裡特別注意的是 uniform mat4 cc_matViewProj

第三，在片元著色器 fs 中，基本和 2.0.x 的沒有什麼變化，只需要把外部屬性對應在 properties 中即可，看下圖所示：

注意，在 properties 中類型為 color4 的，這裡是vec4。

最後，就是調用的問題，現在因為 shader 還不穩定，所以官方也沒有把 API 完善，有點問題。我只寫了一個需要刷新 time 的外部屬性的例子，你也可以照著寫，像下面一樣：

//ShaderTime.ts    const {ccclass, property} = cc._decorator;    @ccclass  export default class ShaderTime extends cc.Component {      _material: any;      @property      max = 65535;        start() {          this._material = this.node.getComponent(cc.Sprite).sharedMaterials[0];      }      private _start = 0;        protected update(dt) {          if (this.node.active && this._material) {              this._setShaderTime(dt);          }      }      private _setShaderTime(dt) {          let start = this._start;          if (start > this.max) start = 0;          start += 0.01;          this._material.effect.setProperty('time', start);          this._start = start;      }  }

哦，對了 Effect 設置好了，直接拖拽就可以用了，看下實際運行效果：

注意：因為切圓的 shader 在瀏覽器上的圖片頂點取值好像有問題(實測：在 8 * 8 以下 和 513*513 以上的圖片尺寸，在 Web 上沒問題)，所以我重新放了一個外發光的 shader，供大家參考。

在Web顯示有問題的解決方案 ：

// 關掉引擎的動態圖集（慎用，這會導致遊戲的其他drawcall 增高）  cc.dynamicAtlasManager.enabled = false;

本文工程下載地址：https://forum.cocos.com/uploads/default/original/3X/f/a/fa9f5a9ac9aa8a8db3d1781cb6d79b046e0a6252.zip

論壇原文地址：

https://forum.cocos.com/t/creator-2-1-2-shader/82058

結語

感謝 Cocos 論壇社區中的「lxb229」分享的精彩文章，讓我們受益非淺，相信你還能從中獲得更多的啟發。