Unityに関連する記事です

 以下の内容で実装を進めていきます。

手順18 ーキャラ配置用のポップアップの作成ー
32.キャラ配置用のポップアップ・ゲームオブジェクトとして PlacementCharaSelectPopUp を作成する



 新しい学習内容は、以下の通りです。

 ・Text 表示用のゲームオブジェクトのプレファブ活用
 ・Grid Layout Group コンポーネントの使用方法



32.キャラ配置用のポップアップ・ゲームオブジェクトとして PlacementCharaSelectPopUp を作成する

1.設計を考える


 現在はタイルマップの上をタップするとキャラを固定で1つ生成して配置を行っています。
他のキャラの情報を活用して、選択したキャラを配置できるように、専用のポップアップ画面と機能の実装を検討します。

 この手順ではまずポップアップを作成します。
次以降の手順でポップアップ内に生成するキャラのボタン(サムネイル画像)と生成までの制御を実装します。

 参考用の完成図を提示します。レイアウトはこの通りである必要はありません。自由に配置してみてください。


<完成図>
ヒエラルキー画像



Sceneビュー画像



Gameビュー画像



 この例では、ポップアップの上半分に選択しているキャラの情報を表示し、下半分にキャラのボタンを表示するようにします。
ボタンの部分はキャラが増えてもいいように左右にスライドして画面から見えないキャラのボタンもスクロールして選択できるようにしておきます。



 ポップアップ内の各ゲームオブジェクトの役割についてまとめておきます。
ここでは上記のレイアウトを基準に設計していますので、もしもこれ以外の情報を表示したい場合にはそちらも追加してください。

 命名規則にも注視してみてください。

<PlacementCharaSelectPopUp ゲームオブジェクトの構成(上半分)>
 PlacementCharaSelectPopUp   フォルダ役のゲームオブジェクト。ここに新しく作成したスクリプトをアタッチしてポップアップ内の制御を行うようにします。

 imgBackground          ポップアップの背景表示用のゲームオブジェクト

 imgPickupChara         選択している状態のキャラの画像を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの画像が表示されるように制御します。
 txtPickupCharaName       選択している状態のキャラの名前を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。
 txtDiscription         選択している状態のキャラの詳細情報を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。
 txtPickupCharaAttackPower    選択している状態のキャラの攻撃力を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。
 txtPickupCharaAttackRangeType  選択している状態のキャラの攻撃範囲を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。
 txtPickupCharaCost       選択している状態のキャラのコストを表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。
 txtPickupCharaMaxAttackCount  選択している状態のキャラの攻撃回数を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。

 lblPickupCharaAttackPower    攻撃力の文字列を表示するためのゲームオブジェクト。スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。
 lblPickupCharaAttackRangeType 攻撃範囲の文字列を表示するためのゲームオブジェクト。スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。
 lblPickupCharaCost       コストの文字列を表示するためのゲームオブジェクト。スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。
 lblPickupCharaMaxAttackCount  攻撃回数の文字列を表示するためのゲームオブジェクト。スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。
 lblSelectTitle         キャラの選択を促す文字列を表示するためのゲームオブジェクト。スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。

 
<PlacementCharaSelectPopUp ゲームオブジェクトの構成(下半分)>
 ScrollView    キャラの画像をサムネイル表示したボタンのゲームオブジェクト群を配置するゲームオブジェクト。左右にスクロールする機能を利用します。
          子オブジェクトが複数一緒に作成されますので、そちらを利用します。

 ButtonSet     ポップアップの下部にあるボタンのゲームオブジェクト群をまとめておくフォルダ役のゲームオブジェクト
 btnClosePopUp     ポップアップを閉じるためのボタンのゲームオブジェクト。スクリプトから制御を行います。
 btnChooseChara    選択しているキャラを配置実行するためのボタンのゲームオブジェクト。同時にポップアップも閉じる動作も行います。スクリプトから制御を行います。

 これらを参考にしながら作成を行っていきます。


2.Canvas ゲームオブジェクトを作成する


 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas を選択します。
Canvas ゲームオブジェクトと EventSystem ゲームオブジェクトが作成されます。


ヒエラルキー画像




 Canvas を作成した際には、必ず CanvasScaler コンポーネントを確認し、Game ビューの解像度と同じ設定になるように UI Scale Mode と Reference Resolution の調整を行ってください
数値はご自分の Game ビューの設定値に合わせてください。


参考値  Game ビューの解像度ー



参考値◆ Reference Resolution の値を Game ビューの解像度同じにするー



 この設定を元にして、Canvas 内の UI のゲームオブジェクトは配置されます
そのため、最初に CanvasScaler コンポーネントの設定を忘れると、他の UI 用のゲームオブジェクトの設定もすべて見直さなければならなくなり、大変非効率です

 Canvas を作成したら、CanvasScaler コンポーネントを必ず設定する、という風に、処理の流れとして覚えてしまうようにしてください。

 この手順は完了です。


3.PlacementCharaSelectPopUp ゲームオブジェクトを作成する


 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
Canvas ゲームオブジェクトの子オブジェクトとして新しいゲームオブジェクトが作成されますので、名前を PlacementCharaSelectPopUp に変更します。

 Canvas ゲームオブジェクトの子オブジェクトになっていない場合には一度削除して作成し直してください。

 PlacementCharaSelectPopUp ゲームオブジェクトを選択し、インスペクターの一番下にある Add Component ボタンを押して、Canvas Group コンポーネントを追加してください。
設定は変更なしで問題ありません。


インスペクター画像



 以上でこのゲームオブジェクトは完成です。


4.txtPrefab ゲームオブジェクトを作成する


 Canvas にてゲームオブジェクトを作成する場合、Text コンポーネントを扱うゲームオブジェクトについてはプレファブを1つ作成しておいて、そちらをすべてに利用する手法がおすすめです。
 
 プレファブの機能として、設計図であるプレファブを変更すれば、そのクローンであるすべてのゲームオブジェクトに設定が反映されます。
例えば、Text コンポーネントのフォントや色、文字装飾などの設定が、設計図であるプレファブを1つ変更するだけで、すべてのクローンのゲームオブジェクトも変更になります。


インスペクター画像



 今回は1つだけプレファブにして活用していますが、フォントごとに分けて作成しておくと便利です。

 数字専用表示用のフォントのプレファブ、通常の文字表示のフォントのプレファブという具合です。



5.PlacementCharaSelectPopUp ゲームオブジェクトの子オブジェクトとして各ゲームオブジェクトを作成する


 ここからは PlacementCharaSelectPopUp ゲームオブジェクトの子オブジェクトとしてゲームオブジェクトを配置していきます。
各ゲームオブジェクトの役割については設計にまとめてありますので、そちらを基準にして作成してください。
どのような目的で作成するかを理解しながら進めていくことで自分で作成する際に役立ちます。

 PlacementCharaSelectPopUp ゲームオブジェクトの上で右クリックをしてメニューを開き、適宜なコマンドを実行しています。

 img 〜 で始まるゲームオブジェクトは UI => Image で作成しています。

 txt 〜、および lbl で始まるゲームオブジェクトは UI => Text で作成しています。
これらにはすべて先ほど作成した TextPrefab ゲームオブジェクトをドラッグアンドドロップして利用してください。
修正が容易になります。

 それらが完成してから、ScrollView と Button を作成します。これは次の手順で行いますので、
まずはそれ以外の部分を完成させていきます。

 参考用の画像を添付しておきますが、この通りである必要はありません。作成する順番も自分のレアアウトに沿って作ってください。
自分でデザインを考えて、自由に配置してみてください。
 
<imgBackground ゲームオブジェクト>

 ポップアップの背景表示用のゲームオブジェクトです。







<imgPickupChara ゲームオブジェクト>

 選択している状態のキャラの画像を表示するためのゲームオブジェクト。
ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。
最初の画像は未設定のままで問題ありません。







<txtPickupCharaName ゲームオブジェクト>

 選択している状態のキャラの名前を表示するためのゲームオブジェクト。
ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。







<txtDiscription ゲームオブジェクト>

 選択している状態のキャラの詳細情報を表示するためのゲームオブジェクト。
ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。







<txtPickupCharaAttackPower ゲームオブジェクト>

 選択している状態のキャラの攻撃力を表示するためのゲームオブジェクト。
ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。







<txtPickupCharaAttackRangeType ゲームオブジェクト>

 選択している状態のキャラの攻撃範囲を表示するためのゲームオブジェクト。
ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。







<txtPickupCharaCost ゲームオブジェクト>

 選択している状態のキャラのコストを表示するためのゲームオブジェクト。
ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。







<txtPickupCharaMaxAttackCount ゲームオブジェクト>

 選択している状態のキャラの攻撃回数を表示するためのゲームオブジェクト。
ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。







<lblPickupCharaAttackPower ゲームオブジェクト>

 攻撃力の文字列を表示するためのゲームオブジェクト。
スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。







<lblPickupCharaAttackRangeType ゲームオブジェクト>

 攻撃範囲の文字列を表示するためのゲームオブジェクト。
スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。







<lblPickupCharaCost ゲームオブジェクト>

 コストの文字列を表示するためのゲームオブジェクト。
スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。







<lblPickupCharaMaxAttackCount ゲームオブジェクト>

 攻撃回数の文字列を表示するためのゲームオブジェクト。
スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。







<lblSelectTitle ゲームオブジェクト>

 キャラの選択を促す文字列を表示するためのゲームオブジェクト。
スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。







6.PlacementCharaSelectPopUp ゲームオブジェクトの子オブジェクトとして ScrollView ゲームオブジェクトを作成する


 配置可能な防衛用の味方キャラの一覧を管理するためのフォルダ役のゲームオブジェクトです。
Scroll View コンポーネント自体の機能については割愛しますので、自分で調べて機能を確認しておきましょう。

 PlacementCharaSelectPopUp ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => ScrollView を選択してください。
新しく ScrollView ゲームオブジェクトが作成されます。PlacementCharaSelectPopUp ゲームオブジェクト以外の他のゲームオブジェクトの子になっていないか確認しておいてください。
ScrollView ゲームオブジェクト内にある Scrollbar Vertical ゲームオブジェクトと、その子オブジェクトは今回は利用しませんので、削除してください。


ヒエラルキー画像



Scene ビュー画像




 ScrollView ゲームオブジェクトと、その子オブジェクトの設定を行います。

 Image コンポーネントに背景画像を設定するとフレームの画像を設定できます。
ここでは初期設定ですが、任意の画像に変えて、どの部分がどのように変化するか確認しておくといいでしょう。

 Scroll Rect コンポーネントがスクロールの機能を管理しています。
最初は Hozizontal と Vertical というスイッチが両方ともオンになっています。
このスイッチの方向にスクロール機能が有効になりますので、今回は Verticlal のスイッチをオフにしてください。
こうすることで横方向のみにスクロール機能を有効にできます。

 そのほかは初期設定のままですが、操作して、どの機能がどのような働きを持つか確認しておいてください。

<ScrollView ゲームオブジェクト>






<Viewport ゲームオブジェクト>

 Scroll View ゲームオブジェクトを作成すると自動的に追加されるゲームオブジェクトです。
設定の変更はしていません。








<Content ゲームオブジェクト>

 Scroll View ゲームオブジェクトを作成すると自動的に追加されるゲームオブジェクトです。
初期設定では、このゲームオブジェクトが Scroll Rect コンポーネントの管理化に置かれます。
そのため、このゲームオブジェクトの子オブジェクトとして配置されたゲームオブジェクトについては、
ScrollView ゲームオブジェクトの表示範囲外になった場合でも、スクロールして表示させることができるようになります。

 子オブジェクトについては味方キャラのサムネイル画像のゲームオブジェクトを生成して管理します。
この子オブジェクトについては次の手順で作成しますので、ここに味方キャラのゲームオブジェクト群が存在するようにしますので覚えておいてください。
 
 作成された子ゲームオブジェクトは同じサイズで、かつ一定の距離に自動的に並べて表示したいので、Grid Layout Group コンポーネントContent Size Fitter コンポーネントをアタッチして管理を行うようにしています。
Add Component ボタンを押して順番に追加してください。







<Scrollbar Horizontal ゲームオブジェクト>

 これらも Scroll View ゲームオブジェクトを作成すると自動的に追加されるゲームオブジェクトです。
ScrollView ゲームオブジェクトの下部にあるスライドバーの部分です。ゲームを実行すると自動的に隠れるようになっています。
変更はありませんので割愛します。


7.<Grid Layout Groupコンポーネントの使用方法>


 Grid Layout Groupコンポーネントは Layout を自動的に調整するコンポーネントの1つです。
設定によって縦方向でも横方向でも並べることができるため、汎用性が広い Layout の調整が可能です。
 
 今回設定を行ったプロパティについて説明していきます。


1.CellSize

 CellSize は、Grid Layout Group の子オブジェクトとして配置されたゲームオブジェクトの Width と Height をこの大きさに自動的に調整します。
そのため元のゲームオブジェクトの大きさは使用されなくなります

 今回は x = 150, y = 150 で設定をしていますので、子オブジェクトは自動的にこのサイズのゲームオブジェクトに調整されます。
今回であれば次の手順で作成する味方のキャラのサムネイル用のゲームオブジェクトの大きさがこのサイズに自動調整されます。


2.Spacing

 Spacing は設定した x と y の値の分だけ、隣り合うゲームオブジェクトとの間にスペースを自動的に取ってくれる機能です。
この値を 0 にすればスペースのない間隔でゲームオブジェクト同士が並びます。x は水平方向のスペース、y は垂直方向のスペースの距離です。

 今回 X = 20 に設定していますので、子ゲームオブジェクト同士は水平方向に 20 のスペースを取って自動的に並ぶようになります。


3.Start Corner

 子オブジェクトを並べ始めるスタート地点です。プルダウンメニューから選択可能です。
今回は Upper Left の設定にしていますので、子オブジェクトは親オブジェクトの左上から順番に並び始めるようになります。


4.Start Axis

 子オブジェクトを並べる方向です。垂直方向に並べる場合には Vertical、水平方向に並べる場合には Horizontal を選択します。
今回は水平方向に並べてそろえたいので、Horizontal を選択しています。


5.Child Alignment

 子オブジェクトの配置を行う際、すべての要素が詰まっていない場合に、どの位置に子オブジェクトを配置するか設定する機能です。
今回は Upper Left に設定しています。この設定があると、Start Cornerによって並んだあと、空いている場所がある場合には、この設定によって位置が変更されます。
そのため、1つしか子オブジェクトがない場合には、左に位置するようになり、2つになったときは、左からみて2つ並ぶようになります。


6.Constraint と ConstraintCount

 行と列の数を指定数で制約することができる機能です。プルダウンメニューで設定できます。

 子オブジェクトを並べていった際に、指定数が並んだら途中で折り返すのか、そのままずっと範囲内であれば指定方向に並べていくのかをプルダウンメニューで設定できます。

 今回は Fixed Row Count の設定にしています。垂直方向に指定数だけ並んだら、次の列に移ってまた並べ始めるという設定です。
Constraint Count が指定数になります。今回は 1 を指定していますので、垂直方向に1つ子オブジェクトが並んだら
次の行へ移動してまた垂直方向に1つ子オブジェクトを並べる、という並び順を指定しています。


 新しいコンポーネントに触れたときは、自分で設定を変えて試してみてください。
 マニュアルや、他の記事なども参考にしてください。

 便利なコンポーネントになりますので、ぜひ自分で色々と設定を変更しながら、どのような挙動制御が可能なのかを確認してください。

Unity公式マニュアル
Grid Layout Group
https://docs.unity3d.com/ja/current/Manual/script-...
Unityで魔物使い ゲームを作る様
Grid Layout Group
https://unity-shoshinsha.biz/archives/tag/grid-lay...


8.PlacementCharaSelectPopUp ゲームオブジェクトの子オブジェクトとして ButtonSet ゲームオブジェクトと Button ゲームオブジェクト群を作成する


 ButtonSet ゲームオブジェクトは Button ゲームオブジェクトを管理するためのフォルダ役のゲームオブジェクトです。
PlacementCharaSelectPopUp ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
PlacementCharaSelectPopUp ゲームオブジェクトの子オブジェクトとして新しいゲームオブジェクトが作成されますので、名前を ButtonSet に変更します。


ヒエラルキー画像



インスペクター画像




 ButtonSet ゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトを2つ作成します。
ButtonSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Button を選択してください。
新しく Button ゲームオブジェクトが作成されます。子オブジェクトとして Text ゲームオブジェクトが自動的に作成されますので、
こちらは削除して、代わりに TextPrefab ゲームオブジェクトをドラッグアンドドロップして子オブジェクトとして利用してください。

<btnClosePopUp ゲームオブジェクト>

 ポップアップを閉じるためのボタンです。
ボタンの制御はスクリプトから行います。







<btnChooseChara ゲームオブジェクト>

 選択しているキャラを決定し、タイルマップ上に配置するボタンです。同時にポップアップを閉じます。
ボタンの制御はスクリプトから行います。








 各子オブジェクトの TextPrefab ゲームオブジェクトには適宜なメッセージを入れてください。
実装例としては「配置する」「配置を止める」を登録しています。



 以上でこの手順は終了です。

 次は 手順19 −PlacementCharaSelectPopUp ゲームオブジェクトの生成処理の実装− です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます