【Unity】捲動選單 scroll list

這次要講的是可以捲動的選單，透過UI內的scrollbar加上mask製作。
就如下圖所示，選單可以透過移動bar的位置來改變顯示內容，而在框外的選單內容不會被顯示出來。

首先把選單要顯示的範圍決定好，這裡可以使用UI下的Image或Panel，接著在Image或Panel下新增mask。

新增mask後，圖中的半透明範圍就可以當作選單，這裡命名為ListPanel，當然這個區塊原本就是Image或Panel，所以可以換圖來改變選單背景。

接著在ListPanel下新增選單下要顯示的物件，這裡新增Image來做測試：

上圖中我們可以看到mask造成的效果，確定好mask功能沒問題後，就可以在ListPanel下新增Scrollbar，Scrollbar右邊的屬性欄位有Direction可以調整方向，改變Height數值做長度調整，最後再移到適當的位置。

再來新增要被Scrollbar控制的物件，這裡新增空物件ImageList(Add Component Rect Transform)，接著在ImageList下新增Image，之後只要控制ImageList的位置就好。

接著回到Scrollbar上，從下圖中可以看到Scrollbar在做的bar的調整時Value為0到1，這裡將初始Value訂在0。

然後確認ImageList的邊界為多少，自己這裡是Rect Transform Pos Y介於0到380之間，同樣的將初始Pos Y設為0。
新增腳本ScrollbarControl.cs在Scrollbar之下：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class ScrollbarControl : MonoBehaviour {
        private Scrollbar scrollbar;
        void Start(){
                scrollbar = GetComponent<Scrollbar> ();
        }
        public void ListScroll(RectTransform list){
                list.localPosition = new Vector3 (list.localPosition.x, scrollbar.value * 380.0f, list.localPosition.z);////(1)
        }
}

(1)這裡給的是scrollbar.value乘上380，但依個人選單範圍不同要再做調整。
最後把ScrollbarControl.cs新增到Scrollbar的On Value Changed下。

(1)按On Value Changed下的+號新增函式。
(2)將ScrollbarControl.cs拉到左邊None欄位。
(3)No Function選擇ScrollbarControl.cs->ListScroll。
(4)將ImageList拉到右邊None欄位。
做到這裡就算完成了，結果點這裡(含內文沒提到的滑鼠滾輪功能)。
選單類的設計這樣做在畫面受限時這樣做還挺好用的，畫面的物件顯示也不會綁手綁腳，總之這次就到這裡。
以下是素材：
臼井の会 http://usui.moo.jp/frame2.html
CLOST http://eurs.blog65.fc2.com/blog-category-0.html
ヴィントドルフ http://winddorf.oops.jp/1top.htm