ここではUnityに標準実装されているScrollView(スクロールビュー)の使い方の基本について説明します。
STEP1：ScrollViewの作成
先ずはScrollViewを作成します。ヒエラルキーウィンドウを右クリックし、UIを選択→ScrollViewを左クリックの手順でScrollViewを作成して下さい。（下図参照）
STEP2：Canvasの設定
上述の手順によりScrollViewは作成されたと思いますが、下図のようにゲーム画面とScrollViewの大きさや位置が合っていません。
そこで先ずはScrollViewの親要素となっているCanvasの設定を行います。下図を参考にCanvasの設定を行ってみて下さい。
具体的にはヒエラルキーウィンドウでCanvasを左クリックして選択し、インスペクターウィンドウのRenderModeをScreenSpace-Cameraに変更します。（下図参照）
続いてインスペクターウィンドウのRenderCameraにMainCameraをドラッグ＆ドロップします。これによりScrollViewが画面内に表示されるようになったと思います。（下図参照）
STEP3：ScrollViewの位置と大きさの設定
次はScrollViewの位置と大きさを調整しましょう。方法としては下図に示すようにScrollViewを選択した状態でインスペクターウィンドウからPosX,PosY,Width及びHeightを変更します。皆さんもお好みに合わせて調整してみて下さい。
STEP4：Contentへのコンポーネントの追加
実際にスクロールビューを使用するには、表示させたいオブジェクトを、先程作成したScrollViewの孫要素であるContentの子要素に設定する必要があります。ですがその前に必要な設定を行いましょう。
先ずはContentに対してその子要素の配置と調整するLayoutGroupコンポーネント及び子要素のサイズを調整するContentSizeFitterコンポーネントを追加します。
LayoutGroupの追加と設定
下図を参考にContentのインスペクターウィンドウからAddComponentを選択し、VerticalLayoutGroupを追加しましょう。
また、左右方向に並べたい場合はHorizontalLayoutGroupを使います。
次に下図を参考にVerticalLayoutGroupのSpacingを10に、ChildAlignmentをUpperCenterに変更します。
・Spacing:子要素同士の間隔
・ChildAlignment:子要素の並べる基準位置
ContentSizeFitterの追加と設定
続いて、ContentSizeFitterを追加します。先ほどと同様、下図を参考にContentのインスペクターウィンドウからAddComponentを選択し、ContentSizeFitterを追加しましょう。
ContentSizeFitterがインスペクターウィンドに追加されたら、下の図を参考にVerticalFitをPreferedSizeに変更しましょう。これにより上下方向のスクロールが有効になります。
STEP5：スクロールビューに表示させるオブジェクトの作成
最後に、スクロールビュー内に表示させるオブジェクトを作成しましょう。今回は簡単のため標準実装されているボタンオブジェクトを使うことにします。
ボタンオブジェクトの作成
下図を参考にContentの子要素としてボタンオブジェクトを作成しましょう。
ボタンの複製
スクロールビューに表示させたいオブジェクトは作成できましたが、このままではボタンが１つしかないため、実際に必要な時スクロールできるかがわかりません。
そこで先程作成したボタンオブジェクトを複製し、数を増やして動作確認をしてみましょう。
複製はオブジェクトを選択した状態で右クリックし、Duplicateを選択することで実現できます。
（おそらくWindowsでは「ctrlキー+d」でできると思います。）
STEP6：スクロールビューの動作確認
ここまでできたら動作確認をしてみましょう。下図を参考にPlayボタンをクリックし、実際にボタンがスクロールで移動することを確認して下さい。
上手くできたでしょうか。この記事が少しでも皆様のゲーム制作の役に立てば幸いです。
以上。
コメント