Unity图片变灰的方式

http://www.tuicool.com/articles/Vruuqme

NGUI中的Button差点儿是最经常使用到的控件之中的一个,而且能够组合各种组件(比方UIButtonColor,UIButtonOffset,UITweenxx),方便设置Button的各种状态下的属性。差点儿能够满足我们的全部需求。

可是对于当Button的isEnabled属性设置为false时,依据设置的disableColor属性设置不可点击时的颜色时,尽管我们设置的灰色,但并非我们想象中的样子!

设置的是灰色,实际执行结果却还是彩色的,仅仅是暗了一点。并不可以非常好地表现出其“禁用”的状态!

1.原理

Unity3d中全部的渲染都是基于Shader的,而Shader绑定在Material上。打开一个NGUI样例中自带的Material,得到其使用Shader的文件

NGUI中大部分材质都使用的Unlit/Transparent Colored(PS:尽管在Unlit下,但并非Unity3d内置的,而是NGUI扩展的)

找到其片段着色器,代码例如以下:

[plain] view plaincopyprint?

  1. fixed4 frag (v2f i) : COLOR
  2. {
  3. fixed4 col = tex2D(_MainTex, i.texcoord) * i.color;
  4. return col;
  5. }
fixed4 frag (v2f i) : COLOR
{
	fixed4 col = tex2D(_MainTex, i.texcoord) * i.color;
	return col;
}

这个片段着色器非常easy,仅仅在“最简单的着色器”上多加了一步,即将从定点着色器中传出的顶点颜色属性乘到了纹理採样得到的像素上。

看到这个代码。就非常easy理解为什么是变暗,而不是变成灰色了

顶点的颜色数据是从UISprite之类的面板中传递进来的,其最大值是白色(255,255,255,255),而这里是正交化的,最大值白色相应(1.0,1.0,1.0,1.0)。这也是默认值,当採样得到的像素值x1.0,相当于採样得到的纹理值;假设设置一个其它的颜色。正交化后肯定会小于1.0,当採样得到的像素值乘以这个值后,像素值会比之前小,而最小值是(0,0。 0,0)即黑色,也就是说假设设置一个不是白色的颜色。就会使像素值更接近于黑色。这就是变暗的原因!

2.置灰

NGUI仅仅提供了这样一种变暗的功能,用来表现其“禁用”的状态,可是这并非最好的结果,假设须要介于黑白之间的灰色纹理,难道非要美术对每个可能会被置灰的纹理又一次制作一张纹理吗?

这就更糟了。游戏中纹理是非常占空间的。这样做相当于将UI资源翻了一倍!

还是从Shader方面入手吧。

想象一下。假设在着色器处理之前。传递一个bool值,当这个bool值为true时。正常绘制纹理;当这个bool值为false时。绘制灰色纹理。

(Unity3d的Shader中并不支持传递bool值,这里仅仅是举个栗子)

这样看似非常合理,也确实能够实现,可是会有一个问题,这个bool值肯定要在顶点着色器阶段传过去,而NGUI提供的“纹理打包”功能(即非常多纹理合并成一个Atlas,即节省空间,还能够有一些其它信息。比方九宫格拉伸的參数。。。),当这个bool值为false时,这个Atlas中所有的绘制即所有变为灰色,这是不符合逻辑的,当然能够每张小图单独处理,即相当于损失掉NGUI的“纹理打包”功能

3.解决方式

损失一个颜色值吧,作为“约定”!

选取一个颜色值,作为约定为置灰的标记,当片段着色器检測到这个颜色值之后,运行渲染灰色的shader!

这个颜色值能够随意选择。我这里选取纯黑色作为“约定颜色”,片段着色器代码例如以下:

[plain] view plaincopyprint?

  1. fixed4 frag (v2f i) : COLOR
  2. {
  3. fixed4 col;
  4. if (i.color.r < 0.001)
  5. {
  6. col = tex2D(_MainTex, i.texcoord);
  7. float grey = dot(col.rgb, float3(0.299, 0.587, 0.114));
  8. col.rgb = float3(grey, grey, grey);
  9. }
  10. else
  11. {
  12. col = tex2D(_MainTex, i.texcoord) * i.color;
  13. }
  14. return col;
  15. }
fixed4 frag (v2f i) : COLOR
{
	fixed4 col;
	if (i.color.r < 0.001)
	{
		col = tex2D(_MainTex, i.texcoord);
		float grey = dot(col.rgb, float3(0.299, 0.587, 0.114));
		col.rgb = float3(grey, grey, grey);
	}
	else
	{
		col = tex2D(_MainTex, i.texcoord) * i.color;
	}
	return col;
}

当中(0.299,0.587,0.114)为灰度公式的參数

我复制了一份NGUI样例的纹理和材质,将此Shader设置到材质中,渲染效果如图

(最上面两个是原始状态下的效果。中间两个是NGUI提供的禁用状态效果。最以下两个各自是改动后Shader渲染同一个Atlas得到的结果)

这才是我想要的灰色!

时间: 2024-10-16 11:59:44

Unity图片变灰的方式的相关文章

c# winform 把彩色图片转换为灰色的图片,变灰,灰度图片,速度很快,safe,unsafe

把彩色图片转换为灰色的图片,直接用.net接口遍历每个像素点转换的效率非常低,800K的图片65万像素我的电脑要用5分钟,而用了unsafe,速度提高了几千倍,同样的图片只用了0.几秒 附一个常用的遍历像素点转换的代码 构造函数 C#代码   public Tphc() { InitializeComponent(); this.pictureBox1.ImageLocation = "F:\\黑色头发.jpg"; } 按钮单击事件 C#代码   private void button

NGUI 图片变灰

效果图 1.先准备好一个变灰shader.代码如下 Shader "Custom/Gray" { Properties { _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {} } SubShader { LOD 200 Tags { "Queue" = "Transparent" "IgnoreProjector" = "Tr

CSS鼠标悬停图片上图片变灰 变色 半透明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

图片变灰

img{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grays

让图片变灰

1 -webkit-filter: grayscale(1); 2 filter: gray; 3 filter: grayscale(1);

网站图片变灰的通用CSS解决方案

<style> html {  -webkit-filter: grayscale(100%);  -moz-filter: grayscale(100%);  -ms-filter: grayscale(100%);  -o-filter: grayscale(100%);  filter: grayscale(100%);  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg

JAVA彩色图片变灰处理

File file = new File("F:/firefox.png"); File destFile = new File("F:/pic/" + System.currentTimeMillis() + ".png"); BufferedImage image = ImageIO.read(file); BufferedImage destImage = new BufferedImage(image.getWidth(), image.

css+js整站变灰(兼容IE7+)

历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那网站内的图片怎么办?难道重做一遍?很明显工作量巨大不符合实际. 火狐和chrome浏览器比较简单,直接用css3搞定: <style type="text/css"> .demo{color: red;} body { filter: grayscale(100%);/*火狐*/ -webkit-filter:grays

tableViewCell上的图片点击,cell变灰,点击其它cell跳转的indexPath不对

在tableViewCell上有一张可以点击的图片,通过Target-Action给图片的imageView添加了点击事件. 但是,在点击图片实现放大效果的时候,图片的背景cell变灰,再次点击其它cell进行页面跳转时,协议方法中得indexPath是刚才点击图片的背景cell的indexPath,不是当前点击的 开始是在图片点击事件中 增加了让选中的cell失去选中状态,但是背景cell只是变灰了,没有选中的cell,所以这个方法不好用. 后来 在自定义的cell中增加了touchesBeg