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~~

源碼在我的微信公衆號回覆關鍵詞【特效】即可獲得

微信公衆號