[Unity, NGUI]:スクロールビューにスクロールバーを追加する

[検証バージョン]
Unity 5.1.2p2
NGUI 3.9.1

スクロールビューの基本についてはこちらをどうぞ。

1.スクロールバーの背景となる部分とつまみの部分、計2つのスプライトを作成。
スクロールバーのスプライトを追加

ヒエラルキー上での配置はスクロールビューの配下以外であればどこでも大丈夫。

垂直方向のスクロールバーの場合は2つのスプライトの高さを合わせておく必要がある。
見た目的につまみ部分が前面に表示されるようにDepthの設定もお忘れなく。

2.スプライトにコライダーを設定
スクロールバーの背景部分をクリックして移動する機能が必要なければ、背景用のスプライトにはコライダーを設定しなくても大丈夫。
コライダーの設定は目的のスプライトを選択した状態で、メニューバーから「NGUI」-「Attach」-「Collider」とするのが簡単。

3.適当なオブジェクトにUIScrollBarコンポーネントを追加
UIScrollBar

UIScrollBarコンポーネント用にNGUI Widgetを作ってその配下に先ほど作成したスプライトを配置しておくのが綺麗だと思う。
目的のオブジェクトを選択した状態でメニューバーから「NGUI」-「Attach」-「Scroll Bar Script」。

UIWidgetではなく適当なオブジェクトでも大丈夫だが、UIScrollView自体にUIScrollBarコンポーネントを追加するとスクロールバーの挙動がおかしくなる。

4.UIScrollBarの設定
UIScrollBarの設定

Foreground, Backgroundにそれぞれつまみ用・背景用のスプライトを設定。
Directionも適切に。

5.スクロールビューにスクロールバーを設定
UIScrollViewにスクロールバーを設定

スクロールビューのインスペクタにScroll Barsの項目があるので、Horizontal/Vertical目的の方にスクロールバーを設定。

ここで一度実行すると、UIScrollBarのValueなどの値が反映されるので、そこでスクロールバーの初期位置などを設定できる。
UIScrollBarの設定

Sizeが、スクロールビュー配下の全体サイズに対する表示範囲。スクロールビューに対して2倍のサイズのものを配置していれば0.5となる。
Valueがつまみの初期位置、0〜1。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です