Cocos Creator Shader Effect 系列 - 1 - 材质，Effect，Inspector，纹理之间的关系

系列对应演示 Demo 仓库地址：

https://github.com/zhitaocai/CocosCreatorShaderEffectDemo
https://gitee.com/zhitaocai/CocosCreatorShaderEffectDemo

一、题外话

站在巨人的肩膀上，你一开始就能看很远。

实际上，已经有很多大佬在博客，公众号，论坛等等的地方分享过很多各种特效的实现代码了。

但是，目前好像缺少一些基础一点说明，Cocos 的官方文档可能有些隐晦。

因此，我会尽量在补全一下这块的，当然，我也是在学习过程中，可能有些地方不一定正确，这些地方，我会尽可能标注。

Ok，Let's go.

二、渲染组件和材质的关系

材质，Effect，Inspector，纹理之间是什么关系呢？能不能用 Cocos Creator 举个例子？我觉得以下的图片应该就能说明这之间的关系了：

RenderComponent with Material

事实上，从 2.0 版本升级到 2.[1+] 版本的 Cocos Creator 的时候，大家就会发现，大部分（因为我没仔细看完所有渲染组件，只看了大部分，所以只能说大部分这个词语，而不是全部）的渲染组件都新增了 Materials 材质数组，比如我们经常用的Sprite，Label等都多出了图中箭头3所指向的材质数组。这些渲染组件都是继承了 RenderComponent 组件

Sprite

Label

而在 Cocos Creator 2.[1.+] 版本中，RenderComponent 都加了材质的数组

RenderComponent

而这就是我们的「属性管理器/Inspector」面板中多了材质 Materials 数组的结果。

有点小偏题了，不过这里我们算是初步说明了，渲染组件和纹理之间的关系。

三、材质和Effect的关系

在上面的第一个图的第4点中，我们说到 材质指导如何渲染图像到屏幕上 ，其实这个说法并不严谨，只是想表达这个意思，大家意思get到就可以，大家不要较真。

那么在这个意思上，材质又是怎么指导渲染图像到屏幕上呢？

Material with Effect

接着顺序

5. 当我们选中材质后，「属性管理器/Inspector」面板就会切换为材质的面板
6. 此时我们可以通过 Effect 属性的下拉列表，选中我们需要绑定Effect
7. 当绑定成功之后，Cocos Creator 的编辑器就会帮我们预编译并解析我们的绑定的 Effect 文件中的 可改变属性（这是我自己的称呼，不严谨，Get到意思就可以），然后显示在属性编辑器上，对应我们图中绿色部分

至此，相信大家已经有一个比较直观的，关于渲染组件，材质，Effect，属性编辑器/Inspector在Cocos Creator 编辑器上的关系。

但是我相信你可能还是会有一些疑问，比如：

Q1：比如本章标题中的说到的纹理关系呢？怎么突然没有了说明？
A1：Effect 代码中会说明纹理如何渲染，但也不太准确，暂时可以这么理解着先

Q2：是不是我随便在任意一个地方创建的Effect，都会出现在第5步的Effect下拉列表呢？
A2：在官方的 Effect Syntax 文档 中有描述到

Effect Name

好了，就这么多先。我们下篇文章见~

下一篇：

• Cocos Creator Shader Effect 系列 - 2 - Effect 文件解读

上一篇：

• Cocos Creator Shader Effect 系列 - 0 - 前言