【遊戲開發】unity教程8 用IMGUI和UGUI實現血條

github傳送門:https://github.com/dongzizhu/unity3DLearning/tree/master/hw8/enhancedDisk

視頻傳送門:https://space.bilibili.com/472759319

目前做的比較完善的且有對抗性質的就是打飛碟的那個小遊戲了,所以這次我們直接在這個項目上做改動,將原本計分的位置改爲血條。

兩種實現

IMGUI

因爲之前的GUI就是用IMGUI製作的,所以改起來比較方便。

首先我們在UserGUI中添加三個變量,分別表示當前的體力值health,以及當前變化的目標體力值resulthealth,以及標誌着resulthealth是否需要更新的信號flag。

接下來就是在所有改動score的地方將UserGUI的flag設爲true,比如在每次得分的時候,如下圖所示。

最後就是將原本用一個Label來顯示分數的地方改成HorizontalScrollbar;其中health的變化我們可以應用Mathf中的Lerp函數來平滑,使得滾軸均勻變化,在視覺上不那麼突兀;然後每次只要flag爲true就更新一下resulthealth的值即可。

最終的效果如下圖所示。

 

UGUI

UGUI則相對複雜一些。

首先我們在main下面新建一個UI中的Canvas命名爲bloodC,然後在Canvas下新建一個Slider命名爲bloodS。

我們將Slider的Background和Handle Slide Area全部勾選爲非激活的狀態,然後將Fill Area中的color選爲紅色,因爲我們只需要它就可以實現血條的效果了。最後還需要調一下bloodC的position和scale就大功告成了。

爲了用代碼控制slider,我們還需要三個新的對象分別是GameObject、Canvas以及Slider。

然後我們通過GameObject.Find()找到canvas,通過transform.Find()找到子對象bloodC以及bloodS。

這裏需要指出的是,我們需要將canvas調用SetActive設爲false,這樣保證在大多數情況下都不會顯示血條;然後在需要顯示血條的時候將其設爲true。但是需要注意,如果一開始就將它勾選掉,那麼Find函數將找不到它,因爲都沒有激活那麼自然也就不是子對象了;所以要在程序開始運行的時候將其設爲激活狀態,然後在這裏也就是start函數中首先用Find找到這個對象,然後再設爲false。

最後在遊戲進行的時候,因爲之前已經設置好了位置,所以這裏直接改動value也就是滾動條的位置即可。

最終效果如下所示。

 

兩種實現的對比

總體來說,IMGUI的實現較爲簡單,不需要使用UI組件,可以快速完成;但是缺點就是因爲操作簡單,所以很多想要的效果很難實現,而且調整整體佈局會是一件很困難的事情,每個部件之間是彼此分離的。

而UGUI則是通過遊戲對象來進行管理的,符合unity3d的總體設計邏輯,與其他對象之間的聯繫更加緊密(如Camera);而且可以很輕易的用幾行代碼做到讓血條保持在對象頭頂並時刻正對玩家。

綜上所述,IMGUI其實是一種臨時湊合的工具,只有在極少數簡陋的情況下可以直接使用IMGUI;大多數都是用於在遊戲中顯示調試信息。若想真正在成品中實現交互,還是需要用UGUI。

 

有關預製

這裏生成的Canvas就可以直接拖入下方的Assets面板中,成爲一個預製。這樣如果在其他scene中想要再次使用,就可以直接脫出來;或者如果想用代碼直接控制生成,也需要將設置好的結構保存爲預製,然後直接load進當前場景。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章