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

接着顺序

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

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

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

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

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

Effect Name

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

下一篇:

上一篇:

推荐阅读更多精彩内容