CocosCreator特效系列之圖片像素化

摘要

不管是遊戲還是影視，像素風格總能吸引到一大部分人。KUOKUO 今天爲大家帶來 CocosCreator 的像素化 Effect。

正文

版本說明

使用 CocosCreator 的 2.2.0 版本演示。

像素化原理

對於一張圖片，它是有着大量的像素點的。數量多到一定程度你就感覺不到像素的存在，我們會覺得這個圖片的細節展示的很好。這時，如果你把這些像素分區，相鄰的一部分像素都顯示爲同一個顏色，你可能會發現細節的丟失，這也就是所謂的像素化。如圖，第一張是正常展示細節，第二張是以左上角的顏色爲準全部顯示一個顏色。


看看代碼：

// 根據值進行劃分區域，用floor來就近歸位像素
float x = floor(v_uv0.x * clip_x * 1.0);
float y = floor(v_uv0.y * clip_y * 1.0);
// 根據劃分區域值進行像素劃分
o += texture(texture, vec2(1.0 / clip_x * x, 1.0 / clip_y * y));

效果

視頻演示

嗶哩嗶哩跳轉

結語

Effect 能實現遊戲中很多的炫酷效果，讓我們一起學習！

O(∩_∩)O~~

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

微信公衆號