有時我們需要在Unity3D中繪制進度條,如:
或
如果使用4.6版本以下的unity繪制環形的進度條可能需要費點勁。我搜到的大多數方法都是用NGUI插件,但有時只是為了簡單的畫一個環形UI,使用NGUI反而還增加了學習成本。有一個利用CutOut材質的方法能夠利用alpha值,靈活的控制進度條中需要顯示的部分,以環形進度條為例,方法如下:
1、在PS中制作一張如下所示的圖,RGB為進度條想要的顏色,alpha值從5-250環形漸變(如果從0-255,在進度為0%或100%時會顯示異常,這與CutOut材質的特性有關)
2、新建材質 選擇Transparent Cutout
3、設置紋理
4、將導入的紋理拽入材質
5、新建Quad
6、選擇第2步創建的材質
7、創建正交相機,並將深度置為最前
8、將它們拖到荒無人煙的地方(這是UI,7、8兩步確保它是在場景的最前面,且不會出現在才3D場景中)
9、調整Alpha cutoff觀看效果
10、若想做出反方向的效果,則需要在做圖的時候勾選反向
11、我們的目標是:寫腳本控制alpha cutoff的值
12、代碼如下,最核心的一句已經框起來了
到此為止,轉圈的進度條/能量條的方法闡述完畢,核心思想是利用CutOut材質控制alpha值控制進度條的顯示。在CutOut材質中,當alpha值高於設置的"alpha cutoff"時,完全不透明;低於設置的"alpha cutoff"時,完全透明。利用CutOut材質的這種特性,通過制作合適的漸變紋理,可以實現各種各樣的進度條,美中不足的是抗鋸齒能力不太好。
在這篇博客寫完后,我覺得CutOut材質不能有半透明效果,不太合理,於是乎搞了個shader稍微改進了下,你可以在這里下載本文改進后的資源。至於博客中的截圖嘛……都差不多,懶得更新了,需要的童鞋看看代碼就明白了。