关闭

UGUI - 中设置UISprite图片灰显方法

标签: unityUISprite
1414人阅读 评论(0) 收藏 举报
分类:

做Unity开发过程中,有需求让未开启的功能模块的入口灰色显示。因为没有滤镜的概念,所以没flash那么方便。解决思路还是Shader,以前按网上其他帖子的方法,一直没有成功实现过。这两天比较闲一点,专门研究了下,总算成功了。

NGUI里已经有Unlit - Transparent Colored.shader。一般打Atlas的时候默认就是这个。如下图。![这里写图片描述](http://img.blfixed4 frag (v2f IN) : COLOR

{
    return tex2D(_MainTex, IN.texcoord) * IN.color;
}
ENDCGog.csdn.net/20151120094810182)

上面就是Transparent Colored.shader内的核心颜色渲染代码,可见是没有灰色转换的功能的。我们这里需要使用另外个shader,也是NGUI自带的:Unlit - Transparent Colored Gray.shader,它的核心代码如下:

fixed4 frag (v2f IN) : COLOR 
{ 
    fixed4 col; 
    if (IN.color.r < 0.001) 
    { 
        col = tex2D(_MainTex, IN.texcoord); 
        float grey = dot(col.rgb, float3(0.299, 0.587, 0.114)); 
        col.rgb = float3(grey, grey, grey); 
    } 
    else 
    { 
        col = tex2D(_MainTex, IN.texcoord) * IN.color; 
    } 
    return col; 
}

当颜色值的r值为0的时候,就灰色显示。

图集打好后,我们看看效果:这里写图片描述
这里写图片描述
我们将r设置为0,但是图片还是没有成灰色,这是为何呢?后来根据http://bbs.9ria.com/thread-431562-1-1.html的启示,找到NGUI,UIDrawCall.cs类,发现如果是Scroll下,NGUI会更改默认shader,我们是Unlit - Transparent Colored Gray.shader,它会去寻找Unlit - Transparent Colored Gray (SoftClip).shader,然后没找到就默认回nlit - Transparent Colored .shader,这下好办了,我们复制一份Unlit - Transparent Colored Gray.shader,更改它的名字为Unlit - Transparent Colored Gray.shader,然后打开它的代码:

Shader "Unlit/Transparent Colored Gray"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
    }

将最顶上一行修改下名字:

Shader "Unlit/Transparent Colored Gray (SoftClip)"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
    }
}

然后回过头来再看看显示:这里写图片描述
灰色显示成功。
我们要代码控制它灰色怎么操作呢?

Color bgColor = item.FindChild(itemName +"/bgImage").GetComponent<UISprite>().color;
bgColor.r = 0;
item.FindChild(itemName + "/bgImage").GetComponent<UISprite>().color = bgColor;

转载:
http://www.cnblogs.com/1000pen/p/4971737.html?utm_source=tuicool&utm_medium=referral

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

UGUI将图片设置成灰态

本文实现了在UGUI下将彩色图片设置成灰色的功能。实现的方法是修改对应Shader,重点是灰度公式:Gray = R*0.299 + G*0.587 + B*0.114 下面我们来看看是如何实现的。
  • David_Dai_1108
  • David_Dai_1108
  • 2017-03-27 20:55
  • 990

UGUI 图片去色,取灰色

UGUI 图片将其他颜色去除,显示灰色图片本例适用于 UGUI一般项目中会有一些装备图标等,当你拥有该装备时该图标显示为彩色图标,没有改装备时图标显示为灰色图标,一般项目中最占资源的就是图片,不允许添...
  • LIQIANGEASTSUN
  • LIQIANGEASTSUN
  • 2015-11-07 11:41
  • 3366

UGUI灰度处理

好友在线的时候,头像是正常显示,离线的情况下,显示灰色的。可以直接提供两种状态下的图片。但是这样比较浪费资源。直接通过修改着色器,实现是比较好的一个方式。 解决方案: 复制一份 Shader "UI/...
  • liuwumiyuhuiping
  • liuwumiyuhuiping
  • 2016-09-08 10:51
  • 1765

UGUI 图片去色,变灰度图

UGUI 图片将其他颜色去除,显示灰色图片 本例适用于 UGUI 一般项目中会有一些图标,当你拥有该图标显示为彩色图标,一般项目中最占资源的就是图片,不允许添加一张彩色图片,一张灰色图片,必须通过...
  • htwzl
  • htwzl
  • 2017-08-22 22:44
  • 315

Unity - UGUI 图片置灰 Shader

  • 2015-12-11 09:58
  • 2KB
  • 下载

NGUI图片变灰Shader修改

NGUI是强大的插件,但是在UI设计中,很多时候设计者把不可点击的按钮或者图片希望用灰白颜色表示,遗憾的NGUI没有直接提供这样的功能,但是可以通过修改NGUI的几个shader达到这样的效果,我们指...
  • liangZG_2011
  • liangZG_2011
  • 2015-04-08 17:43
  • 870

Unity图片变灰的方式

http://www.tuicool.com/articles/Vruuqme
  • sgnyyy
  • sgnyyy
  • 2014-05-13 15:20
  • 10409

unity笔记-1128-UGUI替换Image图片的三种方式

转载自 http://www.manew.com/thread-96801-1-1.html  网虫虫 在NGUI中,我们可以直接用spriteName = “想要替换的图片名称”;...
  • u010848412
  • u010848412
  • 2016-11-28 09:23
  • 6482

UGUI 图片变灰色

用于技能CD中 ICon 变暗Shader "UGUI/SpriteGray" { Properties { [PerRendererData] _MainTex("Sprite Textur...
  • xinhailong2009
  • xinhailong2009
  • 2017-12-28 10:16
  • 30

UGUI 图片去色,取灰色

UGUI 图片将其他颜色去除,显示灰色图片本例适用于 UGUI一般项目中会有一些装备图标等,当你拥有该装备时该图标显示为彩色图标,没有改装备时图标显示为灰色图标,一般项目中最占资源的就是图片,不允许添...
  • LIQIANGEASTSUN
  • LIQIANGEASTSUN
  • 2015-11-07 11:41
  • 3366
    个人资料
    • 访问:82230次
    • 积分:1470
    • 等级:
    • 排名:千里之外
    • 原创:55篇
    • 转载:46篇
    • 译文:2篇
    • 评论:7条