天天看點

【 untiy3d 】 用NGUI 制作滾動條Scroll Bar

滾動條與滑動條Slider不同,滾動條Scroll Bar 多了一個Size 參數(表示)

常用來做顯示滾動的區域

如下面灰色區域滑動條的大小對應size的大小參數變化

【 untiy3d 】 用NGUI 制作滾動條Scroll Bar

一:制作Scroll Bar

建立一個空物體,裡面加上BoxColider,作為觸發點選功能

加上Scroll Bar腳本做滾動功能

二:制作背景圖檔

空物體下制作3個子物體sprite,并添加圖檔,設定深度

【 untiy3d 】 用NGUI 制作滾動條Scroll Bar
【 untiy3d 】 用NGUI 制作滾動條Scroll Bar

三:播放動畫,檢視效果

測試注意細節:

1、點選移動的範圍是coliider的大小範圍

2、滾動的範圍是會根據size的大小設定,如果size為1則不能移動(說明目前頁面是滿頁)

如下圖的滑輪

【 untiy3d 】 用NGUI 制作滾動條Scroll Bar

    3、size不為1就可以滾動讀條,size越小,滾動距離的越多

【 untiy3d 】 用NGUI 制作滾動條Scroll Bar

四:擴充

設定移動視圖 ScrollView 配合滾動條使用

1、建立一個Panel包含一個網格,網格下有多個Sprite圖檔,

2、panel設定裁切效果SoftClip,并設定裁切範圍

3、把滾動條Scroll Bar拖入 ScrollView

4、在Scroll View設定滑動方式

【 untiy3d 】 用NGUI 制作滾動條Scroll Bar

播放遊戲,此時移動滑輪就可以移動Scroll View視圖了

此時,裁切的紅色框大小和Size大小是對應的

繼續閱讀