Cocos Creator Shader Effect 系列 - 4 - 老照片特效

在阅读过前面的基础章节，相信现在的你已经迫不及待想实现点特效。

• Cocos Creator Shader Effect 系列 - 0 - 前言
• Cocos Creator Shader Effect 系列 - 1 - 材质，Effect，Inspector，纹理之间的关系
• Cocos Creator Shader Effect 系列 - 2 - Effect 文件解读
• Cocos Creator Shader Effect 系列 - 3 - Effect 文件调试

那么我们先来点简单的，比如：老化特效（完整代码在我的 Github 仓库 或 Gitee 仓库 中可以找到）。

2d-sprite-old-photo.gif

老化特效在游戏中有很多使用场合。比如：

• 将照片老化
• 在玩家游戏通关过程中，如果玩家通关失败，给游戏界面进行老化
• ...

使用恰当会给游戏带来更好的体验，现在我们看看怎么实现吧。

一、创建新材质

如果你很清楚怎么创建材质，那么可以跳到下个章节。

既然我们要写自己的特效，那么这次，先来个基础的创建教程：

1. 我们先创建一个材质和一个Effect文件
2. 打开材质的属性编辑器，指定 Effect 为我们刚刚创建的 Effect
3. 将我们材质绑定到一个场景中的纹理上，方便预览调试

New 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 文件，找到 片段着色器 代码部分，加入如下函数即可:

add Code

ps: 可能你会注意，框框部分，我加了一个宏 USE_OLD_PHOTO ，这是我自己为了调试方便而加入的宏，在 Cocos Creator Shader Effect 系列 - 3 - Effect 文件调试 文章中，我有说到宏调试的方案，这里是一个应用例子。

二、线性老化

通过上面的公式，我们得到的是一个直接老化后的效果。

而在实际使用的时候，我们有可能需要一个渐变过程，从不老化渐变为老化效果， 。

那么，我们试着来做一个 线性渐变的老化效果。

线性渐变，其实也是很好理解一个公式：

finalColor = srcColor + (oldColor - srcColor) * oldLevel;

• srcColor：原始颜色
• oldColor：最终老化后的颜色
• oldLevel：老化程度，值在区间 [0.0, 1.0]

依旧还是在 片段着色器 中加入这部分代码即可：

image.png

这里有些注意事项要说一下：

1. 着色程序执行时是从上往下执行，因此，如果我们要在 main() 函数中调用 getOldPhotoColor() 函数，那么 getOldPhotoColor() 函数要在 main() 函数之前定义
2. getOldPhotoColor() 函数在 main() 函数使用时，要注意包裹在 USE_OLD_PHOTO 宏中使用，因为这个函数是定义在该宏中。
3. Cocos Creator 在 关于 UBO 内存布局 中有如下规定：

首先结论是，我们规定在 shader 中所有非 sampler 的 uniform 都应以 block 形式声明

• 因此，按照这个规定，我们将 oldLevel 属性放在了 UBO 结构对象中

4. 我们定义了的 oldLevel uniform 属性，还应该在 CCEffect 结构中声明，这样子我们可以在编辑器中进行变量修改调试
   
   

   Inspector
   
   ps: 注意，编辑器属性的key是 inspector 名称，而官方文档截图中的 editor ，小问题，提醒一下。
   
   

   image.png

来自评论2楼的提醒
Creator 3D 中，这里的确为 editor ，Cocos Creator 从 2.3 开始同步了这个修改，2.3 之前还是 inspector

OK，现在我们就可以打开我们的编辑器，在 Inspector 中修改 oldLevel 去查看不同老化程度的效果。

1.gif

三、修改材质 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 等，我们就可以做出这种测试效果了。

2d-sprite-old-photo.gif

四、总结

写完下来，是不是感觉我很啰嗦，因为是这个系列的第一个的特效，所以难免写了很多基础的内容，后续的特效可能不会那么啰嗦了。

Ok，回归主题。

其实，除了 老化原理的那条公式 之外，其他都是属于很基础，很通用的东西，后续都可以用上。

而类似的，单单公式就可以实现的一些特效，还有我们经常用的 变灰特效 。而这个特效已经内置在 Cocos 中，公式是什么呢？大家自行查阅，课后作业~~

image.png

OK，本章完，完整代码在我的 Github 仓库 或 Gitee 仓库 中可以找到。

原创不易，如果我的文章对你起到帮助，不妨支持一下我吧

Pay

下一篇：

• Cocos Creator Shader Effect 系列 - 5 - 马赛克/像素化特效

上一篇：

• Cocos Creator Shader Effect 系列 - 3 - Effect 文件调试