アイテムスロットにアイテムを装着する機能の実装例��
最終更新：
orika_ex_miyako 2024年04月29日(月) 19:09:38履歴
複数の手順で学習を行います。
多くのゲームで採用されている機能の１つに、所持しているアイテムをアイテムスロットに装着する機能があります。
これは消費アイテムだけではなく、装備においても利用されていますので、汎用的な設計にしておくことで応用が可能になります。
設計
最初に UI を作成します。ここでは Warframe というゲームの MOD 装着画面をベースに作成していますが、
実際には自分のプロジェクトにあった内容で作成してください。
UI が完成したら、次は UI 内に配置するアイテムのゲームオブジェクトを制御するクラスを作成します。
また、各アイテムの設定はスクリプタブル・オブジェクトなどで管理しますので、データ管理用のクラスも作成していきます。
続いて、所持しているアイテムを管理するクラス、また、この所持しているアイテムの情報を元に
UI 画面内にアイテムのオブジェクトを並べて生成する機能を作成します。
最後にアイテムスロットにアイテムを装着する機能を作成します。
装着方法ですが、これは多くの場合、ドラッグアンドドロップで任意のスロットに配置する方法と
スロットかアイテムを選択し、それと１対１の関係性で配置する方法があります。
よってここは実装内容により２つの記事を用意しますので、任意の方法で実装をおこなってください。
ドラッグアンドドロップの場合、スロット側にはタップ感知機能は設けず、
アイテム側のみタップ(クリック)で選択できる状態になります。
そしてどのアイテムをドラッグしたまま任意のスロットの上まで移動させてドロップすることで装着となります。
この方法はスマホゲームにはあまり適さないため、PC ゲーム用の場合として検討した方がよいでしょう。
理由は、ユーザーの指で選択しているアイテムが隠れてしまうため、どのアイテムを選んでいるかわかりにくくなるためです。
スロットかアイテムを選択しておく方法の場合、先にスロットをタップしておけば、次にアイテムを選択するとそのアイテムを装着します。
先にアイテムをタップしておけば、次にスロットを選択するとそのアイテムを装着します。
この場合、スロットをタップすると装着先のスロットが変わります。
こちらの方法はプラットフォームに関係なく利用でき、スマホゲームの場合には適しています。
新しい学習内容は、以下の通りです。
３２．キャラ配置用のポップアップ・ゲームオブジェクトとして PlacementCharaSelectPopUp を作成する
１．設計を考える
現在はタイルマップの上をタップするとキャラを固定で１つ生成して配置を行っています。
他のキャラの情報を活用して、選択したキャラを配置できるように、専用のポップアップ画面と機能の実装を検討します。
この手順ではまずポップアップを作成します。
次以降の手順でポップアップ内に生成するキャラのボタン(サムネイル画像)と生成までの制御を実装します。
参考用の完成図を提示します。レイアウトはこの通りである必要はありません。自由に配置してみてください。
＜完成図＞
ヒエラルキー画像
Sceneビュー画像
Gameビュー画像
この例では、ポップアップの上半分に選択しているキャラの情報を表示し、下半分にキャラのボタンを表示するようにします。
ボタンの部分はキャラが増えてもいいように左右にスライドして画面から見えないキャラのボタンもスクロールして選択できるようにしておきます。
ポップアップ内の各ゲームオブジェクトの役割についてまとめておきます。
ここでは上記のレイアウトを基準に設計していますので、もしもこれ以外の情報を表示したい場合にはそちらも追加してください。
命名規則にも注視してみてください。
＜PlacementCharaSelectPopUp ゲームオブジェクトの構成(上半分)＞
＜PlacementCharaSelectPopUp ゲームオブジェクトの構成(下半分)＞
これらを参考にしながら作成を行っていきます。
２．Canvas ゲームオブジェクトを作成する
ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas を選択します。
Canvas ゲームオブジェクトと EventSystem ゲームオブジェクトが作成されます。
ヒエラルキー画像
Canvas を作成した際には、必ず CanvasScaler コンポーネントを確認し、Game ビューの解像度と同じ設定になるように UI Scale Mode と Reference Resolution の調整を行ってください。
数値はご自分の Game ビューの設定値に合わせてください。
参考値� �Game ビューの解像度ー
参考値�◆ �Reference Resolution の値を Game ビューの解像度同じにするー
この設定を元にして、Canvas 内の UI のゲームオブジェクトは配置されます。
そのため、最初に CanvasScaler コンポーネントの設定を忘れると、他の UI 用のゲームオブジェクトの設定もすべて見直さなければならなくなり、大変非効率です。
Canvas を作成したら、CanvasScaler コンポーネントを必ず設定する、という風に、処理の流れとして覚えてしまうようにしてください。
この手順は完了です。
３．PlacementCharaSelectPopUp ゲームオブジェクトを作成する
Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
Canvas ゲームオブジェクトの子オブジェクトとして新しいゲームオブジェクトが作成されますので、名前を PlacementCharaSelectPopUp に変更します。
Canvas ゲームオブジェクトの子オブジェクトになっていない場合には一度削除して作成し直してください。
PlacementCharaSelectPopUp ゲームオブジェクトを選択し、インスペクターの一番下にある Add Component ボタンを押して、Canvas Group コンポーネントを追加してください。
設定は変更なしで問題ありません。
インスペクター画像
以上でこのゲームオブジェクトは完成です。
４．txtPrefab ゲームオブジェクトを作成する
Canvas にてゲームオブジェクトを作成する場合、Text コンポーネントを扱うゲームオブジェクトについてはプレファブを１つ作成しておいて、そちらをすべてに利用する手法がおすすめです。
プレファブの機能として、設計図であるプレファブを変更すれば、そのクローンであるすべてのゲームオブジェクトに設定が反映されます。
例えば、Text コンポーネントのフォントや色、文字装飾などの設定が、設計図であるプレファブを１つ変更するだけで、すべてのクローンのゲームオブジェクトも変更になります。
インスペクター画像
今回は１つだけプレファブにして活用していますが、フォントごとに分けて作成しておくと便利です。
数字専用表示用のフォントのプレファブ、通常の文字表示のフォントのプレファブという具合です。
５．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 ゲームオブジェクト＞
キャラの選択を促す文字列を表示するためのゲームオブジェクト。
スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。
６．PlacementCharaSelectPopUp ゲームオブジェクトの子オブジェクトとして ScrollView ゲームオブジェクトを作成する
配置可能な防衛用の味方キャラの一覧を管理するためのフォルダ役のゲームオブジェクトです。
Scroll View コンポーネント自体の機能については割愛しますので、自分で調べて機能を確認しておきましょう。
PlacementCharaSelectPopUp ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => ScrollView を選択してください。
新しく ScrollView ゲームオブジェクトが作成されます。PlacementCharaSelectPopUp ゲームオブジェクト以外の他のゲームオブジェクトの子になっていないか確認しておいてください。
ヒエラルキー画像
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 ゲームオブジェクトの下部にあるスライドバーの部分です。ゲームを実行すると自動的に隠れるようになっています。
変更はありませんので割愛します。
７．＜Grid Layout Groupコンポーネントの使用方法＞
Grid Layout Groupコンポーネントは Layout を自動的に調整するコンポーネントの１つです。
設定によって縦方向でも横方向でも並べることができるため、汎用性が広い Layout の調整が可能です。
今回設定を行ったプロパティについて説明していきます。
１．CellSize
CellSize は、Grid Layout Group の子オブジェクトとして配置されたゲームオブジェクトの Width と Height をこの大きさに自動的に調整します。
そのため元のゲームオブジェクトの大きさは使用されなくなります。
今回は x = 150, y = 150 で設定をしていますので、子オブジェクトは自動的にこのサイズのゲームオブジェクトに調整されます。
今回であれば次の手順で作成する味方のキャラのサムネイル用のゲームオブジェクトの大きさがこのサイズに自動調整されます。
２．Spacing
Spacing は設定した x と y の値の分だけ、隣り合うゲームオブジェクトとの間にスペースを自動的に取ってくれる機能です。
この値を 0 にすればスペースのない間隔でゲームオブジェクト同士が並びます。x は水平方向のスペース、y は垂直方向のスペースの距離です。
今回 X = 20 に設定していますので、子ゲームオブジェクト同士は水平方向に 20 のスペースを取って自動的に並ぶようになります。
３．Start Corner
子オブジェクトを並べ始めるスタート地点です。プルダウンメニューから選択可能です。
今回は Upper Left の設定にしていますので、子オブジェクトは親オブジェクトの左上から順番に並び始めるようになります。
４．Start Axis
子オブジェクトを並べる方向です。垂直方向に並べる場合には Vertical、水平方向に並べる場合には Horizontal を選択します。
今回は水平方向に並べてそろえたいので、Horizontal を選択しています。
５．Child Alignment
子オブジェクトの配置を行う際、すべての要素が詰まっていない場合に、どの位置に子オブジェクトを配置するか設定する機能です。
今回は Upper Left に設定しています。この設定があると、Start Cornerによって並んだあと、空いている場所がある場合には、この設定によって位置が変更されます。
そのため、１つしか子オブジェクトがない場合には、左に位置するようになり、２つになったときは、左からみて２つ並ぶようになります。
６．Constraint と ConstraintCount
行と列の数を指定数で制約することができる機能です。プルダウンメニューで設定できます。
子オブジェクトを並べていった際に、指定数が並んだら途中で折り返すのか、そのままずっと範囲内であれば指定方向に並べていくのかをプルダウンメニューで設定できます。
今回は Fixed Row Count の設定にしています。垂直方向に指定数だけ並んだら、次の列に移ってまた並べ始めるという設定です。
Constraint Count が指定数になります。今回は 1 を指定していますので、垂直方向に１つ子オブジェクトが並んだら
次の行へ移動してまた垂直方向に１つ子オブジェクトを並べる、という並び順を指定しています。
新しいコンポーネントに触れたときは、自分で設定を変えて試してみてください。
マニュアルや、他の記事なども参考にしてください。
便利なコンポーネントになりますので、ぜひ自分で色々と設定を変更しながら、どのような挙動制御が可能なのかを確認してください。
８．PlacementCharaSelectPopUp ゲームオブジェクトの子オブジェクトとして ButtonSet ゲームオブジェクトと Button ゲームオブジェクト群を作成する
ButtonSet ゲームオブジェクトは Button ゲームオブジェクトを管理するためのフォルダ役のゲームオブジェクトです。
PlacementCharaSelectPopUp ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
PlacementCharaSelectPopUp ゲームオブジェクトの子オブジェクトとして新しいゲームオブジェクトが作成されますので、名前を ButtonSet に変更します。
ヒエラルキー画像
インスペクター画像
ButtonSet ゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトを２つ作成します。
ButtonSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Button を選択してください。
新しく Button ゲームオブジェクトが作成されます。子オブジェクトとして Text ゲームオブジェクトが自動的に作成されますので、
こちらは削除して、代わりに TextPrefab ゲームオブジェクトをドラッグアンドドロップして子オブジェクトとして利用してください。
＜btnClosePopUp ゲームオブジェクト＞
ポップアップを閉じるためのボタンです。
ボタンの制御はスクリプトから行います。
＜btnChooseChara ゲームオブジェクト＞
選択しているキャラを決定し、タイルマップ上に配置するボタンです。同時にポップアップを閉じます。
ボタンの制御はスクリプトから行います。
各子オブジェクトの TextPrefab ゲームオブジェクトには適宜なメッセージを入れてください。
実装例としては「配置する」「配置を止める」を登録しています。
以上でこの手順は終了です。
次は 手順１９ −PlacementCharaSelectPopUp ゲームオブジェクトの生成処理の実装− です。
多くのゲームで採用されている機能の１つに、所持しているアイテムをアイテムスロットに装着する機能があります。
これは消費アイテムだけではなく、装備においても利用されていますので、汎用的な設計にしておくことで応用が可能になります。
設計 
最初に UI を作成します。ここでは Warframe というゲームの MOD 装着画面をベースに作成していますが、
実際には自分のプロジェクトにあった内容で作成してください。
UI が完成したら、次は UI 内に配置するアイテムのゲームオブジェクトを制御するクラスを作成します。
また、各アイテムの設定はスクリプタブル・オブジェクトなどで管理しますので、データ管理用のクラスも作成していきます。
続いて、所持しているアイテムを管理するクラス、また、この所持しているアイテムの情報を元に
UI 画面内にアイテムのオブジェクトを並べて生成する機能を作成します。
最後にアイテムスロットにアイテムを装着する機能を作成します。
装着方法ですが、これは多くの場合、ドラッグアンドドロップで任意のスロットに配置する方法と
スロットかアイテムを選択し、それと１対１の関係性で配置する方法があります。
よってここは実装内容により２つの記事を用意しますので、任意の方法で実装をおこなってください。
ドラッグアンドドロップの場合、スロット側にはタップ感知機能は設けず、
アイテム側のみタップ(クリック)で選択できる状態になります。
そしてどのアイテムをドラッグしたまま任意のスロットの上まで移動させてドロップすることで装着となります。
この方法はスマホゲームにはあまり適さないため、PC ゲーム用の場合として検討した方がよいでしょう。
理由は、ユーザーの指で選択しているアイテムが隠れてしまうため、どのアイテムを選んでいるかわかりにくくなるためです。
スロットかアイテムを選択しておく方法の場合、先にスロットをタップしておけば、次にアイテムを選択するとそのアイテムを装着します。
先にアイテムをタップしておけば、次にスロットを選択するとそのアイテムを装着します。
この場合、スロットをタップすると装着先のスロットが変わります。
こちらの方法はプラットフォームに関係なく利用でき、スマホゲームの場合には適しています。
新しい学習内容は、以下の通りです。
・Text 表示用のゲームオブジェクトのプレファブ活用 ・Grid Layout Group コンポーネントの使用方法
３２．キャラ配置用のポップアップ・ゲームオブジェクトとして PlacementCharaSelectPopUp を作成する
１．設計を考える
現在はタイルマップの上をタップするとキャラを固定で１つ生成して配置を行っています。
他のキャラの情報を活用して、選択したキャラを配置できるように、専用のポップアップ画面と機能の実装を検討します。
この手順ではまずポップアップを作成します。
次以降の手順でポップアップ内に生成するキャラのボタン(サムネイル画像)と生成までの制御を実装します。
参考用の完成図を提示します。レイアウトはこの通りである必要はありません。自由に配置してみてください。
＜完成図＞
ヒエラルキー画像
Sceneビュー画像
Gameビュー画像
この例では、ポップアップの上半分に選択しているキャラの情報を表示し、下半分にキャラのボタンを表示するようにします。
ボタンの部分はキャラが増えてもいいように左右にスライドして画面から見えないキャラのボタンもスクロールして選択できるようにしておきます。
ポップアップ内の各ゲームオブジェクトの役割についてまとめておきます。
ここでは上記のレイアウトを基準に設計していますので、もしもこれ以外の情報を表示したい場合にはそちらも追加してください。
命名規則にも注視してみてください。
＜PlacementCharaSelectPopUp ゲームオブジェクトの構成(上半分)＞
PlacementCharaSelectPopUp フォルダ役のゲームオブジェクト。ここに新しく作成したスクリプトをアタッチしてポップアップ内の制御を行うようにします。 imgBackground ポップアップの背景表示用のゲームオブジェクト imgPickupChara 選択している状態のキャラの画像を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの画像が表示されるように制御します。 txtPickupCharaName 選択している状態のキャラの名前を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。 txtDiscription 選択している状態のキャラの詳細情報を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。 txtPickupCharaAttackPower 選択している状態のキャラの攻撃力を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。 txtPickupCharaAttackRangeType 選択している状態のキャラの攻撃範囲を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。 txtPickupCharaCost 選択している状態のキャラのコストを表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。 txtPickupCharaMaxAttackCount 選択している状態のキャラの攻撃回数を表示するためのゲームオブジェクト。ボタンのゲームオブジェクトを押すとここにそのキャラの情報が表示されるように制御します。 lblPickupCharaAttackPower 攻撃力の文字列を表示するためのゲームオブジェクト。スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。 lblPickupCharaAttackRangeType 攻撃範囲の文字列を表示するためのゲームオブジェクト。スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。 lblPickupCharaCost コストの文字列を表示するためのゲームオブジェクト。スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。 lblPickupCharaMaxAttackCount 攻撃回数の文字列を表示するためのゲームオブジェクト。スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。 lblSelectTitle キャラの選択を促す文字列を表示するためのゲームオブジェクト。スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。
＜PlacementCharaSelectPopUp ゲームオブジェクトの構成(下半分)＞
ScrollView キャラの画像をサムネイル表示したボタンのゲームオブジェクト群を配置するゲームオブジェクト。左右にスクロールする機能を利用します。 子オブジェクトが複数一緒に作成されますので、そちらを利用します。 ButtonSet ポップアップの下部にあるボタンのゲームオブジェクト群をまとめておくフォルダ役のゲームオブジェクト btnClosePopUp ポップアップを閉じるためのボタンのゲームオブジェクト。スクリプトから制御を行います。 btnChooseChara 選択しているキャラを配置実行するためのボタンのゲームオブジェクト。同時にポップアップも閉じる動作も行います。スクリプトから制御を行います。
これらを参考にしながら作成を行っていきます。
２．Canvas ゲームオブジェクトを作成する
ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas を選択します。
Canvas ゲームオブジェクトと EventSystem ゲームオブジェクトが作成されます。
ヒエラルキー画像
Canvas を作成した際には、必ず CanvasScaler コンポーネントを確認し、Game ビューの解像度と同じ設定になるように UI Scale Mode と Reference Resolution の調整を行ってください。
数値はご自分の Game ビューの設定値に合わせてください。
参考値� �Game ビューの解像度ー
参考値�◆ �Reference Resolution の値を Game ビューの解像度同じにするー
この設定を元にして、Canvas 内の UI のゲームオブジェクトは配置されます。
そのため、最初に CanvasScaler コンポーネントの設定を忘れると、他の UI 用のゲームオブジェクトの設定もすべて見直さなければならなくなり、大変非効率です。
Canvas を作成したら、CanvasScaler コンポーネントを必ず設定する、という風に、処理の流れとして覚えてしまうようにしてください。
この手順は完了です。
３．PlacementCharaSelectPopUp ゲームオブジェクトを作成する
Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
Canvas ゲームオブジェクトの子オブジェクトとして新しいゲームオブジェクトが作成されますので、名前を PlacementCharaSelectPopUp に変更します。
Canvas ゲームオブジェクトの子オブジェクトになっていない場合には一度削除して作成し直してください。
PlacementCharaSelectPopUp ゲームオブジェクトを選択し、インスペクターの一番下にある Add Component ボタンを押して、Canvas Group コンポーネントを追加してください。
設定は変更なしで問題ありません。
インスペクター画像
以上でこのゲームオブジェクトは完成です。
４．txtPrefab ゲームオブジェクトを作成する
Canvas にてゲームオブジェクトを作成する場合、Text コンポーネントを扱うゲームオブジェクトについてはプレファブを１つ作成しておいて、そちらをすべてに利用する手法がおすすめです。
プレファブの機能として、設計図であるプレファブを変更すれば、そのクローンであるすべてのゲームオブジェクトに設定が反映されます。
例えば、Text コンポーネントのフォントや色、文字装飾などの設定が、設計図であるプレファブを１つ変更するだけで、すべてのクローンのゲームオブジェクトも変更になります。
インスペクター画像
今回は１つだけプレファブにして活用していますが、フォントごとに分けて作成しておくと便利です。
数字専用表示用のフォントのプレファブ、通常の文字表示のフォントのプレファブという具合です。
５．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 ゲームオブジェクト＞
キャラの選択を促す文字列を表示するためのゲームオブジェクト。
スクリプトから動的に変更されませんので、固定の文字列を入力しておきます。
６．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 ゲームオブジェクトの下部にあるスライドバーの部分です。ゲームを実行すると自動的に隠れるようになっています。
変更はありませんので割愛します。
７．＜Grid Layout Groupコンポーネントの使用方法＞
Grid Layout Groupコンポーネントは Layout を自動的に調整するコンポーネントの１つです。
設定によって縦方向でも横方向でも並べることができるため、汎用性が広い Layout の調整が可能です。
今回設定を行ったプロパティについて説明していきます。
１．CellSize
CellSize は、Grid Layout Group の子オブジェクトとして配置されたゲームオブジェクトの Width と Height をこの大きさに自動的に調整します。
そのため元のゲームオブジェクトの大きさは使用されなくなります。
今回は x = 150, y = 150 で設定をしていますので、子オブジェクトは自動的にこのサイズのゲームオブジェクトに調整されます。
今回であれば次の手順で作成する味方のキャラのサムネイル用のゲームオブジェクトの大きさがこのサイズに自動調整されます。
２．Spacing
Spacing は設定した x と y の値の分だけ、隣り合うゲームオブジェクトとの間にスペースを自動的に取ってくれる機能です。
この値を 0 にすればスペースのない間隔でゲームオブジェクト同士が並びます。x は水平方向のスペース、y は垂直方向のスペースの距離です。
今回 X = 20 に設定していますので、子ゲームオブジェクト同士は水平方向に 20 のスペースを取って自動的に並ぶようになります。
３．Start Corner
子オブジェクトを並べ始めるスタート地点です。プルダウンメニューから選択可能です。
今回は Upper Left の設定にしていますので、子オブジェクトは親オブジェクトの左上から順番に並び始めるようになります。
４．Start Axis
子オブジェクトを並べる方向です。垂直方向に並べる場合には Vertical、水平方向に並べる場合には Horizontal を選択します。
今回は水平方向に並べてそろえたいので、Horizontal を選択しています。
５．Child Alignment
子オブジェクトの配置を行う際、すべての要素が詰まっていない場合に、どの位置に子オブジェクトを配置するか設定する機能です。
今回は Upper Left に設定しています。この設定があると、Start Cornerによって並んだあと、空いている場所がある場合には、この設定によって位置が変更されます。
そのため、１つしか子オブジェクトがない場合には、左に位置するようになり、２つになったときは、左からみて２つ並ぶようになります。
６．Constraint と ConstraintCount
行と列の数を指定数で制約することができる機能です。プルダウンメニューで設定できます。
子オブジェクトを並べていった際に、指定数が並んだら途中で折り返すのか、そのままずっと範囲内であれば指定方向に並べていくのかをプルダウンメニューで設定できます。
今回は Fixed Row Count の設定にしています。垂直方向に指定数だけ並んだら、次の列に移ってまた並べ始めるという設定です。
Constraint Count が指定数になります。今回は 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...
８．PlacementCharaSelectPopUp ゲームオブジェクトの子オブジェクトとして ButtonSet ゲームオブジェクトと Button ゲームオブジェクト群を作成する
ButtonSet ゲームオブジェクトは Button ゲームオブジェクトを管理するためのフォルダ役のゲームオブジェクトです。
PlacementCharaSelectPopUp ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
PlacementCharaSelectPopUp ゲームオブジェクトの子オブジェクトとして新しいゲームオブジェクトが作成されますので、名前を ButtonSet に変更します。
ヒエラルキー画像
インスペクター画像
ButtonSet ゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトを２つ作成します。
ButtonSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Button を選択してください。
新しく Button ゲームオブジェクトが作成されます。子オブジェクトとして Text ゲームオブジェクトが自動的に作成されますので、
こちらは削除して、代わりに TextPrefab ゲームオブジェクトをドラッグアンドドロップして子オブジェクトとして利用してください。
＜btnClosePopUp ゲームオブジェクト＞
ポップアップを閉じるためのボタンです。
ボタンの制御はスクリプトから行います。
＜btnChooseChara ゲームオブジェクト＞
選択しているキャラを決定し、タイルマップ上に配置するボタンです。同時にポップアップを閉じます。
ボタンの制御はスクリプトから行います。
各子オブジェクトの TextPrefab ゲームオブジェクトには適宜なメッセージを入れてください。
実装例としては「配置する」「配置を止める」を登録しています。
以上でこの手順は終了です。
次は 手順１９ −PlacementCharaSelectPopUp ゲームオブジェクトの生成処理の実装− です。
コメントをかく