unity4.6 beta / uGUI スクロール編

5分で作れるスクロールビュー

本当に簡単です。Panelを2つ用意し、それを親子関係にして、親の方に2つのコンポーネントをくっつけるだけです。順番に説明してゆきます。

まずはUIを配置

緑色のPanelにScrollView
橙色のPanelにContents
という名前をつけて、ContentsをScrollViewの子にしました。
さらに、後々スクロールしていることがわかりやすくなるように、いくつかのボタンをContentsの子にしました。

コンポーネントをアタッチする

ScrollViewを選択して、さらにInspectorのAdd ComponentからUI→Scroll Rectを選択してください。
Scroll RectのContentというメンバに、Hierarchyビューにある、先ほど作ったContentsをドラッグ&ドロップしましょう。

なんとこれだけで、スクロールビューとして機能するようになります。gifアニメでどうぞ:

細かい設定

先ほどのScrollViewにアタッチしたScroll Rectのメンバを変えてみましょう。

各メンバの説明:
Content ... スクロールビューの中身を指定する。
Horizontal ... 横方向にスクロールするか。
Vertical ... 縦方向にスクロールするか。
Movement Type ... スクロールビューが端まで来た時、さらにその先までスクロールできるか(Unrestricted)、スクロールできるがすぐに戻される(Elastic)か、全くスクロールさせない(Clamped)かを指定する。
Elasticity ... Movement TypeでElasticを指定した時のみ出現。スクロールを戻す速度を0～1で指定する
Interia ... ビューから指を離した時、スクロールが緩やかに減速していくか。
Deceleration Rate ... Interiaをオンにした時のみ出現。減速する速度を0～1で指定。0に近いほど摩擦が大きい
Horizontal Scrollbar ... 横方向のスクロールバー。また後日……
Vertical Scrollbar ... 縦方向のスクロールバー。

見えちゃいけない場所が見えてる

先ほどのScroll Rectに加えて、Maskをアタッチすることでちゃんとクリッピングしてくれます。ScrollViewを選択して、さらにInspectorのAdd ComponentからUI→Maskを選択すればOKです。