Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

Scroll ViewとLayoutコンポーネント群①Scroll Rect

Unity 2019.2.0f1 Personal(2019年8月)

アイテムリストやアチーブメントなど、
ScrollViewが自由に扱えるとゲームの見た目がとてもよくなりますよね。
というわけでScrollViewと、ScrollViewと組み合わせてよく使うLayoutコンポーネント群について
勉強していきたいと思います〜

参考サイト
[Unity uGUI] スクロールビューの基本と軽量なスクロールリストビューの作り方 - Qiita


ScrollViewを作成

Scroll ViewはHierarchy>Create>UI>Scroll Viewから作成することが出来ます〜

f:id:hiyotama:20190816091531p:plain
Hierarchy>Create>UI>Scroll View
するとこんな感じのUIが配置されます。
f:id:hiyotama:20190816091840p:plain
Scroll View
パネルに縦・横のスクロールバーが付いており、ゲームを再生すれば実際に動きます。
(個人的にスクロールバーはあまり使わないので削除しちゃってます。)

Scroll Rect

Scroll Viewを作成するとHierarchyにScroll View・Viewport・Contentと、Scrollbar Horizontal・Scrollbar Verticalが作成されます。
Scroll Viewオブジェクトに付いているScroll Rectコンポーネントを調査します。

f:id:hiyotama:20190816092351p:plain
Scroll Rect

Content:Scroll Viewに並べるコンテンツ(アイテムリストのアイテムなど)を配置するContentオブジェクトを設定します。
ContentオブジェクトのRectTransform>Anchor Presetsは横がstretchとなっているため、Viewportの横幅を踏襲します。(縦幅は個別に設定)
Horizontal, Vertical:Scroll Viewをどの方向にスクロールさせるかを設定します。(Horizontal=横、Vertical=縦)
MovementType:Scroll Viewをスクロールさせた時の動きを設定します。
※Scroll Viewの移動範囲は、
スクロール最下部はViewportの下辺とContentの下辺が重なる箇所、
スクロール最上部はViewportの上辺とContentの上辺が重なる箇所が基準となります。

Unrestricted(無制限)は移動範囲を無視します。コンテンツがどこまでも移動していきます。
Elastic(弾力)は移動範囲に達した後も若干遊びの移動をし、基準位置に戻ります。
Elasticityは基準位置に戻る強さ・速さで、数値が大きいほど弱まります。(個人的に使えそうなのは0.05〜0.2辺り)
Clamped(固定)は名前の通り遊び無く基準位置で止まります。
Inertia(慣性)は途中でスワイプを離しても慣性が働き移動し続けます。
Deceration Rate(減速率)はInertiaの強さを設定します。
1なら等速1以上なら加速1以下なら減速という具合です。
Scroll Sensitivity(スクロール感度)はマウスのホイールやパッドでスクロールした時の移動量を設定します。
0だと完全停止します。
ViewportはViewportオブジェクト(コンテンツの描画範囲を指定するオブジェクト)を設定します。
ViewportのRectTransform>Anchor Presetsは縦横共にstretchとなっているためScroll Viewのサイズを踏襲しておりそこにMaskコンポーネントも付いているので、
実質Scroll Viewのサイズがコンテンツの見える範囲となります。
Horizontal ScrollbarにScrollbar Horizontalオブジェクトを設定することで、Scroll Viewとスクロールバーを連動させることが出来ます。
SpacingはViewportの幅を調整します。
マイナスにするとScrollbarと重なるようにViewportの幅が広がります。
プラスにするとScrollbarから距離を置くようにViewportの幅が狭まります。
ViewportのRectTransformのW Deltaという値が、SpacingとScrollbarのWidthによって変化します。
VisibilityはScrollbarの見え方を設定します。
PermanentはScrollbarを表示する必要がない程Contentの幅が狭くてもScrollbarを表示させ続けます。
Auto HideはContentの幅が狭い場合にScrollbarを非表示にします。
Auto Hide And Expand ViewportはAuto HideによりScrollbarが非表示になった際に、SpacingとScrollbarのWidth分Viewportの幅を広げます。

Scrollbarについては過去記事参照
hiyotama.hatenablog.com

今回はここまでです〜