Cocos2d-x 3.x Shader变暗和变灰

最新推荐文章于 2022-03-07 19:32:16 发布

转载最新推荐文章于 2022-03-07 19:32:16 发布 · 2.8k 阅读

cocos2d-x专栏专栏收录该内容

106 篇文章

订阅专栏

本文介绍如何通过Shader技术实现游戏UI元素的动态变化效果，如按钮的变暗和变灰等，以此减少资源消耗并提高游戏性能。文章提供了具体的Shader代码实例，并展示了实际应用效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.为了节约一张图引发的Shader使用

我们注意到这个游戏当中经常使用一些按钮，美术会给两张图，一张稍微暗点，表示按下的状态。但是这样的图一多起来，就比较占用资源。Sprite更改颜色无法表现出这样的效果。想起来Shader可以。

2.变灰是比较常见

Cocos2d-x中有一个变灰的例子，这里就列出shader代码：

#ifdef GL_ES

precision mediump float;

#endif

varying vec4 v_fragmentColor;

varying vec2 v_texCoord;

void main(void)

{

    vec4 c = texture2D(CC_Texture0, v_texCoord);

    gl_FragColor.xyz = vec3(0.2126*c.r + 0.7152*c.g + 0.0722*c.b);

    gl_FragColor.w = c.w;

}

那几个系数相加会等于1，不同的调整会有不同的效果。效果图：

第一张就是变灰的效果图，但是离第3张的效果还有距离啊。

3.变暗的原理

搞过图形学的应该会比较容易知道，我也是搜索了才知道，我们知道白色是1或者255，黑色是0. 当一个颜色越接近0表示越接近黑色。也就是说，只要把每个像素的颜色乘以一个比1小的数，就会有变暗的效果了！

#ifdef GL_ES

precision mediump float;

#endif

varying vec4 v_fragmentColor;

varying vec2 v_texCoord;

void main(void)

{

    vec4 c = texture2D(CC_Texture0, v_texCoord);

    float greyNum = 0.75;

    vec4 final = c;

    final.r = c.r * greyNum;

    final.g = c.g * greyNum;

    final.b = c.b * greyNum;

    gl_FragColor = final;

}