Cocos Creator v2.2 已於 10 月 18 日正式發佈，該版本對原生平臺進行了大幅性能優化，同時在引擎層面也做了不少改動，包括 3D 模型渲染合批、大幅增強 TiledMap 支持等等，詳細的版本改動可查看。
此外，Cocos Creator 2.2 版本基本同步了 Cocos Creator 3D 的材質系統，新版本的材質系統已趨於穩定，可以很方便地在編輯器中進行材質及 Effect 文件的創建及編寫。相比之前的版本，v2.2 在渲染組件層面也有不少的差異。
Cocos 引擎開發工程師劉航，將爲各位開發者詳細介紹如何基於 Creator 2.2 版本進行渲染組件及材質的自定義。
講師，劉航
一、渲染組件，Assembler 及材質
在引擎中，所有的渲染組件都是繼承自 cc.RenderComponent，例如cc.Sprite，cc.Label 等。組件的 Assembler 主要負責組件數據的更新處理及填充，由於不同的渲染組件在數據內容及填充上也都不相同，所以每一個渲染組件都會對應擁有自己的 Assembler 對象，而所有的 Assembler 對象都是繼承自 cc.Assembler。Material 作爲資源，主要記錄渲染組件的渲染狀態，使用的紋理及 Shader。
二、自定義渲染組件及 Assembler
自定義渲染組件
自定義渲染組件需要繼承 cc.RenderComponent 對象。cc.RenderComponent 有兩個空方法必須要重寫 _resetAssembler 及 _activeMaterial 方法。
_resetAssembler 在組件創建的時候會去調用，會在組件生命週期方法之前執行，主要負責創建並初始化渲染組件的 Assembler 實例。_activeMaterial 方法負責創建並設置渲染組件所使用的材質實例，會在組件啓用及材質修改時調用。
另外，渲染組件有一系列控制渲染狀態的方法：
markForRender 及 disableRender 控制渲染組件是否進行渲染
setVertsDirty 在渲染組件數據有更新時，設置標記
setMaterial 則是設置材質實例給渲染組件
自定義 Assembler
定義了自定義渲染組件之後，還需要定義對應的 Assembler。自定義的 Assembler 需繼承cc.Assembler對象，cc.Assembler 有三個空方法必須要去重寫：init，updateRenderData 及 fillBuffers。
init 負責初始化渲染數據及一些局部參數
updateRenderData 負責在渲染組件的頂點數據有變化時進行更新修改
fillBuffers 負責在渲染時進行頂點數據的 Buffer 填充
自定義材質及 Effect
Cocos Creator 2.2 版本的材質及 Effect 是作爲資源存在，可以通過編輯器很方便快捷地進行新建操作，而不需要通過代碼進行創建。
材質對象的層級結構如下圖所示：每個材質對象都指向唯一的一個 Effect 對象，每個 Effect 對象可以擁有多個 Technique，每個 Technique 又可以創建多個 Pass，Pass 裏就記錄了 Blend 模式， Stencil Test 等渲染模式，所使用的 Shader 名字及 Shader 中使用的 Uniform 值。
在編輯器中選中材質資源，通過屬性檢查器對比材質的資源文件，可以看到具體的屬性對應：
材質中通過 uuid 指定所使用的 Effect 資源，在編輯器中選中 Effect 資源，以 2d-sprite 爲例，可以看到文件具體的內容，Effect 中主要有三部分：CCEffect，CCProgram vs 及 CCProgram fs。
CCEffect 即爲前面介紹的材質對象結構中的內容，記錄了渲染組件所有相關的渲染狀態及 Uniform，這部分的語法及格式是基於 YAML，相比 JSON 書寫更加簡潔方便，詳細的介紹可查閱[YAML官方文檔]。
CCProgram vs 及 CCProgram fs 分別是頂點着色器及片元着色器，語法是標準的 GLSL 語法。
Effect 文件的編寫可以使用 VS Code ，在編輯器中雙擊 Effect 文件會自動在 VS Code 中打開，另外 VS Code 的插件 Cocos Effect 也支持 Effect 文件的語法高亮。
Demo 示例
本文相關的自定義渲染組件及自定義 Assembler 的 Demo。
下載地址 :
https://github.com/cocos-creator/demo-shader
爲了方便大家學習和參考如何進行材質的自定義及 Shader 的編寫，Demo 中創建並移植了一些 Shader 的示例場景。例如：
基於 RenderTexture 的屏幕後處理示例：
簡單的跟隨點光源效果：
滾動背景：
屏幕雨滴效果：
以上就是今天帶來的 Cocos Creator v2.2 材質系統介紹，在使用過程中，如有哪些問題和困惑，亦或者是有更有價值的使用方法，歡迎大家移步至 Cocos 中文社區與大家一起交流。
我就知道你“在看”▼