Cocos2d-x Shader 改变图片颜色（4）｜默然的博客

直接覆盖纹理 RGB 会丢失原图明暗细节。更合适的做法是先计算灰度，再用灰度调制目标颜色。

问题现象

之前介绍过 Cocos2d-x 图片灰度化。要把 Sprite 改为目标颜色，不能直接写入 0～255 的 RGB：

// 比如颜色变红
gl_FragColor.rgba = vec4(255, 0, 0, textureColor.a);

GLSL 颜色分量通常使用 0.0～1.0。即便改成 vec4(1.0, 0.0, 0.0, alpha)，直接覆盖 RGB 也会抹掉原纹理的明暗层次。

• 白色贴图看起来问题不明显：

• 原图带有颜色和明暗变化时，细节会明显丢失：

保留明暗细节的改色方法

1. 计算原图灰度

vec4 textureColor = texture2D(CC_Texture0, v_texCoord);
float gray = dot(textureColor.rgb, vec3(0.299, 0.587, 0.114));

2. 用灰度调制目标颜色

// 这里设置目标颜色为红色
vec3 targetColor = vec3(1.0, 0.0, 0.0);
gl_FragColor = vec4(targetColor * gray, textureColor.a) * v_fragmentColor;

这里保留了纹理 alpha，并乘上 v_fragmentColor，所以节点自身的颜色和透明度仍然生效。

最终效果：

相关阅读

• Cocos2d-x Shader 图片灰度化（2）
• Cocos2d-x Shader uniform 变量（3）
• Cocos2d-x 自定义着色器入门（1）