unity版本:4.6 NGUI版本:3.6.
(轉載請注明參考鏈接及作者)
參考鏈接:http://www.cnblogs.com/louissong/p/3841656.html,作者:博客園 LouisSong
很多情況下,我們需要做血量條來顯示對象的血量,條狀的血量條很容易,直接用NGUI里面的進度條就可以實現,但是有時候我們需要在一些地方做弧形的血量條,下面介紹弧形血量條的方法。
1、首先你需要一張弧形血量的圖片,導入到NGUI的Altas中,NGUI圖集Altas制作參考:http://www.cnblogs.com/vitah/p/3855982.html,下面已經導入了兩張表示弧形血量的圖片,如下所示:

2、導入圖片后可以開始血條的制作,血條的顯示可以用一個進度條或者兩個Sprite來表示,其實就是用兩個Sprite來表示血量,一個表示當前血量,一個表示已損失的血量,進度條里的Background和Foreground實質就是如此,下面只以一個Sprite為例來說明:
在Camera下創建一個Sprite,選擇導入的表示血量的Altas和Sprite,效果如下:

這里再介紹下Sprite的各種參數:
Type:
Smple:除了顯示內容從圖集里面獲取外,其他都和Texture一樣的繪制
Sliced:這個模式支持九宮格拉伸,讓四個角落的圖片不變型,點擊Sprite右側的Edit按鈕可以進行Sprite數據的編輯,設置Border的值即可。
Tiled:瓦片填充,會平鋪進行填充
Filled:這個主要用來做技能CD、進度條等用。FillDir設置填充的模式(360度扇形,水平,垂直等),Fill Amount是填充百分比
Flip:對Sprite進行翻轉:水平、垂直、水平+垂直
3、為了能展示血條的增加和減少,Type肯定選擇Filled不用多說,我們現在只是需要調節血條的填充模式即Fill Dir選項:
選擇Horizontal和Vertical可以看到改變Fill Amount的值的時候血條分別是從左到右和從上到下減少的,血條的邊緣處會有一個斜角,如下圖:


同樣我們測試Fill Dir中的Radial90、180、360選項,可以很明顯的看出NGUI里面Radial90是以矩形圖片左下角的點為圓心減少和增加,Radial180是以圖片矩形的底邊中點為圓心,而Radial360是以矩形的對角線交點為圓心進行增減,Radial90和Radial180不必說,血條的邊緣顯示必定有傾角,而Radical360也會有傾角的存在,如下圖:

4、事實上,我們需要的是以圖片矩形的上邊的中點為圓心來進行血條的增加和減少,這樣才能保證邊緣處的傾角美觀一致,可以按如下方法制作:
把圖片進行垂直翻轉,即Flip選項設為Vertically,可以看到,圖片已經翻轉過來,這時候選擇填充模式為Radial180,圓心仍然是矩形的底邊中點,但圖片已經翻轉,可以看到這時候血條的邊緣已經一致了,效果如下:


可以看到血條的邊緣已經很美觀了;
5、但是這時候,血條的顯示已經翻轉過來,原來的血條效果是成凹形的,現在變成凸形的了,可以改變Transform中的Rotation值再次翻轉,使血條的顯示和給定圖片中的效果一致,如下圖:

6、接下來,我們可以再按上述方式創建一個紅色血條表示血量的減少,通過腳本控制它們兩者的Fill Amount的值就可以用綠色表示當前血量,紅色表示已損失的血量,在此不再贅述。
總結:
1、現在這種方式好像只能用於半圓形血條的顯示效果,一定圓心角的弧長血條沒有相應的美術資源沒有測試過不太清楚;
2、原來的想法是叫美術出了一個上半環為透明的下半環為綠色的表示血量的正方形圖片,然后填充模式用Radial360,類似以前實現技能CD效果的方法來做,但是在導入到Altas中Unity會自動把透明的部分給切掉,此方法失敗。
如果有更好的方法或者疑問請留言,或者郵箱linw1225#163.com(#換成@),謝謝~~~
