【Unity講座_6時限目】ゲーム画面にScrollViewを配置する

今回はギルドシーンにダンジョン名を表示するパネルの作成と配置をします。またUnityに標準実装されている、ScrollView(スクロールビュー)というUIの使い方についても説明しますので、皆さんのゲーム制作にお役立て下さい。

パネルの作成
パネルフレームの作成
ダンジョン名を表示するパネルの作成
スクロールビューの作成

パネルの作成

前回の５時限目で行なったパネル作成とほぼ同じ手順なので詳細は省略しますが、下図を参考にBackGroundImageの子要素として、ダンジョン名掲載用パネルを作成して下さい。

各種設定値
・アンカー:middle-left
・PosX:550,PosY:80
・Width:1050,Height:400
・オブジェクトの名前:DungeonBoardPanel

パネルフレームの作成

次にDungeonBoardPanelに額をつけましょう。

STEP1：Imageオブジェクトの作成と配置

下図を参考にDungeonBoardPanelの子要素としてImageオブジェクトを作成します。

各値は下記の通りです。

各種設定値
・アンカー:middle-center
・PosX:0,PosY:0
・Width:1050,Height:400
・オブジェクトの名前:BoardFrameImage

STEP2：イメージ画像の設定

続いてフレームとなる画像を用意しましょう。今回は下記サイト様の無料素材を使用させていただきます。

素材提供元：ぴぽや倉庫様
URL:https://pipoya.net/sozai/
使用させて頂いた素材：カードフレーム30種
URL:https://pipoya.net/sozai/assets/etc/other/

素材をダウンロードしたら、画像を取り込み、下図を参考にBoardFrameImageのSourceImageに画像をドラッグ＆ドロップして画像を設定しましょう。

ダンジョン名を表示するパネルの作成

今度はダンジョン名を表示するパネル（DungeonNamePanel）を作成しましょう。構成要素は以下に示す通りです。

DungeonNamePanelの構成要素
①ダンジョン名を表示するテキスト
②そのダンジョンへ移動するためのボタン
③上記２つを一括りにするパネル

それでは実際に作ってみましょう。

STEP1：パネルの作成

最初に③を作成します。DungeonBoardPanelの子要素としてPanelオブジェクトを作成し、名前をDungeonNamePanelとします。また、位置や大きさ等の特性値も設定しておきましょう。皆さんも下の図を参考に作成してみて下さい。

各特性値
・アンカー:middle-center
・PosX:0,PosY:0
・Width:900,Height:100
・Color:お好みのものでOK
・オブジェクトの名前:DungeonNamePanel

STEP2：テキストの作成と各種設定

次は①のテキストを作成しましょう。このテキストはDungeonNamePanelの子要素にします。そうする事でこのテキストはDungeonNamePanelと一緒の動きをしてくれるようになります。

子要素にするメリット
DungeonNamePanelを移動させると一緒にテキストも移動してくれるようになります。

皆さんも下図を参考にTextの作成・各特性値の設定をしてみて下さい。なお、Textの名前もDungeonNameTextに変更しておくことにします。

各特性値
・アンカー:middle-center
・Text:ゴブリンの洞窟
・PosX:-85,PosY:0
・Width:700Height:80
・BestFit:true
・Color:お好みのものでOK
・オブジェクトの名前:DungeonNameText

STEP3：ボタンの作成と各種設定

最後に②のボタンを作成しましょう。このボタンもSTEP2同様、DungeonNamePanelの子要素にします。皆さんも下図を参考にButtonの作成・各特性値の設定をしてみて下さい。なお、Buttonの名前もGoDungeonButtonに変更しておくことにします。

各特性値
・アンカー:middle-center
・PosX:355,PosY:0
・Width:150,Height:80
・オブジェクトの名前:GoDungeonButton

さらにこのボタンの子要素となっているTextの特性値も下記のように変更しておいて下さい。名前についても説明の都合上、GoDungeonTextとしておきます。

各特性値
・Text:GO
・FontSize:80
・BestFit:true
・オブジェクトの名前:GoDungeonText

スクロールビューの作成

上ではダンジョン名を表示するパネルを作成しましたが、ここで問題が発生します。それは今の画面ではDugeonNamePanelがせいぜい３つ程度しかDungeonBoardの枠内に入らないという点です。これではダンジョンが３つまでしか登録できないことになり、ゲームとして実際に実装した場合は少し寂しいものとなってしまいます。（下図参照）

そこで使うのがスクロールビューです。スクロールビューを使うと画面の一部をスクロールすることで、画面から見えない所に実装されたオブジェクトを見えるようにできます。

言葉での説明では理解が難しいかもしれないので、下にHAWでスクロールビューを使用している画面の一部を掲載しておきます。

STEP1：スクロールビューオブジェクトの作成

それではイメージも掴めたところで実際にスクロールビューを実装していきましょう。下の図を参考に、DungeonBoardPanelの子要素としてScrollViewオブジェクトを作成して下さい。

STEP2：スクロールビューオブジェクトの配置とサイズの設定

ScrollViewオブジェクトを作成できたら次は位置とサイズを設定しましょう。下の図を参考に、皆さんも設定してみて下さい。

各特性値
・アンカー:middle-center
・PosX:0,PosY:0
・Width:980,Height:360

STEP3：ScrollViewContentの設定

続いてScrollViewの孫要素であるContentの設定を行います。下図を参考に、ScrollViewの子要素であるViewportを開き、Contentを選択して下さい。

このContentの中にScrollViewで表示させたいオブジェクトを入れることで、そのオブジェクトがスクロールの対象となります。

次に、Contentを選択した状態でインスペクターウィンドのAddCompnentボタンを押します。そしてContentSizeFitterを選択しましょう。（上図参照）

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

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

ContentSizeFitterの設定が完了したらもう一度AddComponentボタンを押して、今度はVerticalLayoutGroupを選択します。（下図参照）

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

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

STEP4：Contentの子要素を設定

最後に、DungeonNamePanelをスクロールできるようにするためContentの子要素にしましょう。方法としてはヒエラルキーウィンドでDungeonNamePanelをContentにドラッグ＆ドロップすればOKです。

とはいえこのままではパネルが１つしかないため、実際に必要な時スクロールできるかがわかりません。そこでDungeonNamePanelを複製し、パネルの数を増やして動作確認をしてみましょう。複製はDungeonNamePanelを選択した状態で右クリックし、Duplicateを選択することで実現できます。

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