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

Unity講座

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

パネルの作成

前回の5時限目で行なったパネル作成とほぼ同じ手順なので詳細は省略しますが、下図を参考に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の構成要素
①ダンジョン名を表示するテキスト
②そのダンジョンへ移動するためのボタン
③上記2つを一括りにするパネル

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

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がせいぜい3つ程度しかDungeonBoardの枠内に入らないという点です。これではダンジョンが3つまでしか登録できないことになり、ゲームとして実際に実装した場合は少し寂しいものとなってしまいます。(下図参照)

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

言葉での説明では理解が難しいかもしれないので、下に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です。

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

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

とりあえず、皆さんのお好みでパネルが4つ以上になるように複製してみて下さい。もしパネルに表示されているダンジョン名が同じことが気になるようでしたら子要素のテキストを適宜変更してみるのもいいでしょう。(下図参照)

STEP5:ScrollViewの動作確認

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

話の切りをよくする関係上、今回はかなり長くなってしまいましたが、上手くできたでしょうか。とりあえず今回はここまでとしたいと思います。皆さん大変お疲れ様でした。

次回はギルドシーンの画面構成最後の要素である会話ログの表示実装となります。

以上。

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

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

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

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

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

コメント