制作進度條(UISlider)


怎樣判斷是否應當使用進度條

  用進度條的主要目的是為了用一根管子的充滿程度來直觀地表示某種數值的百分比,進度條分為可拖動和不可拖動兩種。

  可拖動進度條和不可拖動進度條的原理幾乎是一模一樣,唯一的區別是可拖動進度條上多了一個拖動快和BoxCollider來接收事件,而不可拖動的進度條只能顯示一個數字的百分比,無法由玩家去操控。

  在判斷是否應該使用進度條時,有以下的規律可以遵循:

  (1)如果某一種值,它有最大值,需要表達它當前的值的占比,這個時候用進度條會非常直觀。此時應當用不可拖動的進度條。例如:角色的生命值、法力值、角色升級經驗等。

  (2)如果某一種值,它有最大最小值,希望玩家去自由拖動設置,如音量調節、亮度調節等,就可以使用可拖動的進度條。

  可拖動進度條和不可拖動進度條,它們都有三大核心要素構成:底槽Sprite、進度條Sprite、滑動塊。

  

創建進度條

  1.第一種方式:自己拼裝出一個進度條

  (1)創建一個底槽Sprite。

  (2)為底槽Sprite附加一個UISlider組件。附加方法為AddComponent->NGUI->Interaction->NGUI Slider。

  (3)在底槽Sprite下創建一個進度條Sprite作為子物體,調整好尺寸用以和底槽相吻合。

  (4)在底槽Sprite下創建一個滑動塊Sprite作為子物體,然后在底槽Sprite上Attach一個BoxColllider。

  (5)將底槽Sprite拖動到自身UISlider組件上的Background選項中,將進度條Sprite拖動到底槽的UISlider組件上的Foreground選項中,將滑動塊Sprite拖動到底槽的UISlider組件上的Thumb選項中,這樣三大要素就齊備了。

  (6)如果希望顯示當前進度的百分比數字,則在滑動塊下創建一個Label(如果不希望數字的位置跟着滑動塊走,也可以在別的地方創建Label),然后將該Label物體拖動到底槽的UISlider組件的OnValue Change模塊下的Notify中,然后在出現的Method選項中選擇UILable->SetCurrentPercent方法。

  

  2.第二種方式:使用PrefabToolBar直接創建

  在新版本的NGUI中,它自身制作了一些常用的UI控件的預設,當需要使用時,直接拖動預設到場景中,就可以直接完成創建。

  在Unity頂部菜單中選擇NGUI菜單,選擇Open->PrefabTooBar,會彈出NGUI已經制作好的一些預設。

  拖動其中想要的預設到UI Root下(或者其他的UI節點下),就可以完成創建了。

  

核心組件UISlider設置

  1.Value

    進度值,這是為了顯示當前數值在"總槽"里的百分比。

  2.Alpha

    透明度,默認為1。

  3.Steps

    每次變動的步伐大小。默認為0,0就是無限制,也就是Value值可以是任意一個值,如果設置了,那么Value就會"一段一段的"變化。

    它的填值效果為"關鍵點數量的概念",例如,填入5,則代表完整進度條只有5個點,相當於進度條的值將會只有:0、0.25、0.5、0.75、1共5個值。

  4.Appearance模塊

    Foreground

      這是進度條上層表示進度的Sprite,將它拖動到這里就算完成了設置。Foreground的長度會隨着Value的裱花而自動變化。

    Background

      這是進度條的底槽Sprite,將它拖動到這里就算完成了設置。底槽的長度是不會發生變化的。

    Thumb

      這是拖動塊的設置,將任何一個物體拖動到這里來,它就將隨着Value的變化而發生位置的變化。

     Direction

      進度條的正方向,默認為從左至右。里面提供了4中選擇:從左至右、從右至左、從上到下、從下到上。

  5.On Value Change

      這是進度條發生變化時的一個回調函數,當Value值發生變化時,就會執行這里的函數。

    值得注意的是,如果希望在值發生變化時,自動改變一個百分比數字(Label)的顯示,NGUI提供了一個簡單的方法:將要顯示該進度條百分比的Label物體拖入到Notify中,然后再Method欄中選擇UILabel.SetCurrentPercent方法,這樣,當進度條的Value值改變時,它就能自動地改變這個Label文本的顯示。

 

進度條的BoxCollider說明

  BoxCollider只有附加到底槽上才有用。

  如果沒有BoxCollider,進度條無論如何都無法進行拖動設置。

  BoxCollider將會接收進度條上任何一個位置的消息來直接設置進度。例如,不去拖滑動塊,直接在90%的位置點一下,那么進度會直接變為90%。

  BoxCollider和拖動塊Thumb沒有必然聯系,如果沒有BoxCollider,那么即使有拖動塊,也無法通過拖動和單擊等來設置進度。

  只要有BoxCollider,即使沒有拖動快,也能直接拖動和單擊來設置進度位置。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM