2015年6月15日 星期一

【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數值做長度調整,最後再移到適當的位置
scroll list

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

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

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下。
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

沒有留言:

張貼留言

【自製小遊戲】水平思考猜謎(海龜湯)

遊戲連結 海龜湯的玩法是由出題者提出一個難以理解的事件,參與猜題者可以提出任何問題以試圖縮小範圍並找出事件背後真正的原因。但出題者僅能以「是」、「不是」或「沒有關係」來回答問題。 本遊戲蒐集各種論壇、平台的42個題目,提供給想玩海龜湯卻愁找不到題目的你們。 ...