CocosCreator特效系列之可控灰度

摘要

在游戏或者影视中，置灰是很常用的特效，那么灰度效果究竟是怎么实现的呢？KUOKUO带你分析原理然后用CocosCreator实现！

正文

效果

原图

加上置灰材质

控制透明度

版本说明

因为 CocosCreator 在 2.1.x 和 2.2.x 新版上的 Effect 上是略有差异的，所以 KUOKUO 决定全部都讲，特意用两个版本分别做了一遍，感动吧，嘿嘿。O(∩_∩)O~~

置灰系数

我们先了解下置灰特效的原理。置灰就是为图片的 RGB 分别乘以权重然后加起来得到一个灰色值，并且将这个灰色值作为新的 RGB 值。没懂？往下看就懂了。

// 假设有一个 RGB 为 20,120,33 的一个颜色
灰度 = R权值 * 20 + G权值 * 120 +  B权值 * 33;

这个 RGB 三个权值可以参考 0.2 0.7 0.1 这三个数，你也可以自定义试试，只要加起来为 1 即可。后续我会采用更精确的权值。

// 代码，gray为浮点数（小数）变量
gray = 0.2 * 20 + 0.7 * 120 + 0.1 * 33

实际操作

光说不练可不成，来跟我一起实际操作吧！（文章最后给出了源码哦！）

新建工程，拖入一个彩色图片，新建一个 Effect 文件，新建一个 Material 文件，点选 Material 文件，在右侧属性面板确保 USE_TEXTURE 选项打勾。如图。

确认后拖入材质

让我们打开 Effect 文件。在编辑器中划到最底下，我们只要做少许改动即可。

先看2.2.x版本的，权值我调整为同引擎的置灰系数 0.2126 0.7152 0.0722 三个值，如图 84 行添加的代码。

我们对 o 这个颜色值进行 RGB 值的获取，并代入公式。最后，我们为输出的颜色赋值 R G B A 最后的参数 1 是透明度。

版本2.1.x同理，只不过是变量名称换成了 color，如图。

置灰效果

可控灰度

到这里你可能已经明白了，只要控制 RGB 权值就可以控制灰度。只要控制最后的那个透明度参数，就可以实现渐隐。那么如何让代码来控制 Effect 中的属性呢？暴露出去！

首先，我们要声明一个 opa 的属性（opacity透明度缩写）。

版本2.2.x做法，如图 16 行。

而版本2.1.x需要多声明一个类型，如图 31-33 行。

这就可以了吗？显然不行，我们需要通过 uniform 进行“桥梁搭建”（简单理解为转化成着色器代码的一部分）。

在2.2.x中，需要我们把变量声明与 uniform Blocks 中。如图 68-70 行。

这样我们就可以在 fs 整体下使用 opa 这个变量。如图 88 行，把原来的 1 透明度修改为 opa 变量。

在2.1.x中，我们不用自己起个 uniform 名字，直接写。如图 91 行。

这样我们保存代码，回到编辑器可以看到变量显示于面板。

调节 opa 为 0.5 看看效果。

控制代码

好了，那么我们如何用代码控制这个属性呢？很简单，使用 setProperty 方法即可，给出代码。

cc.Class({
    extends: cc.Component,

    properties: {
    },

    start () {
        this.value = 1;
        // 得到材质
        this.m = this.getComponent(cc.Sprite).sharedMaterials[0];
    },

    update (dt) {
        this.value -= 0.2 * dt;
        if (this.value < 0) this.value = 0;
        this.m.setProperty('opa', this.value);
    },
});

透明度渐变完成！