キャラ選択機能の実装③

　前回に引き続きまして、キャラ選択機能の実装を行います。

　新しい処理が多くある場合、その都度調べて、理解を深めてから進めてください。
教材の通りに実装できることと、実際に自分で考えて最初から作れるようになることとでは、むずかしさがまったく異なります。
理解度の差が大きく出ますので、しっかりと復習を行うようにしましょう。

＜完成動画＞

CharaSelectButton スクリプトの作成

　キャラ選択用のボタンにアタッチし、キャラの画像制御やデータなどを管理するためのクラスです。

CharaSelectButton.cs

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

using UnityEngine;
using UnityEngine.Events;
using UnityEngine.UI;

/// <summary>
/// キャラ選択ウインドウ内に生成されるボタンにアタッチされているクラス
/// </summary>
public class CharaSelectButton : MonoBehaviour
{
    private Button btnChara;
    private Image imgChara;
    public CharaData MyCharaData { get; set; }

    private void Reset() {

        // 取得済の場合には処理しない
        if (btnChara && imgChara) return; 
        
        // if (TryGetComponent(out btnChara)) {
        //     Debug.Log($"{ btnChara } 取得しました");
        // } else {
        //     Debug.Log($"{ btnChara.name } 取得出来ません");
        // }
        
        // if (TryGetComponent(out imgChara)) {
        //     Debug.Log($"{ imgChara } 取得しました");
        // } else {
        //     Debug.Log($"{ imgChara.name } 取得出来ません");
        // }

　　　　// 上記の処理を三項演算子で記述した場合
        Debug.Log(TryGetComponent(out btnChara) ? $"{btnChara} 取得しました" : $"{btnChara.name} 取得出来ません");
        Debug.Log(TryGetComponent(out imgChara) ? $"{imgChara} 取得しました" : $"{imgChara.name} 取得出来ません");
    }

    /// <summary>
    /// キャラ選択ボタン設定
    /// </summary>
    /// <param name="charaData"></param>
    /// <param name="clickAction"></param>
    public void SetUpCharaSelectButton(CharaData charaData, UnityAction<CharaData> clickAction) {

        Reset();
        
        // 画像設定
        imgChara.sprite = charaData.sprite;
        
        // ボタン押下時の実行メソッド設定
        btnChara.onClick.AddListener(() => clickAction.Invoke(charaData));

        MyCharaData = charaData;
    }
}

　ボタンをクリック(タップ)した際に、このクラス内部にあるメソッドではなく、引数で受け取った外部クラスのメソッドを実行することで
ボタンはボタンとしての機能のみを有し、処理の内容は別のクラスに委譲させています。

　今回であれば clickAction 変数に代入されている外部クラスのメソッド(CharaSelectWindow クラス内の SetCharaData メソッド)が実行されます。

　このような設計にしておくことで各クラス間の依存関係を疎結合に保つことが出来、ボタンの処理の振る舞いも柔軟に変更することが可能になります。

＜Reset() メソッド＞

　Unity に用意されているメソッドの１つです。こちらの記事を参考にしてください。

　　=>　Reset メソッドの活用例

CharaSelectButton プレハブの設定

　作成済の CharaSelectButton プレハブに CharaSelectButton スクリプトをアタッチします。
アサイン情報などはありませんので、アタッチの確認だけしておきましょう。

インスペクター画像

CharaView スクリプトの作成

　選択したキャラの画像と名前をピックアップして表示させる機能を実装するためのクラスです。

　１つ作成し、それをプレイヤーの選択したキャラと対戦相手が選択したキャラのピックアップの両方に利用します。
汎用性の高い設計にしておくことで使いまわすことができるのが、スクリプトの利点です。

CharaView.cs

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

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

public class CharaView : MonoBehaviour
{
    private Text txtCharaName;
    private Image imgChara;

    private void Reset() {

        // 取得済の場合には処理しない
        if (txtCharaName && imgChara) return; 
        
        // if (TryGetComponent(out txtCharaName)) {
        //     Debug.Log($"{ txtCharaName } 取得しました");
        // } else {
        //     Debug.Log($"{ txtCharaName.name } 取得出来ません");
        // }
        
        // if (TryGetComponent(out imgChara)) {
        //     Debug.Log($"{ imgChara } 取得しました");
        // } else {
        //     Debug.Log($"{ imgChara.name } 取得出来ません");
        // }

　　　　// 上記の処理を三項演算子で記述した場合
        Debug.Log(transform.GetChild(0).TryGetComponent(out txtCharaName) ? $"{txtCharaName} 取得しました" : $"{txtCharaName.name} 取得出来ません");
        Debug.Log(TryGetComponent(out imgChara) ? $"{imgChara} 取得しました" : $"{imgChara.name} 取得出来ません");
    }

    /// <summary>
    /// キャラ表示の設定
    /// </summary>
    /// <param name="charaData"></param>
    public void SetUpCharaView(CharaData charaData) {

        Reset();
        UpdateCharaView(charaData);
    }

    /// <summary>
    /// キャラと名前の表示更新
    /// </summary>
    /// <param name="charaData"></param>
    public void UpdateCharaView(CharaData charaData) {
        txtCharaName.text = charaData.name;
        imgChara.sprite = charaData.sprite;
    }
}

CharaView の設定

　作成済の CharaSelectWindow プレハブ内にある PlayerSelectCharaView ゲームオブジェクトと
OpponentSelectCharaView ゲームオブジェクトに、それぞれ CharaView スクリプトをアタッチします。

　アサイン情報などはありませんので、アタッチの確認だけしておきましょう。

インスペクター画像

インスペクター画像

敵側の画像の Scale の X が -1 に設定されていることを確認しておきましょう。
子オブジェクトの Scale の X もマイナスにしましょう。

　この設定をしておくことで画像の左右が反転して表示されるようになり、
向き合っている画像表現を制作できます。

CharaSelectWindow スクリプトの作成

　キャラ選択ボタンを配置し、選択したキャラの情報をピックアップして表示させる機能を制御するクラスです。

　マウスカーソルによるクリック選択対応と、キーボードによる十字キー入力の両方でカーソルを移動させてキャラ選択が実行できます。

CharaSelectWindow.cs

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

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

public class CharaSelectWindow : MonoBehaviour {

    [SerializeField] private CharaSelectButton charaSelectButtonPrefab;　　　　　　　　// キャラ選択ボタンのプレハブ
    [SerializeField] private List<CharaSelectButton> charaSelectButtonList = new();　　// 生成されたキャラ選択ボタンの List

    [SerializeField] private CharaView playerSelectCharaView;　　　　　　　　　　　　　// プレイヤーが選択しているキャラのピックアップ画像の制御用
    [SerializeField] private CharaView opponentSelectCharaView;　　　　　　　　　　　　// 対戦相手が選択しているキャラのピックアップ画像の制御用

    [SerializeField] private CharaDataSO charaDataSO;　　　　　　　　　　　// キャラデータのスクリプタブル・オブジェクトのアセット
    [SerializeField] private Transform charaSelectButtonTran;　　　　　　　// キャラ選択ボタンを生成する位置

    private Transform[,] inventryGrid;                // 多次元配列を利用してインベントリ内の Grid を座標として管理する
    private Vector2Int cursorPos;　　　　　　　　　　 // 多次元配列におけるカーソルの位置
    
    [SerializeField] private GameObject cursor;       // カーソルのオブジェクト
    [SerializeField] private int numRows;             // インベントリの Grid 行数(X 方向)
    [SerializeField] private int numColumns;          // インベントリの Grid 列数(Y 方向) 
    

    private void Start() {
        
        // デバッグ用
        //SetUpCharaSelectWindow();
    }
    
    /// <summary>
    /// キャラ選択ウインドウの設定
    /// </summary>
    public void SetUpCharaSelectWindow() {

        // キャラ選択ボタンの生成
        GenerateCharaSelectButtons();

        // カーソル移動できるようにキャラのボタンを配列に代入
        SetGrids(charaSelectButtonList);
        
        // 初期選択キャラの設定(プレイヤーと敵の両方)
        SetSelectChara(charaDataSO.charadataList[0]);
        SetSelectChara(charaDataSO.charadataList[1], OwnerType.Opponent);

        // インベントリ内のカーソル位置の初期設定
        SetDefaultCursorPos(0);
    }

    /// <summary>
    /// キャラ選択ボタンの生成
    /// </summary>
    private void GenerateCharaSelectButtons() {

        // キャラ選択ボタンの生成
        for (int i = 0; i < charaDataSO.charadataList.Count; i++) {
            CharaSelectButton charaSelectButton = Instantiate(charaSelectButtonPrefab, charaSelectButtonTran, false);
            
            // 各ボタンごとの設定
            charaSelectButton.SetUpCharaSelectButton(charaDataSO.charadataList[i], charaData => SetSelectChara(charaData));
            
　　　　　　// List に追加
            charaSelectButtonList.Add(charaSelectButton);
        }
    }
    
    /// <summary>
    /// 選択したキャラのセット
    /// </summary>
    /// <param name="charaData"></param>
    /// <param name="type"></param>
    private void SetSelectChara(CharaData charaData, OwnerType type = OwnerType.Player) {
        
        // プレイヤーか対戦相手の、選択中の表示キャラ更新
        if (type == OwnerType.Player) {
            playerSelectCharaView.SetUpCharaView(charaData);
        } else {
            opponentSelectCharaView.SetUpCharaView(charaData);
        }
        
        // 選択したキャラの登録
        GameData.instance.SetSelectCharaId(type, charaData);
    }

    /// <summary>
    /// 選択したキャラのセット
    /// </summary>
    /// <param name="gridList"></param>    
    private void SetGrids(List<CharaSelectButton> gridList) {

　　　　// 多次元配列の初期化
        inventryGrid = new Transform[numRows, numColumns];

        // 生成した Grid を座標に割り当てる = カーソル移動できるようにする
        int count = 0;
        for (int x= 0; x < numRows; x++) {
            for (int y = 0; y < numColumns; y++) {

　　　　　　　　// 生成したキャラ選択ボタンを多次元配列の座標に割り当てる
                inventryGrid[x, y] = gridList[count].transform;

　　　　　　　　// キャラ選択ボタンの名前を座標名に変更
                gridList[count].name = $"{x} / {y}";

                count++;
            }
        }
    }
    
    /// <summary>
    /// カーソル関連の初期設定
    /// および、カーソル位置を記憶していない場合のカーソル設定
    /// </summary>
    private void SetDefaultCursorPos(int menuNum) {

        // カーソル情報の初期化
        cursorPos = new (0, 0);
            
        // カーソルの初期位置にフォーカスしてカーソルも初期位置に置く
        EventSystem.current.SetSelectedGameObject(inventryGrid[0, 0].gameObject);
        
　　　　// カーソルの移動
        MoveCursorToGrid(inventryGrid[0, 0]);
    }

　　/// <summary>
　　/// カーソルを指定された位置に移動
　　/// </summary>
　　/// <param name="targetParent"></param>
　　private void MoveCursorToGrid(Transform targetParent) {

　　　　// カーソルの親を設定
 　　   cursor.transform.SetParent(targetParent);

　　　　// 親を基準にカーソルの位置を設定(画像の中央にカーソルが配置されるようにする)
  　　  cursor.transform.localPosition = Vector2.zero;
　　}

    private void Update() {
        
        // キー入力制御
        HandleCursorInputs();
        
        // キャラ決定
        SubmitChara();
    }

    /// <summary>
    /// キー入力制御
    /// </summary>
    private void HandleCursorInputs() {

　　　　// キー入力判定
        float horizontal = Input.GetAxisRaw("Horizontal");
        float vertical = Input.GetAxisRaw("Vertical");

　　　　// キー入力がある場合
        if (horizontal != 0 || vertical != 0) {

　　　　　　// カーソル移動
            MoveCursor((int)horizontal, (int)vertical);
        }
    }

    /// <summary>
    /// キー入力によるカーソル移動
    /// </summary>
    /// <param name="horizontal"></param>
    /// <param name="vertical"></param>
    private void MoveCursor(int horizontal, int vertical) {

        //Debug.Log($"入力値 {horizontal} : {vertical}");
        
        // インベントリー内の Grid からはみ出ないように補正(配列外にならないように)した上でカーソル位置を更新
        cursorPos.x = Mathf.Clamp(cursorPos.x + horizontal, 0, numRows -1);
        cursorPos.y = Mathf.Clamp(cursorPos.y - vertical, 0, numColumns -1);

　　　　// カーソルの移動
        MoveCursorToGrid(inventryGrid[cursorPos.x ,cursorPos.y]);
        
        //Debug.Log($"新しい位置 {inventryGrid[cursorPos.x ,cursorPos.y]} / ");

　　　　// 選択したキャラのセット
        SetSelectChara(cursor.transform.parent.GetComponent<CharaSelectButton>().MyCharaData);
    }

    /// <summary>
    /// キャラ決定してシーン遷移
    /// </summary>
    private void SubmitChara() {

　　　　// デバッグ
        if (Input.GetKeyDown(KeyCode.Z)) {

　　　　　　// シーン遷移
            GameData.instance.NextScene(SceneName.Battle);

            Debug.Log($"新しいシーン {SceneName.Battle} ");
        }
    }
}

＜処理の解説＞

　多次元配列を利用することで、キー入力によるカーソル移動に対応しています。

多次元配列時のメニュー１内の座標 [x-y]

[0-0, 1-0, 2-0, 3-0]
[0-1, 1-1, 2-1, 3-1]

　上記の画像を元にした配列は、このようになっています。左上が[0-0]、右下が [3-1]です。

・カーソルの上下左右移動(グリッド外部にはいかないようにする制限付き)

　他にも多くの処理が利用されていますので、しっかりと理解できるように処理を読み解く練習をしましょう。

　UI でキーボードやジョイパッドによるカーソル移動を実現するには、以下の手順が必要になります。

１．UI が開いたとき、１つのゲームオブジェクトにフォーカスする。このゲームオブジェクトがカーソルの初期位置になるようにする
２．キー入力とカーソルの動きを連動させる

１．UI が開いたとき、１つのゲームオブジェクトにフォーカスする。このゲームオブジェクトがカーソルの初期位置になるようにする

　１については、Unity が用意している処理があります。

''EventSystem.current.SetSelectedGameObject() メソッド''

　このメソッドを利用し、引数には GameObject 型を指定することで、フォーカスします。
これは UnityEngine.EventSystems 名前空間(namespace)に含まれていますので、using で宣言しています。

２．キー入力とカーソルの動きを連動させる

　２については、キー入力部分と、カーソルへの情報を渡す部分をそれぞれ作ります。

    /// <summary>
    /// キー入力制御
    /// </summary>
    private void HandleCursorInputs() {

　　　　// キー入力判定　←　＜キー入力部分＞
        float horizontal = Input.GetAxisRaw("Horizontal");
        float vertical = Input.GetAxisRaw("Vertical");

　　　　// キー入力がある場合
        if (horizontal != 0 || vertical != 0) {

　　　　　　// カーソル移動　←　＜カーソルへの情報を渡す部分＞
            MoveCursor((int)horizontal, (int)vertical);
        }
    }

　MoveCorsor メソッドでは、キー入力の値が X 軸と Y 軸について利用し、それをカーソルの位置に落とし込んでいます。
また、カーソルが移動できるグリッド(枠)を超えていないかを判定し、移動できない場合には前の位置に再移動させています。

    /// <summary>
    /// キー入力によるカーソル移動
    /// </summary>
    /// <param name="horizontal"></param>
    /// <param name="vertical"></param>
    private void MoveCursor(int horizontal, int vertical) {

        //Debug.Log($"入力値 {horizontal} : {vertical}");
        
        // インベントリー内の Grid からはみ出ないように補正(配列外にならないように)した上でカーソル位置を更新
        cursorPos.x = Mathf.Clamp(cursorPos.x + horizontal, 0, numRows -1);
        cursorPos.y = Mathf.Clamp(cursorPos.y - vertical, 0, numColumns -1);

　　　　// カーソルの移動
        MoveCursorToGrid(inventryGrid[cursorPos.x ,cursorPos.y]);
        
        //Debug.Log($"新しい位置 {inventryGrid[cursorPos.x ,cursorPos.y]} / ");

　　　　// 選択したキャラのセット
        SetSelectChara(cursor.transform.parent.GetComponent<CharaSelectButton>().MyCharaData);
    }

　カーソルは移動時に親子関係を使って移動していますが、単純にカーソルの座標だけを動かしてもいいです。
ただし、親子関係にしておくと、親のゲームオブジェクトが「キャラ選択ボタン」のゲームオブジェクトになりますので、
カーソルの位置からキャラの情報を参照しやすくなるので、このようにしていますが、この辺りは任意だと思います。

　例えば ChatGPT にソースコードの解説を依頼しても、処理を読み解くよい学習になります。
コメントなどを自分で書いてみて、書けない部分を復習しましょう。コメントが書けない処理は読み解けていない処理になります。

CharaSelectWindow プレハブの設定

　
　作成済の CharaSelectWindow プレハブに CharaSelectWindow スクリプトをアタッチします。

　必要なアサイン情報をアサインします。
NumRows 変数と NumColumns 変数は多次元配列の数です。
最初は 1 と 2 で設定してください。
この値により、縦方向に２つキャラ選択ボタンが生成されるようにします。

　スクリプタブル・オブジェクトのアサインは、スクリプト・ファイルではなく、アセットの方のスクリプトをアサインしてください。

ヒエラルキー画像

プレハブ編集ビュー画像

インスペクター画像

CharaSelect スクリプトの作成

　ステージ選択画面の管理を行うためのマネージャークラスです。

　CharaSelectWindow プレハブを生成し、設定を行います。
他にも必要に応じて処理を追加してください。

CharaSelect.cs

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

using UnityEngine;

public class CharaSelect : MonoBehaviour
{
    [SerializeField] private CharaSelectWindow charaSelectWindowPrefab;

    void Start()
    {
        // デバッグ用
        SetUpCharaSelect();
    }

    public void SetUpCharaSelect() {
        
        // キャラ選択ウィンドウ生成と初期設定
        Instantiate(charaSelectWindowPrefab).SetUpCharaSelectWindow();
    }
}

CharaSelect の設定

　ヒエラルキーにて Create Empty で新しいゲームオブジェクトを作成し、CharaSelect スクリプトをアタッチします。

　CharaSelectWindow プレハブをアサインし、生成する準備をします。

ヒエラルキー画像

インスペクター画像

完成　ーゲームを実行して動作を確認するー

　ここまでの手順ですべて完了です。

　どのような手順でゲームオブジェクトを制作し、スクリプトを書いてきたか、確認してください。
必要なオブジェクトを用意し、スクリプトを書き、アタッチするという流れになっています。

　これは Unity の教科書などでも学習している、処理の基本的な構築方法・作り方です。
つまり、ゲーム制作は常に基礎をベースに処理を作っていることが分かります。

　実際に自分一人でゲーム制作をおこなうようになった際の段取りに役立ててください。

　完成したらデバッグを行い、動作の確認を行っていきます。
再度ソースコードなどの見直しを行い、どのように処理が実行されているかを事前に把握しておきましょう。
処理を把握できていないと、正常に動作しているのか、どこに間違いがあるのか判断が出来ません。

　ただしいデバッグを行うためには、エラーが出なければよい、という認識ではなく、
「どのように動いているから正しい」というように、論理的な回答を導き出せるように考えてください。
　

＜完成動画＞

　正常に動作することを確認したら、スクリプタブル・オブジェクトの CharaData を増やし、
キャラ選択ボタンの数を変えて試してみてください。

　以上で終了です。

　おつかれさまでした。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

キャラ選択機能の実装③ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school