２Ｄタワーディフェンス　発展３ - i-school

　タワーディフェンスゲームの多くは、画面内に配置できるキャラの総数に上限値があり、本ゲームも同じ機能を採用しています。

　次のステップとしまして、配置しているキャラの配置解除を任意のタイミングで行える機能を実装します。

　ゲーム内の操作方法としては、配置したキャラをタップすることで、解除有無の選択が行えるポップアップが開いて、そこで解除を選択出来るようにします。
当然ながらこのポップアップが開いている間は、ゲーム内の進行状態を切り替えて、カレンシーの加算処理、敵の生成、敵の移動、キャラの攻撃が制御されるようにします。

　２回の手順に分けて実装を行います。目標は次の動画のような内容になります。

＜実装動画＞

動画ファイルへのリンク

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

発展３　－キャラの配置を解除するためのポップアップの作成－

　５．ReturnSelectCharaPopUp ゲームオブジェクトを作成する
　６．ReturnSelectCharaPopUp スクリプトを作成する

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

　・必要な情報を考えて、自由にポップアップを作成する

５．ReturnSelectCharaPopUp ゲームオブジェクトを作成する

１．設計

　
　ポップアップ用のゲームオブジェクトがありませんので、最初に配置したキャラの配置解除の確認が行えるポップアップ用のゲームオブジェクトを作成します。

　機能としましては、配置を解除するキャラの画像を表示し、解除の選択するボタンと解除せずにポップアップを閉じるボタンを検討します。
それ以外の機能についても、適宜、必要だと思われる情報を考えて、ゲームオブジェクトを作成していきます。

　下記が完成時の構造です。これはヒエラルキーにある Canvas ゲームオブジェクトの子オブジェクト群となります。
UI に利用するコンポーネント(Text、Button、Image、ScrollView など)は Canvas 内に配置しないと動作しないようになっています。
また座標系の管理方法も異なるため、Transform ではなく、RectTransform にて管理しています。

構造

完成時のGame ビュー画像

＜応用＞

　なお、新しい Canvas を作成し、今回作成するポップアップ専用としても構いません。
ただしその場合、ポップアップを Instantiate する際の処理が変わります。また、こちらの手順は、この教材には載っていません。
Instantiate メソッドの機能をきちんと理解できている場合のみ、新しい Canvas を作成し、実装にチャレンジしてみてください。

２．Canvas の子オブジェクトとして ReturnSelectCharaPopUp ゲームオブジェクトを作成する

　それでは Canvas の子オブジェクトとして、ReturnSelectCharaPopUp ゲームオブジェクトを作成し、順番に作成していきしょう。

　どのような情報が必要になるのかを考えて、ポップアップとして機能を果たすにはどういったゲームオブジェクトが必要になるのか、
レイアウトはどのようにすればいいのか、などをイメージしながら作成してください。

　サンプルとして、ReturnSelectCharaPopUp ゲームオブジェクトの構成とインスペクター画像を提示します。

　なお、ヒエラルキーにある Canvas の子オブジェクトとして作成後は、プレハブにします。
そのため、この ReturnSelectCharaPopUp ゲームオブジェクト自体には Canvas ゲームオブジェクトを含める必要はありません。

　Canvas 内に別の Canvas を配置すると正常に表示されてなくなりますので、
ポップアップを作成する際には配置するゲームオブジェクト先も考えて作っていくようにしてください。

ReturnSelectCharaPopUp ゲームオブジェクト

　今まで作成したポップアップと同じように、このゲームオブジェクトはフォルダ役となります。
Create Empty で作成しましょう。

ヒエラルキー画像

インスペクター画像

　Canvas の子オブジェクト以外で作成すると、正常に動作しなくなります。
ヒエラルキーの状態を確認し、Canvas の子オブジェクトとして ReturnSelectCharaPopUp ゲームオブジェクトが配置されていることをチェックください。

　これはすでにある Canvas の中に、さらに別の Canvas が配置されるという二重構造になってしまい、正常に機能しなくなることが原因です。

imgBackgorund ゲームオブジェクト

　ここではシンプルに設計し、背景の画像は設定していません。
ゲームの雰囲気や統一感を出すためには、必要に応じてポップアップのフレームとなる画像を設定してください。

インスペクター画像

Sceneビュー画像

txtTile ゲームオブジェクト

　解除を行うかどうかを確認するメッセージを表示するためのゲームオブジェクトです。

インスペクター画像

Sceneビュー画像

btnSubmiReturnChara ゲームオブジェクト

　解除を実行するためのボタンの役割のゲームオブジェクトです。

インスペクター画像

Sceneビュー画像

txtSubmit ゲームオブジェクト

　解除を実行する旨を伝えるメッセージの役割のゲームオブジェクトです。

インスペクター画像

Sceneビュー画像

btnClosePopUp ゲームオブジェクト

　配置の解除は行わずに、ポップアップを閉じるボタンのゲームオブジェクトです。

インスペクター画像

Sceneビュー画像

txtClose ゲームオブジェクト

　解除を行わずにポップアップを閉じるメッセージを表示するためのゲームオブジェクトです。

インスペクター画像

Sceneビュー画像

６．ReturnSelectCharaPopUp スクリプトを作成する

1．設計

　作成したポップアップの制御を行いたいので、ポップアップ用のスクリプトを作成し、
選択したキャラの情報伝達や、ボタンなどの制御を行えるようにします。

　このポップアップですが、キャラをタップした際に、CharaController スクリプトから生成される流れで設計しています。

　そのため、ポップアップ自体はプレファブとして管理されており、配置しているキャラをタップするたびに
新しいポップアップが生成されるというロジックになります。

　いままでに作成したポップアップなども参考にしながら、どのようなロジックを組んでいけばいいかを考えてみましょう。

２．ReturnSelectCharaPopUp スクリプトを作成する

　どのような変数を用意すればボタンなどの制御が行えるようになるかを検討してみてください。
また、どのような機能を持つメソッドがあればポップアップとして機能するようになるかを考えてみてください。
　
　CharaController スクリプトから生成されますので、Start メソッドよりは、CharaController スクリプトから実行される public 修飾子のメソッドを準備しておいた方が
必要になる情報をメソッドの引数経由で受け取ることが可能です。　

　必要な情報は何なのか、それを取得するにはどのような方法があるのか、といった部分も一緒に考えてみましょう。

　例えば、キャラの配置を解除する、ということは、ゲーム画面においてはキャラを破壊するという処理になります。
よって、少なくとも CharaController の情報を他のスクリプトへ渡すことが出来なければ、特定のキャラを指定して破壊することは難しいでしょう。
GameManager スクリプト内には CharaController を List で管理している変数もありますので、こちらの List からも削除しないとなりません。

　そのためにはこのスクリプト内で、一連の処理を行うために準備しておくべきものは何かを考えてみるといいでしょう。

ReturnSelectCharaPopUp.cs

<= クリックすると開きます

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

[RequireComponent(typeof(CanvasGroup))]
public class ReturnSelectCharaPopUp : MonoBehaviour
{
    [SerializeField]
    private Button btnSubmitReturnChara;

    [SerializeField]
    private Button btnClosePopUp;

    [SerializeField]
    private CanvasGroup canvasGroup;

    private CharaController charaController;
    private GameManager gameManager;

    /// <summary>
    /// 設定
    /// </summary>
    /// <param name="charaController"></param>
    /// <param name="gameManager"></param>
    public void SetUpReturnSelectCharaPopUp(CharaController charaController, GameManager gameManager) {
        this.charaController = charaController;
        this.gameManager = gameManager;

        btnSubmitReturnChara.interactable = false;
        btnClosePopUp.interactable = false;

        btnSubmitReturnChara.onClick.AddListener(OnClickSubmitReturnChara);
        btnClosePopUp.onClick.AddListener(OnClickClosePopUp);

        btnSubmitReturnChara.interactable = true;
        btnClosePopUp.interactable = true;
    }

    /// <summary>
    /// 配置解除する選択時
    /// </summary>
    private void OnClickSubmitReturnChara() {
        CloseReturnCharaPopUp(true);
    }

    /// <summary>
    /// 配置解除しない選択時
    /// </summary>
    private void OnClickClosePopUp() {
        CloseReturnCharaPopUp(false);

    }

    /// <summary>
    /// ポップアップを閉じて選択したボタンの結果を GameMangaer に送る
    /// </summary>
    private void CloseReturnCharaPopUp(bool isReturnChara) {
        canvasGroup.DOFade(0, 0.5f).SetEase(Ease.Linear)
            .OnComplete(() => {
                gameManager.JudgeReturnChara(isReturnChara, charaController);
                DestroyReturnSelectCharaPopUp();
            });        
    }

    /// <summary>
    /// ポップアップを破壊
    /// </summary>
    private void DestroyReturnSelectCharaPopUp() {
        Destroy(gameObject);
    }
}

　スクリプトを作成したらセーブを行います。

３．ReturnSelectCharaPopUp ゲームオブジェクトに ReturnSelectCharaPopUp スクリプトをアタッチし、設定を行う

　ヒエラルキーにある ReturnSelectCharaPopUp ゲームオブジェクトに ReturnSelectCharaPopUp スクリプトをドラッグアンドドロップしてアタッチします。
ReturnSelectCharaPopUp スクリプトに [RequireComponent(typeof(CanvasGroup))] 属性を付与しておくことで、自動的に CanvasGroup をアタッチすることも出来ます。
（そうでなければ手動でアタッチしてください。）

　インスペクターを確認して、必要な情報をアサインしていきましょう。

インスペクター画像

　以上で設定は完了です。これでポップアップ用のゲームオブジェクトが完成しました。

４．ReturnSelectCharaPopUp ゲームオブジェクトをプレファブにする

　ポップアップ用のゲームオブジェクトをプレファブにして、インスタンスできるようにします。

　ReturnSelectCharaPopUp ゲームオブジェクトを Prefabs フォルダへドラッグアンドドロップしてプレファブにしてください。
プレファブにしたら、ヒエラルキーにある ReturnSelectCharaPopUp ゲームオブジェクトは削除してください。

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

　次は　発展４　－配置したキャラの解除機能を実装する－　です。