欢迎光临Software MyZone,有问题可留言或到站点论坛发帖,争取第一时间帮忙解决 || 站点论坛:火龙论坛 || 淘宝小店:应小心的易淘屋 【欢迎大家提建设性意见】

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

欢迎热爱编程的朋友们参与到cocos2d-x编程中,为了给大家提供良好的交流环境,网站以开启QQ群
Software MyZone:66202765(群号,欢迎加入,若满,请加1群)
Software MyZone 1群(2dx):286504621
【加群请写:Software MyZone或者是firedragonpzy】
淘宝店:【应小心的易淘屋】初次开店,大家多多支持……
群论坛:火龙论坛正试运营阶段,欢迎大家多提些建设性意见……

摘自:http://cn.cocos2d-x.org/tutorial/show?id=2942

我的digitalocean推广链接:https://www.digitalocean.com/?refcode=65dfdb158f1a,Everyone you refer gets $10 in credit,从此链接注册,你将获得10美元。

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,不同的调整会有不同的效果。效果图:

20150717165840290.jpg

第一张就是变灰的效果图,但是离第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;
}

我这里设置的是0.75

最终效果图:

20150717170259938.jpg

已经非常接近第3张我们需要的目标图了。这样就可以省下一半的图片了。不知道渲染速度会不会慢。

发表评论