码迷,mamicode.com
首页 > 其他好文 > 详细

cocos2d 3.X Shader 变暗和变灰

时间:2015-07-17 18:51:06      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:

技术分享


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


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


2.变灰是比较常见


Cocos2d 中有一个变灰的例子,这里就列出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;
}

我这里设置的是0.75

最终效果图:


技术分享


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


http://www.waitingfy.com/archives/1741

版权声明:本文为博主原创文章,未经博主允许不得转载。

cocos2d 3.X Shader 变暗和变灰

标签:

原文地址:http://blog.csdn.net/fox64194167/article/details/46929721

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!