在阅读过前面的基础章节，相信现在的你已经迫不及待想实现点特效。
那么我们先来点简单的，比如：老化特效（完整代码在我的 Github 仓库 或 Gitee 仓库 中可以找到）。
老化特效在游戏中有很多使用场合。比如：
- 将照片老化
- 在玩家游戏通关过程中，如果玩家通关失败，给游戏界面进行老化
- ...
使用恰当会给游戏带来更好的体验，现在我们看看怎么实现吧。
一、创建新材质
如果你很清楚怎么创建材质，那么可以跳到下个章节。
既然我们要写自己的特效，那么这次，先来个基础的创建教程：
- 我们先创建一个材质和一个Effect文件
- 打开材质的属性编辑器，指定 Effect 为我们刚刚创建的 Effect
- 将我们材质绑定到一个场景中的纹理上，方便预览调试
Ok. Let's go!
一、老化原理
其实，老化的原理很简单，针对纹理的每个uv颜色，执行下面的公式就可以了
r = 0.393 * r + 0.769 * g + 0.189 * b;
g = 0.349 * r + 0.686 * g + 0.168 * b;
b = 0.272 * r + 0.534 * g + 0.131 * b;
现在，打开我们的特效 Effect 文件，找到 片段着色器 代码部分，加入如下函数即可:
ps: 可能你会注意，框框部分，我加了一个宏 USE_OLD_PHOTO ，这是我自己为了调试方便而加入的宏，在 Cocos Creator Shader Effect 系列 - 3 - Effect 文件调试 文章中，我有说到宏调试的方案，这里是一个应用例子。
二、线性老化
通过上面的公式，我们得到的是一个直接老化后的效果。
而在实际使用的时候，我们有可能需要一个渐变过程，从不老化渐变为老化效果， 。
那么，我们试着来做一个 线性渐变的老化效果。
线性渐变，其实也是很好理解一个公式：
finalColor = srcColor + (oldColor - srcColor) * oldLevel;
- srcColor：原始颜色
- oldColor：最终老化后的颜色
- oldLevel：老化程度，值在区间 [0.0, 1.0]
依旧还是在 片段着色器 中加入这部分代码即可：
这里有些注意事项要说一下：
- 着色程序执行时是从上往下执行，因此，如果我们要在
main()函数中调用getOldPhotoColor()函数，那么getOldPhotoColor()函数要在main()函数之前定义 -
getOldPhotoColor()函数在main()函数使用时，要注意包裹在USE_OLD_PHOTO宏中使用，因为这个函数是定义在该宏中。 - Cocos Creator 在 关于 UBO 内存布局 中有如下规定：
首先结论是，我们规定在 shader 中所有非 sampler 的 uniform 都应以 block 形式声明
- 因此，按照这个规定，我们将
oldLevel属性放在了UBO结构对象中
- 我们定义了的
oldLeveluniform 属性，还应该在 CCEffect 结构中声明，这样子我们可以在编辑器中进行变量修改调试
Inspector
ps: 注意，编辑器属性的key是inspector名称，而官方文档截图中的editor，小问题，提醒一下。
image.png
来自评论2楼的提醒
Creator 3D 中，这里的确为 editor ，Cocos Creator 从 2.3 开始同步了这个修改，2.3 之前还是 inspector
OK，现在我们就可以打开我们的编辑器，在 Inspector 中修改 oldLevel 去查看不同老化程度的效果。
三、修改材质 uniform 属性
当然我们也可以做个测试场景去实时看这个渐变效果。代码中更新材质的 uniform 属性，在 Cocos Creator 上需要3步：
// 获取渲染组件的材质
let material: cc.Material = sprite.getMaterial(0);
// 给材质的 uniform 变量跟新值
// let oldLevel: number = 1.0; // [0.0, 1.0]
material.setProperty("oldLevel", oldLevel);
// 重新将材质设置回去
sprite.setMaterial(0, material);
配合一些其他组件，比如：cc.Slider 等，我们就可以做出这种测试效果了。
四、总结
写完下来，是不是感觉我很啰嗦，因为是这个系列的第一个的特效，所以难免写了很多基础的内容，后续的特效可能不会那么啰嗦了。
Ok，回归主题。
其实，除了 老化原理的那条公式 之外，其他都是属于很基础，很通用的东西，后续都可以用上。
而类似的，单单公式就可以实现的一些特效，还有我们经常用的 变灰特效 。而这个特效已经内置在 Cocos 中，公式是什么呢？大家自行查阅，课后作业~~
OK，本章完，完整代码在我的 Github 仓库 或 Gitee 仓库 中可以找到。
下一篇：
上一篇：
