Unityで配置するUI⑫

こんにちは、サメ太郎です。
今回でこのシリーズも12回目となりました。まだまだ続く予定ですので、引き続きお付き合いいただければと思います。

さて今回は「スクロールビュー」についてご紹介していきます。
弊社のメタバース空間では、事業紹介やお問い合わせフォームなど、情報量の多いUIを扱う機会が非常に多くあります。
その際に欠かせないのが「スクロールビュー」です。Unityでは標準機能として用意されており、適切に設定することで直感的に使いやすいUIを作ることができます。

実際に使用されている部分はこちらからご確認ください！
↓メタバース「バーチャルCOMCOM」リンク↓
https://comfort-inc.co.jp/metaverse/
↓メタバース×HPスターターパック版　リンク↓
https://comfort-inc.co.jp/lp_meta/lp_metaverse_starter-pack.html

スクロールビューを作成しよう！

では早速スクロールビューを作成してみましょう。
「UI → Scroll View」を追加すると、以下のような構造が自動的に生成されます。

Scroll View … スクロール全体を管理するオブジェクト（ScrollRectコンポーネント付き）
Viewport … 表示範囲を決めるオブジェクト（RectMask2D付き）
Content … 実際に配置するUI要素の親オブジェクト
Scrollbar（Vertical/Horizontal） … スクロールバー（不要であれば削除可能）

Viewportが「マスク」の役割を果たし、Contentの中身が領域外まで続いても隠してくれる仕組みになっています。
Contentの子オブジェクトとして必要なUIを配置していきましょう！

整列とサイズの自動調整を使いこなそう！

自動で整列する機能を併せて使用するとレイアウトが楽に進められます。
レイアウトの方法は3種類あるので、用途に応じて適切なものを選択してください。
それぞれのコンポーネントをContentに追加すると、要素を自動で整列できるようになります。
・縦並び → Vertical Layout Group
・横並び → Horizontal Layout Group
・グリッド表示 → Grid Layout Group

Vertical Layout Groupを追加してみると、このような内容がインスペクターに表示されます。

パディングや間隔で整列時の空間を、子を整列の項目で整列の基準を設定できます。
設定によって整列の結果もかなり変わるので、色々試してみてくださいね。

また、Contentに「Content Size Fitter」コンポーネントを追加すれば、要素サイズに応じて自動でサイズが拡張され、スクロールが機能するようになります。

水平と垂直で設定ができるので、必要な項目をPreferred Sizeにすると自動調整されます。

スクロールの挙動をカスタマイズしよう！

Scroll Viewの挙動は ScrollRectコンポーネント で細かく設定可能です。
主に設定する頻度が高いものだけ今回はご紹介します。

移動タイプ
・制限なし(Unrestricted) … 無制限にスクロールできる
・弾性(Elastic) … 端に到達するとバウンドする
・クランプ済(Clamped) … 端で止まる

スクロール感度(Scroll Sensitivity)
Unity内で操作するときはあまり調整の必要を感じませんが、Buildすると速度が変わるので注意が必要です。
特にスマホ操作時は調整すると操作感が改善します。

ここまで紹介してきましたが、どうでしょうか。
スクロールビューが情報量の多いUIを整理するために欠かせない要素だと、少しでも興味を持ってもらえたらと思います。
基本構造を理解すれば、シンプルなリストから複雑なUIまで対応可能なので、操作性・演出・パフォーマンスを工夫して、ユーザー体験を大きく向上していきましょう！

次回もUIやデザインに関する内容をお話する予定ですので、お楽しみに！