今回はギルドシーンにダンジョン名を表示するパネルの作成と配置をします。また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）を作成しましょう。構成要素は以下に示す通りです。
①ダンジョン名を表示するテキスト
②そのダンジョンへ移動するためのボタン
③上記２つを一括りにするパネル
それでは実際に作ってみましょう。
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を選択した状態でインスペクターウィンドのAddCompnentボタンを押します。そしてContentSizeFitterを選択しましょう。（上図参照）
ContentSizeFitterがインスペクターウィンドに追加されたら、下の図を参考にVerticalFitをPreferedSizeに変更しましょう。これにより上下方向のスクロールが有効になります。
ContentSizeFitterの設定が完了したらもう一度AddComponentボタンを押して、今度はVerticalLayoutGroupを選択します。（下図参照）
・左右方向の場合はHorizontalLayoutGroupを使います。
最後に下図を参考にVerticalLayoutGroupのSpacingを10に、ChildAlignmentをUpperCenterに変更します。
STEP4：Contentの子要素を設定
最後に、DungeonNamePanelをスクロールできるようにするためContentの子要素にしましょう。方法としてはヒエラルキーウィンドでDungeonNamePanelをContentにドラッグ＆ドロップすればOKです。
とはいえこのままではパネルが１つしかないため、実際に必要な時スクロールできるかがわかりません。そこでDungeonNamePanelを複製し、パネルの数を増やして動作確認をしてみましょう。複製はDungeonNamePanelを選択した状態で右クリックし、Duplicateを選択することで実現できます。
おそらくWindowsでは「ctrlキー+d」でできると思います。
とりあえず、皆さんのお好みでパネルが４つ以上になるように複製してみて下さい。もしパネルに表示されているダンジョン名が同じことが気になるようでしたら子要素のテキストを適宜変更してみるのもいいでしょう。（下図参照）
STEP5：ScrollViewの動作確認
ここまでできたら動作確認をしてみましょう。下図を参考にPlayボタンをクリックし、実際にDungeonBoard内にあるDungeonNamePanelがスクロールで移動することを確認して下さい。
話の切りをよくする関係上、今回はかなり長くなってしまいましたが、上手くできたでしょうか。とりあえず今回はここまでとしたいと思います。皆さん大変お疲れ様でした。
次回はギルドシーンの画面構成最後の要素である会話ログの表示実装となります。
以上。
コメント