NGUI禁用Button時變灰

本文轉(zhuǎn)自:Unity3D開發(fā)(二):NGUI之UIButton"禁用"狀態(tài)時置灰
修改Shader讓NGUI支持灰色濾鏡

在使用NGUI的按鈕時,經(jīng)常需要在某種情況下禁用按鈕,使其點擊無效,這時如果能使按鈕變成灰色可以起到不錯的提醒用戶的作用,正常做法是:

UIButton.isEnabled=false找筝;

這句話會觸發(fā)UIButton的Disabled Color投队,但其效果并不是使按鈕圖標(biāo)變成灰色寝志,而是在上面疊加了一層暗色的效果哆料,如圖:

Paste_Image.png
Paste_Image.png

1.原理

Unity3d中所有的渲染都是基于Shader的,而Shader綁定在Material上吗铐,打開一個NGUI例子中自帶的Material东亦,得到其使用Shader的文件
NGUI中大部分材質(zhì)都使用的Unlit/Transparent Colored(PS:雖然在Unlit下,但并不是Unity3d內(nèi)置的唬渗,而是NGUI擴展的)
找到其片段著色器典阵,代碼如下:

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

可以看到從頂點著色器中傳出的顏色屬性乘到了紋理采樣得到的像素上。在本例中镊逝,紋理顏色從國旗上采樣得到壮啊,頂點著色器的顏色則是上圖中"Disabled"屬性的顏色值,所以這是一種疊加效果撑蒜,而不會使圖標(biāo)變灰歹啼。

2.解決方案

方案有兩種,一是準(zhǔn)備兩套素材座菠,一組正常一組灰色狸眼,在合適時機切換到灰色素材即可,但如果游戲中需要置灰的UI比較多浴滴,那么會造成游戲包體變大拓萌。
另一種就是在shader中作處理,以某一個顏色作為"約定"升略,比純黑色(0,0,0,1)微王,將UIButton的Disabled Color設(shè)為(0,0,0,255)屡限,再將Unlit/Transparent Colored的片段著色器部分改成如下代碼:

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)為灰度公式的參數(shù)钧大,渲染效果如圖:

Paste_Image.png

圖中兩個按鈕的Sprite屬于同一張圖集Atlas,將左邊按鈕設(shè)置isEnabled=false后激才,可以看到其變成了灰色圖標(biāo)拓型。

3.優(yōu)化

上述代碼效率比較低,原因是if (i.color.r < 0.001)這里訪問了color的分量r瘸恼,但在官方文檔中明確說了這樣做效率低劣挫,除非必要情況時才使用。因此可將代碼改成下面這樣:

            struct v2f
            {
                float4 vertex : SV_POSITION;
                half2 texcoord : TEXCOORD0;
                fixed4 color : COLOR;
                fixed gray : TEXCOORD1;   //添加這一行
            };  
                
            v2f vert (appdata_t v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.texcoord = v.texcoord;
                o.color = v.color;
                o.gray = dot(v.color, fixed4(1,1,1,0));  //添加這一行
                return o;
            }
                
            fixed4 frag (v2f i) : COLOR
            {
                fixed4 col;  
                if (i.gray == 0)  //修改判斷條件
                {  
                    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;
            }

這樣可以避免訪問color的分量东帅,提高渲染效率压固。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市靠闭,隨后出現(xiàn)的幾起案子帐我,更是在濱河造成了極大的恐慌,老刑警劉巖愧膀,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拦键,死亡現(xiàn)場離奇詭異,居然都是意外死亡檩淋,警方通過查閱死者的電腦和手機芬为,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蟀悦,“玉大人媚朦,你說我怎么就攤上這事∪崭辏” “怎么了询张?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長浙炼。 經(jīng)常有香客問我份氧,道長,這世上最難降的妖魔是什么弯屈? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任半火,我火速辦了婚禮,結(jié)果婚禮上季俩,老公的妹妹穿的比我還像新娘钮糖。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布店归。 她就那樣靜靜地躺著阎抒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪消痛。 梳的紋絲不亂的頭發(fā)上且叁,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天,我揣著相機與錄音秩伞,去河邊找鬼逞带。 笑死,一個胖子當(dāng)著我的面吹牛纱新,可吹牛的內(nèi)容都是我干的展氓。 我是一名探鬼主播,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼脸爱,長吁一口氣:“原來是場噩夢啊……” “哼遇汞!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起簿废,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤空入,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后族檬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體歪赢,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年单料,在試婚紗的時候發(fā)現(xiàn)自己被綠了轨淌。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡看尼,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出盟步,到底是詐尸還是另有隱情藏斩,我是刑警寧澤,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布却盘,位于F島的核電站狰域,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏黄橘。R本人自食惡果不足惜兆览,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望塞关。 院中可真熱鬧抬探,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至怠益,卻和暖如春仪搔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蜻牢。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工烤咧, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人抢呆。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓煮嫌,卻偏偏與公主長得像,于是被迫代替她去往敵國和親镀娶。 傳聞我的和親對象是個殘疾皇子立膛,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 111. [動畫系統(tǒng)]如何將其他類型的動畫轉(zhuǎn)換成關(guān)鍵幀動畫? 動畫->點緩存->關(guān)鍵幀 112. [動畫]Unit...
    胤醚貔貅閱讀 13,020評論 3 90
  • 更新:【面試題含答案】http://bbs.9ria.com/thread-288394-1-1.html 高頻問...
    好怕怕閱讀 4,747評論 3 52
  • 3)從此刻起 我要多聆聽孩子的心聲梯码, 而不是急于評斷孩子宝泵。 因為我知道聆聽才是最好的溝通。 讀到這樣一個故事: 孔...
    一1一1一1一1一閱讀 1,051評論 1 2
  • 愛如斷掉翅膀的蝶轩娶, 輕舞嫚落在我肩頭儿奶。 亦然我心無比癡戀, 但它仍舊選擇飛走鳄抒。 我只能緊緊的跟隨闯捎, 怎奈不能齊肩同...
    燼墨閱讀 276評論 0 1
  • 朋友們可以聽聽樊登讀書會的(親密關(guān)系)非常不錯! 我的原則是把對方放在重要的位置许溅! 凡事彼此商量瓤鼻,就算和對方?jīng)]關(guān)系...
    何蓉閱讀 343評論 0 0