系列對應(yīng)演示 Demo 倉庫地址：
https://github.com/zhitaocai/CocosCreatorShaderEffectDemo
https://gitee.com/zhitaocai/CocosCreatorShaderEffectDemo
一、題外話
站在巨人的肩膀上，你一開始就能看很遠。
實際上，已經(jīng)有很多大佬在博客，公眾號，論壇等等的地方分享過很多各種特效的實現(xiàn)代碼了。
但是，目前好像缺少一些基礎(chǔ)一點說明，Cocos 的官方文檔可能有些隱晦。
因此，我會盡量在補全一下這塊的，當(dāng)然，我也是在學(xué)習(xí)過程中，可能有些地方不一定正確，這些地方，我會盡可能標(biāo)注。
Ok，Let's go.
二、渲染組件和材質(zhì)的關(guān)系
材質(zhì)，Effect，Inspector，紋理之間是什么關(guān)系呢？能不能用 Cocos Creator 舉個例子？我覺得以下的圖片應(yīng)該就能說明這之間的關(guān)系了：
事實上，從 2.0 版本升級到 2.[1+] 版本的 Cocos Creator 的時候，大家就會發(fā)現(xiàn)，大部分（因為我沒仔細看完所有渲染組件，只看了大部分，所以只能說大部分這個詞語，而不是全部）的渲染組件都新增了 Materials 材質(zhì)數(shù)組，比如我們經(jīng)常用的Sprite，Label等都多出了圖中箭頭3所指向的材質(zhì)數(shù)組。這些渲染組件都是繼承了 RenderComponent 組件
而在 Cocos Creator 2.[1.+] 版本中，RenderComponent 都加了材質(zhì)的數(shù)組
而這就是我們的「屬性管理器/Inspector」面板中多了材質(zhì) Materials 數(shù)組的結(jié)果。
有點小偏題了，不過這里我們算是初步說明了，渲染組件和紋理之間的關(guān)系。
三、材質(zhì)和Effect的關(guān)系
在上面的第一個圖的第4點中，我們說到 材質(zhì)指導(dǎo)如何渲染圖像到屏幕上 ，其實這個說法并不嚴(yán)謹，只是想表達這個意思，大家意思get到就可以，大家不要較真。
那么在這個意思上，材質(zhì)又是怎么指導(dǎo)渲染圖像到屏幕上呢？
接著順序
- 當(dāng)我們選中材質(zhì)后，「屬性管理器/Inspector」面板就會切換為材質(zhì)的面板
- 此時我們可以通過
Effect屬性的下拉列表，選中我們需要綁定Effect - 當(dāng)綁定成功之后，Cocos Creator 的編輯器就會幫我們預(yù)編譯并解析我們的綁定的 Effect 文件中的 可改變屬性（這是我自己的稱呼，不嚴(yán)謹，Get到意思就可以），然后顯示在屬性編輯器上，對應(yīng)我們圖中綠色部分
至此，相信大家已經(jīng)有一個比較直觀的，關(guān)于渲染組件，材質(zhì)，Effect，屬性編輯器/Inspector在Cocos Creator 編輯器上的關(guān)系。
但是我相信你可能還是會有一些疑問，比如：
Q1：比如本章標(biāo)題中的說到的紋理關(guān)系呢？怎么突然沒有了說明？
A1：Effect 代碼中會說明紋理如何渲染，但也不太準(zhǔn)確，暫時可以這么理解著先
Q2：是不是我隨便在任意一個地方創(chuàng)建的Effect，都會出現(xiàn)在第5步的Effect下拉列表呢？
A2：在官方的 Effect Syntax 文檔 中有描述到
好了，就這么多先。我們下篇文章見~
下一篇：
上一篇：
