下面我們來看看游戲UI開發中比較核心的開發,我稱為列表開發,比如背包和各種形式不一的列表等,下面我們來看幾個具體的樣例:
基本上就是一些重復的制作好的多個UI控件進行排列,同時可以支持滾動,當然,高級一點的話也可能需要支持拖拽操作等。
下面我們來學習一下這些功能該如何使用NGUI實現,最后再給出一個具體的示例。
基礎控件
NGUI已經幫助我們設計好了相關的組件,所以我們要實現上面的效果不需要從頭開始,只要學會使用NGUI提供的相關的腳本即可,非常簡單。
ScrollView
即滾動視口組件,當我們需要對一個或多個對象在一個指定的區域內進行滾動時,可以使用該組件。
我們可以在任意的UI下添加一個ScrollView,添加好的ScrollView我們發現其綁定了2個腳本,分別如下:
UIPanel
UIPanel組件主要是可以實現剪輯移出視口的內容,下面我們看看主要使用到的參數的意思:
Clipping:剪輯類型
- None:不剪輯,移出可視區域的圖像任然可見。
- Texture Mask:可以選擇一張貼圖作為遮罩。
- Soft Clip:柔和剪輯,默認選擇該模式,我們一會會集體說它。
- Constrain but don`t Clip:約束不能拖拽出視口但是不進行剪輯。
如果選擇了Soft Clip則會出現一些可選項,如下:
- Offset:視口偏移量。
- Center:和Offset效果一致。
- Size:視口尺寸。
- Softness:剪輯邊緣柔和度。
UIScroll View
本腳本用來控制視口滾動功能,我們具體看下核心的屬性:
- Content Origin:滾動起點,默認為左上角。
- Movement:滾動方向:Horizontal水平方向、Vertical垂直方向、Unrestrained自由拖動、Custom自定義方向。
- Drag Effect:拖動效果:None無效果、Momentum帶慣性的拖動、MomentumAndSpring慣性和彈性的拖動(拖動越界后會自動彈回到正常的位置)。
- Scorll Wheel Factor:滾輪因子,值越大滾動越快。
- Momentun Amount:慣性因子,值越大滾動時慣性越大。
- Restrict Within Panel:拖拽是否被限制在視口內,默認選中即可。
- Cancel Drag If Fits:但剛好合適視口時則退出拖拽。
- Smooth Drag Start:勾選時拖拽開始會有一種緩沖的感覺,不勾選則開始拖動就是鼠標移動的速度。
- IOS Drag Emulation:模擬IOS的拖拽效果,可以增強拖拽體驗。
- Scroll Bars:滾動條屬性允許我們自己設置滾動條,留空則表示不使用滾動條。
我們單獨在看看Scroll Bars的Show Condition屬性:
- Always:總是顯示滾動條。
- Only If Need:當需要顯示時出現。
- When Dragging:拖拽時出現。
Grid
下面我們看看Grid組件,當我們需要對多個UI進行排列時就需要用到這個組件了。
一般我們不會直接添加一個Grid對象(因為Grid對象需要依靠父級對象來確定大小,自身是不能設定尺寸的),我們可以先創建一個Invisible Widget組件,再在該對象下創建Grid組件,最后把需要排序的組件拖入該Grid中即可。
當我們需要在編輯界面就將子對象排列好時可以點擊設置菜單,如下:
我們來看看Grid提供的屬性:
- Arrangement:網格排列方向,Horizontal水平排列、Vertical垂直排列、Cell Snap按子項當前的位置對齊子項。
- Cell Width:子項格子寬度。
- Cell Height:子項格子高度。
- Column Limit:子項最大數量。
- Sorting:排序方式:None按照Index排序、Alphabetic按照名字進行排序、Horizontal和Vertical按照localPosition進行的排序、Custom自己實現的排序方式。
- Pivot:網格起始點錨點。
其它項一般使用默認值即可。
Table
Grid是對子項進行水平或垂直的排序,而Table是對子項進行可換行的排序。
我們來看看Table的屬性:
- Columns:列數,超過該數目會添加一行。
- Direction:行添加方向,Down向下添加、Up向上添加。
- Sorting:排序方式:None按照Index排序、Alphabetic按照名字進行排序、Horizontal和Vertical按照localPosition進行的排序、Custom自己實現的排序方式。
- Pivot:網格起始點錨點。
- Cell Alignment:格子對齊點。
- Padding:間隔。
其它項一般使用默認值即可。
簡單的列表(Demo1)
這里我們就快速的過一遍,示例工程文件會在本系列的結尾給出。
下面我們基於上面學習的組件實現一個簡單的列表:
- 我們在UI中創建一個ScrollView並調整其大小,設置滾動方向為垂直;
- 在ScrollView中添加一個Grid組件,設置其排序方向為垂直,同時設置其Pivot為Top;
- 在Grid組件中添加一個Sprite組件命名為Item,在Sprite組件上添加一些列表和一個按鈕;
- 通過復制創建多個Item到Grid組件中;
實現滾動效果
給每個Item組件都添加Box Collider和Drag Scroll View組件即可;
添加自定義滾動條
NGUI給我們提供了一些已經制作好的預制件,比如水平和垂直滾動條,我們可以直接使用;
- 點擊菜單欄“NGUI”->“Open”->“Prefab Toolbar”;
- 在打開的窗口中選擇“Simple Vertical Scroll Bar”,將其拖拽到場景中擺好位置;
- 選中我們之前創建的Scroll View對象,設置其Scroll Bar屬性中的Vertical為我們剛創建的滾動條即可進行關聯;
運行一下,我們簡單的列表就完成了,雖然還沒有任何的功能。