CocosCreator特效系列之像素颜色处理

摘要

说出来你可能不信，我把 Cocos 的官方头像给绿了！

正文

版本说明

使用 CocosCreator 的 2.2.0 版本演示。

像素着色器

在 Effect 的 fs 部分，他会处理每一个像素点然后输出这个像素位置与颜色信息。如上一篇博客的模糊效果就是位置偏移与透明度的改变。那么这一次我们就只从像素颜色的角度出发，对其进行处理。

上图为 Cocos 的一张图片，我们能够发现其主色调为黑、白、蓝。如果我们想把蓝色扣掉呢？在代码中：

逻辑很清晰，如果这个像素的蓝色值超过 0.1 （满值 1.0），我们就让它不显示，也就是透明度为 0.0。

if (o.b > 0.1) {
  o.a = 0.0;
}

效果

如何绿了它

如果你明白了这个道理，变色是很简单的，只要把颜色值进行更改即可。也就是说 r g b a 这四个值是我们能够灵活掌握的。

if (o.b > 0.1) {
  o.r = 0.0;
  o.g = 1.0;
  o.b = 0.0;
  o.a = 1.0;
} else {
  o.r = 1.0;
  o.g = 0.0;
  o.b = 0.0;
  o.a = 1.0;
}

红配绿的效果

可控颜色

如何灵活更改颜色呢？在 Effect 属性中声明一个颜色变量。

myColor: { value: [1, 1, 1, 1], inspector: { type: color} }
// 在下方使用前要声明在 uniform 块里
uniform MYCOLOR {
  vec4 myColor;
};

赋予颜色的代码就好写了：

if (o.b > 0.1) {
  o.r = myColor.r;
  o.g = myColor.g;
  o.b = myColor.b;
  o.a = myColor.a;
} else {
  o.r = 1.0;
  o.g = 0.0;
  o.b = 0.0;
  o.a = 1.0;
}

修改效果

结语

Effect 能实现游戏中很多的炫酷效果，让我们一起学习！

O(∩_∩)O~~

源码在我的微信公众号回复关键词【特效】即可获得

微信公众号