初めに
指定した領域をスクロールするために用いる Scrollbar についてまとめます。
Scrollbar とは
Scrollbar 全体を見るには大きすぎる画像やそのほかのビューをユーザーがスクロールできるようにするための UI です。
Scrollbar のコンポーネント
Handle Rect
Scrollbar のつまみの部分の Image を指定します。デフォルトでは孫オブジェクトである Handle が指定されています。
Direction
X TO Y の形になっています。X に近づくほど最小値に近づき、Y に近づくほど最大値に近づきます。
Value
Handle の位置を 0～1で表します。型は float です。
Size
Scrollbar 全体を 1 としたときの Handle の大きさを表します。自動で調整されます。
Number of Steps
Handle をスクロールするときのステップ数を表します。0 の場合は滑らかに動き、正の整数 n にすると n 段階でスクロールされます。
Scroll Rect
Scrollbar を使う際、Scroll Rect をいっしょに用います。
Content
スクロールしたい Image や Panel などのオブジェクトの Rect Transform を指定します。スクロールしたいオブジェクトをドラッグ&ドロップすれば指定できます。
Horizontal、Vertical
Horizontal、Vertical にチェックがはいっている（true にしておく）とそれぞれ水平方向、垂直方向へのスクロールが有効になります。
Movement Type
Content の動き方を次の三つから指定できます。
| プロパティ | 機能 |
|---|---|
| Unrestricted（無制限） | Scroll Rect の範囲外にも動かすことができます |
| Elastic（弾性） | Scroll Rect の範囲内に強制的に収めることができます。端に到達した際バウンドさせます。 |
| Clamped（制限付き） | Scroll Rect の範囲内に強制的に収めることができます。端に到達すると Content を止めます |
Elastic を選択したとき、Elasticity を設定できます。
（Elasticity 0.1 の場合）
（Elasticity 0.9 の場合）
Inertia
慣性のことです。チェックが入っていると慣性がはたらき、ドラッグの後ポインターが離されたとき動き続けます。
Deceleration Rate はどのくらい早く動作を止めるかを表します。0 であれば即座に止まり、1 であれば速度がまったく落ちないことを意味します。
Scroll Sensitivity
ホイールのスクロールとパッドのスクロールイベントに対する感度を表します。
Viewport、Horizontal Scrollbar、Vertical Scrollbar
Viewport は親 Rect Transform コンテンツのビューポイント Rect Transform への参照を指定します。
Horizontal Scrollbar、Vertical Scrollbar にはそれぞれ水平方向、水力方向の Scrollbar を参照します。
Scrollbar、Scroll Rect の使い方
今回は 親の Image より大きい子の Image をスクロールできるようにします。
- Image の子オブジェクトを下の画像のように作る
- 子の Image （上の画像では ContentImage ）の大きさを親の Image（上の画像では ParentImage）より大きくする
- 親の Image に Scroll Rect、Mask をつける
- Content、Viewport、Scrollbar を取得する
Scrollbar が水平方向ならば Horizontal、垂直方向ならば Vertical にドラッグ&ドロップします。
- Scroll Rect の使わない方向のチェックを外す
この記事では、垂直方向にスクロールさせるため、Vertical のチェックを外しておきます。
（実行）
補足
Mask を親オブジェクトに付けましたが、Rect Mask 2D でも可能です。
最後に
記事内ででてきた Mask について、以前まとめております。興味があればぜひご覧ください。
fineworks-fine.hatenablog.com
