CocosCreator 2.1.2 Shader组件

本篇文章相关导读：

• 新版ShaderHelper，支持 Creator 2.1.2 ！

• 社区大佬揭开 Creator 2.1.2 材质系统的神秘面纱！

• 为什么要选择使用TypeScript，看了就知道原因！

• Creator 2.0.x ShaderHelper组件预告

• Creator 2.0.x CustomMaterial.js源码分析

01 基本用法

​在中秋节的三天假期里，Shawn 终于将 ShaderHelper2 的组件 接口完全还原到旧版本 ShaderHelper 一样了，看下图：

同时新版 ShaderHelper 支持在组件上传递参数到片元着色器中，如下效果：

需要注意 ShaderHelper 的 props 参数只是用来设置片元代码中变量的初值。当你在编辑器中实时调节 props 中的参数值时，可以在场景编辑器中实时看到参数变化后的效果。

02 动态效果

要让Shader运行起来具有动态效果，我这里参考了前面一篇文章《一起来看，社区大佬揭开 Creator 2.1.2 材质系统的神秘面纱！》中「lxb229」大佬的作法，增加了一个 ShaderTime 的组件专用于更新 Shader 代码中的 time 参数，看下图：

ShaderTime 组件是在 update 回调中不停地更新 Shader 中的 time 参数值，从 0 累加到 65535 再回到 0。我在「lxb229」大佬的基础上，稍微增强了一点点，将 max 属性保留成了组件属性，同时当你在调节 max 属性时也能在场景编辑中做实时预览。

为什么想到这这样一个功能了，主要是有几个 Shader 效果参数在0~1之间才有效，超过这个值就看不到效果或者是什么都不显示，还以为出问题了呢？还有一点是，我录的视频，大家看不效果！

03

我们自己要添加新的 Shader，并能被 ShaderHelper 的 program 属性所检索到，只需要将 Cocos Creator 生成的 Effect 文件保存到resources/effects目录下，请看下图：

其中关于圆形头像的Shader，我们需要在代码中关闭引擎的动态图集的功能：

cc.dynamicAtlasManager.enabled = false;

04

Shawn 最近也开始学习使用 TypeScript 啦！因此新版 ShaderHelper2 中的组件脚本全部采用 TypeScript 语言来编写。使用 TypeScript 的优点我这里不用多说，请看 KUOKUO 大佬的文章《为什么要选择使用TypeScript》。

而且 Shawn 还向 Cocos Creator 引擎组打听到，他们内部还对是否支持 JavaScript 做过投票，由于 JavaScript 的用户基数特别大，因此被保留了下来。因此建议初学者直接使用 TypeScript 作为 Creator 游戏开发的首先语言！

不过这里稍微吐糟一下 Creator 提供的 creator.t.ds，因为 Shawn 在使用 TypeScript 编写 ShaderHelper2 的过程中也遇到不少坑。其中一个就是引擎提供的 creator.t.ds 居然没有 cc.Effect 的数据类型定义，以及 cc.Material 对象中的属性、方法都是空的… 编写的组件代码在 IDE 中出现烦人的红线提示，我这里就强行修改了 creator.t.ds，增加需要用到的属性和函数。

 export class Material extends Asset {
     effectAsset: Asset;
     define(name: string, val: any): void;
     setProperty(name:string, val: any);
 }
 export class EffectAsset extends Asset {
 }

还有种是使用了引擎内部的接口，在 creator.t.ds 中也没有定义，因此只能用硬来了将红线直接干掉，下面是具体做法：

//@ts-ignore
cc.Class.Attr.setClassAttr(...);

如果你也遇到类似的问题，这里提供三种解决方法：

1. 手动修改 creator.t.ds 文件；

2. 使用 “//@ts-ignore” 屏蔽下一行的语法检查（仅一行）；

3. 向 Cocos Creator 提供源码注释。

其中第3项，是最彻底的解决方法，因为引擎组的大佬们实在是太忙了，有时会忘记为源码添加注释，因此在 creator.t.ds 没有留下定义。这是一个很好的向引擎提交源码的机会，具体的方法可以参考这里：

https://docs.cocos.com/creator/manual/zh/submit-pr/submit-pr.html

ShaderHelper2最新源码，请在公众号回复【ShaderHelper2】获取，感谢你的阅读，愿前进的道路上我们一起砥砺前行，共同成长！