评论

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);
    },
});

透明度渐变完成!

结语

怎么样,不难理解吧!有没有更喜欢 KUOKUO 呢!
O(∩_∩)O~~
源码在我的微信公众号回复关键词【置灰特效】即可获得

微信公众号

最后一次编辑于  04-03  
点赞 2
收藏
评论
登录 后发表内容