Unity

Unity

官方網站:點擊進入
官方粉絲團:點擊進入

《Unity》捲動選單-Scroll list

【Unity】 【scroll list】 【捲動】
作者:Jerrard Liu 時間:2015-10-06
原文:Unity - 捲動選單 scroll list
作者:Jerrard Liu

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

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

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

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

上圖中我們可以看到mask造成的效果,確定好mask功能沒問題後,就可以在ListPanel下新增Scrollbar,Scrollbar右邊的屬性欄位有Direction可以調整方向,改變Height數值做長度調整,最後再移到適當的位置
《Unity》捲動選單-Scroll list
 
再來新增要被Scrollbar控制的物件,這裡新增空物件ImageList(Add Component Rect Transform),接著在ImageList下新增Image,之後只要控制ImageList的位置就好。
《Unity》捲動選單-Scroll list

接著回到Scrollbar上,從下圖中可以看到Scrollbar在做的bar的調整時Value為0到1,這裡將初始Value訂在0
《Unity》捲動選單-Scroll list

《Unity》捲動選單-Scroll list

然後確認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下。
《Unity》捲動選單-Scroll list

(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

※其他相關資訊:
《Unity》UI Scrollbar & Scroll Rect
x