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

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

微信公众号