【Unity基礎1】ScrollViewの使い方

Unity基礎

ここでは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の中にScrollViewで表示させたいオブジェクトを入れることで、そのオブジェクトがスクロールの対象となります。

先ずはContentに対してその子要素の配置と調整するLayoutGroupコンポーネント及び子要素のサイズを調整するContentSizeFitterコンポーネントを追加します。

LayoutGroupの追加と設定

下図を参考にContentのインスペクターウィンドウからAddComponentを選択し、VerticalLayoutGroupを追加しましょう。

VerticalLayoutGroupはその子要素を上下方向に等間隔で自動で並べてくれる便利な機能です。
また、左右方向に並べたい場合はHorizontalLayoutGroupを使います。

次に下図を参考にVerticalLayoutGroupのSpacingを10に、ChildAlignmentをUpperCenterに変更します。

SpacingとChildAlignmentの意味は下記の通りです。
・Spacing:子要素同士の間隔
・ChildAlignment:子要素の並べる基準位置

 

ContentSizeFitterの追加と設定

続いて、ContentSizeFitterを追加します。先ほどと同様、下図を参考にContentのインスペクターウィンドウからAddComponentを選択し、ContentSizeFitterを追加しましょう。

ContentSizeFitterがインスペクターウィンドに追加されたら、下の図を参考にVerticalFitをPreferedSizeに変更しましょう。これにより上下方向のスクロールが有効になります。

左右方向のスクロールを有効にしたい場合はHorizontalFitをPreferedSizeにします。

STEP5:スクロールビューに表示させるオブジェクトの作成

最後に、スクロールビュー内に表示させるオブジェクトを作成しましょう。今回は簡単のため標準実装されているボタンオブジェクトを使うことにします。

ボタンオブジェクトの作成

下図を参考にContentの子要素としてボタンオブジェクトを作成しましょう。

お好みに合わせてオブジェクトのWidthやHightなどを変更してみて下さい。
ボタンの複製

スクロールビューに表示させたいオブジェクトは作成できましたが、このままではボタンが1つしかないため、実際に必要な時スクロールできるかがわかりません。

そこで先程作成したボタンオブジェクトを複製し、数を増やして動作確認をしてみましょう。

複製はオブジェクトを選択した状態で右クリックし、Duplicateを選択することで実現できます。

Mac PCであれば「commandキー+d」でも複製が可能です。
(おそらくWindowsでは「ctrlキー+d」でできると思います。)

STEP6:スクロールビューの動作確認

ここまでできたら動作確認をしてみましょう。下図を参考にPlayボタンをクリックし、実際にボタンがスクロールで移動することを確認して下さい。

上手くできたでしょうか。この記事が少しでも皆様のゲーム制作の役に立てば幸いです。

以上。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

スポンサーリンク
HelloAnotherWorld
HelloAnotherWorld
¥120
posted withアプリーチ
Unity基礎
ソフィーのUnity講座

コメント