３Ｄレールガンシューティング　発展２５ - i-school

　マウスの位置に合わせてゲーム画面内を移動する照準器の表示機能を実装します。
この位置に向かって弾が発射されるため、目印としての機能を持ちます。

＜実装動画＞

発展２５ー照準器機能の追加ー

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

　・UI の応用

１．設計

　ゲーム画面内のマウスカーソルの位置に照準器を表示します。

　設計としては、UI として Canvas 内に照準器のゲームオブジェクトを配置し、
マウスカーソルの座標位置に照準器の座標を同期させることによって、マウスカーソルの位置 = 照準器の位置という制御を実装します。

　マウスカーソルの位置は Input クラスの mousePositon 変数から取得できますので、この情報を利用します。

　どのようにすればマウスカーソルの位置と照準器の位置を同期させることができるかを、まずは考えてから先に進んでください。
処理のイメージを作っていくことが、設計力、実装力といった技術を磨くことにつながります。

２．照準器用のアイコン画像から UI 用のゲームオブジェクトを作成して配置する

　任意に作成してください。

　基本的な設計は、照準器は Canvas 内に作成します。

　照準器用の無料の画像を探して Unity へインポートし、Canvas 内に新しく Image ゲームオブジェクトを配置して
その画像として照準器の画像を設定してください。Raycast Target のチェックは外しておきます。(理由が分からない場合には自分で調べておきましょう。)

　下記は参考画像です。この通りである必要はありません。

ヒエラルキー画像例

インスペクター画像例

　以上で完了です。

３．GameData.cs を修正する

　新しい bool 型の変数を追加して、照準器の表示/非表示を選択できる機能を追加します。
このチェックが入っていれば照準器をゲーム画面に表示し、チェックが入っていないときは表示しないように切り替えるように利用します。
型と値に基づいて、どういったロジックがあれば表示を切り替える制御になるのかを考えてみてください。

　こちらの処理を元にして、ゲーム内のオプション設定として変更ができるような設計を考えて、実装に挑戦してみてください。

GameData.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System;

public class GameData : MonoBehaviour {

    public static GameData instance;

    [Header("所持している武器の登録用リスト")]
    public List<WeaponData> weaponDatasList = new List<WeaponData>();

    public int chooseStageNo;

    public List<int> clearStageNoList = new List<int>();

    public int totalClearPoint;

    /// <summary>
    /// セーブ・ロード用のクラス
    /// </summary>
    [System.Serializable]
    public class SaveData {
        public int clearPoint;
        public List<int> stageNoList = new List<int>();
        public List<WeaponData> weaponList = new List<WeaponData>();
    }

    private const string SAVE_KEY = "SaveData";        // SaveData クラス用の Key


    ////*  新しい変数の宣言を１つ追加  *////


    public bool isTargetMarker;


    ////*  ここまで  *////


    void Awake() {
        if (instance == null) {
            instance = this;
            DontDestroyOnLoad(gameObject);
        } else {
            Destroy(gameObject);
        }

        // Debug 用
        //SaveClearPoint();
        //LoadClearPoint();

        //ユーザーデータの初期化(呼び出し命令のすぐ下に、呼び出されているローカル関数があるので、処理が追いやすい)
        Initialize();

        // ユーザーデータの初期化用のローカル関数
        void Initialize() {

            // SaveData がセーブされているか確認
            if (PlayerPrefsHelper.ExistsData(SAVE_KEY)) {
                // セーブされている場合のみロード
                GetSaveData();

            } else {
                // セーブされていなければ初期値設定
                totalClearPoint = 0;

                if (!clearStageNoList.Contains(0)) {
                    clearStageNoList.Add(0);
                }

                if (!weaponDatasList.Contains(0)) {
                    weaponDatasList.Add(0);
                }
            }
        }
    }

    /// <summary>
    /// 武器データの登録
    /// </summary>
    /// <param name="weaponData"></param>
    public void AddWeaponData(WeaponData weaponData) {
        weaponDatasList.Add(weaponData);

        Debug.Log("武器追加 : " + weaponData.weaponName);
    }

    /// <summary>
    /// クリアしたステージの番号を追加
    /// </summary>
    /// <param name="stageNo"></param>
    public void AddClearStageNoList(int stageNo) {

        // クリアしたステージの番号がまだリストにない場合
        if (!clearStageNoList.Contains(stageNo)) {
            // List に追加
            clearStageNoList.Add(stageNo);

            // TODO セーブ

        }
    }

    /// <summary>
    /// セーブする値を SaveData に設定してセーブ
    /// セーブするタイミングは、ステージクリア時、キャラ契約時
    /// </summary>
    public void SetSaveData() {

        // セーブ用のデータを作成
        SaveData saveData = new SaveData {

            // 各値を SaveData クラスの変数に設定
            clearPoint = totalClearPoint,
            stageNoList = clearStageNoList,
            weaponList = weaponDatasList
        };

        // SaveData クラスとして SAVE_KEY の名前でセーブ
        PlayerPrefsHelper.SaveSetObjectData(SAVE_KEY, saveData);
    }

    /// <summary>
    /// SaveData をロードして、各値に設定
    /// </summary>
    public void GetSaveData() {

        // SaveData としてロード
        SaveData saveData = PlayerPrefsHelper.LoadGetObjectData<SaveData>(SAVE_KEY);

        // 各値に SaveData 内の値を設定
        totalClearPoint = saveData.clearPoint;

        clearStageNoList = saveData.stageNoList;

        weaponDatasList = saveData.weaponList;
    }
}

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

４．GameData ゲームオブジェクトの設定を行う

　先ほど追加した isTargetMarker 変数にチェックを入れます。
このチェックが入っていれば照準器をゲーム画面に表示し、チェックが入っていないときは表示しないように切り替えるように利用します。

インスペクター画像

　以上で設定は完了です。

５．UIManager スクリプトを修正する

　新しく作成した照準器用のゲームオブジェクトを制御するため、UIManager スクリプトの修正を行います。
なぜ、このスクリプトを修正するのかを考えた上で、出来るだけ教材を見ずに、照準器の制御処理を完成させてみてください。

UIManager.cs

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

public class UIManager : MonoBehaviour {

    [SerializeField]
    private Transform lifeTran;

    [SerializeField]
    private GameObject lifePrefab;

    [SerializeField]
    private List<GameObject> lifesList = new List<GameObject>();

    [SerializeField]
    private GameObject playerInfoSet;

    [SerializeField]
    private SubmitBranchButton submitBranchButtonPrefab;

    [SerializeField]
    private List<SubmitBranchButton> submitBranchButtonsList = new List<SubmitBranchButton>();

    [SerializeField]
    private Transform rightBranchTran;

    [SerializeField]
    private Transform leftBranchTran;

    [SerializeField]
    private Transform centerBranchTran;

    [SerializeField]
    private bool isSubmitBranch;

    private BranchDirectionType chooseBranchDirectionType;

    [SerializeField]
    private GameObject canvasObj;

    [SerializeField]
    private Button btnWeaponChange;


    ////*  新しい変数の宣言を１つ追加  *////


    [SerializeField]
    private GameObject targetIcon;


    ////*  ここまで  *////


    /// <summary>
    /// プレイヤー用のUI設定(ライフ用アイコンの生成など)
    /// </summary>
    /// <param name="maxHp"></param>
    public void SetPlayerInfo(int maxHp) {

        StartCoroutine(GenerateLife(maxHp));

        // TODO 弾数の最大値を設定


        ////*　処理を追加　*////


        // GameData の設定を元に照準器を表示/非表示の切り替えを行う
        SwitchActivateTargetIcon(GameData.instance.isTargetMarker);


        ////*　ここまで　*////


    }

    /// <summary>
    /// ライフ用アイコンのゲームオブジェクトを生成
    /// </summary>
    /// <param name="lifeCount"></param>
    /// <returns></returns>
    public IEnumerator GenerateLife(int lifeCount) {

        for (int i = 0; i < lifeCount; i++) {

            yield return new WaitForSeconds(0.25f);
            lifesList.Add(Instantiate(lifePrefab, lifeTran, false));
        }
    }

    /// <summary>
    /// ライフ用アイコンの再表示
    /// </summary>
    /// <param name="amout"></param>
    public void UpdateDisplayLife(int amout) {

        for (int i = 0; i < lifesList.Count; i++) {

            if (i < amout) {
                lifesList[i].SetActive(true);
            } else {
                lifesList[i].SetActive(false);
            }
        }
    }

    /// <summary>
    /// 分岐ボタンの生成
    /// </summary>
    /// <param name="branchDirectionTypes"></param>
    public void GenerateBranchButtons(BranchDirectionType[] branchDirectionTypes) {
        isSubmitBranch = false;
        Debug.Log("分岐のボタン作成");

        // 分岐の数だけボタンを生成
        for (int i = 0; i < branchDirectionTypes.Length; i++) {

            // ボタンの生成位置を設定
            Transform branchTran = BranchDirectionType.Right == branchDirectionTypes[i] ? rightBranchTran : BranchDirectionType.Left == branchDirectionTypes[i] ? leftBranchTran : centerBranchTran;

            // ボタン生成
            SubmitBranchButton submitBranchButton = Instantiate(submitBranchButtonPrefab, branchTran, false);

            // ボタン設定
            submitBranchButton.SetUpSubmitBranchButton(branchDirectionTypes[i], this);

            // List に追加
            submitBranchButtonsList.Add(submitBranchButton);
        }
    }

    /// <summary>
    /// 分岐先の決定
    /// </summary>
    /// <param name="branchDirectionType"></param>
    public void SubmitBranch(BranchDirectionType branchDirectionType) {
        for (int i = 0; i < submitBranchButtonsList.Count; i++) {
            // 分岐のボタンを非活性化して重複タップを防止
            submitBranchButtonsList[i].InactivateSubmitButton();
            Destroy(submitBranchButtonsList[i].gameObject);
        }
        submitBranchButtonsList.Clear();

        chooseBranchDirectionType = branchDirectionType;
        isSubmitBranch = true;
    }

    /// <summary>
    /// 分岐情報の取得
    /// </summary>
    /// <returns></returns>
    public (bool, BranchDirectionType) GetSubmitBranch() {
        return (isSubmitBranch, chooseBranchDirectionType);
    }

    /// <summary>
    /// キャンバスの表示オンオフ切り替え
    /// </summary>
    public void SwitchActivateCanvas(bool isSwitch) {
        canvasObj.SetActive(isSwitch);
    }

    /// <summary>
    /// 武器交換ボタンの取得
    /// </summary>
    /// <returns></returns>
    public Button GetWeaponChangeButton() {
        return btnWeaponChange;
    }


    ////*  新しくメソッドを２つ追加  *////


    /// <summary>
    /// 照準器の表示/非表示の切り替え
    /// </summary>
    /// <param name="isSwitch"></param>
    public void SwitchActivateTargetIcon(bool isSwitch) {
        targetIcon.SetActive(isSwitch);
    }

    void Update() {

        // 照準器のゲームオブジェクトが用意されており、かつ、ゲーム内に表示されている場合
        if (targetIcon != null && targetIcon.activeSelf) {

            // マウスの位置に照準器を移動
            targetIcon.transform.position = Input.mousePosition;
        }
    }


    ////*  ここまで  *////


}

　スクリプトを修正したらセーブします。

６．UIManager ゲームオブジェクトの設定を行う

　Canvas 内に作成した TargetIcon オブジェクトを、新しく作成した TargetIcon 変数にドラッグアンドドロップしてアサインしてください。
これでゲームオブジェクトの制御が行える設定が整いました。

インスペクター画像

７．ゲームを実行して動作を確認する

　ゲームを実行して、照準器が表示されているかを確認します。

　その後、ゲーム画面内のマウスカーソルの位置を変更してください。
移動に合わせて照準器が移動すれば制御成功です。

＜実装動画＞

動画ファイルへのリンク

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

　次は　発展２６　ーロックオン機能の追加－　です。