· 

【Unity】キャラクターセレクト画面を作成してみる②

Last Updated  2024.03.25


Unity キャラセレ画面 サンプル01

 Unityで格ゲーっぽいキャラクターセレクト画面を作成した際の備忘録その②

 

 前回 作ったSceneにキー入力の受付や、UIの挙動をスクリプトで実装していきます。

 

 なお、今回制作するものはInputsystemを使用し、ゲームパッドやキーボード操作のみを想定しています。マウスによる操作は考慮しておりません。

移動するカーソルの仕組み

 十字キーの横を押した瞬間に、キャラクターに紐づけられたint型の変数(背番号みたいなもの)を増減させ、その変数に対応したキャラクター画像やカーソル、名前を表示させるというものになります。

 

 この方法なら、立ち絵一覧から選択する場合や特殊な配列にも対応できると思います。

実際のスクリプト

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.InputSystem;
using TMPro;
using UnityEngine.SceneManagement;

public class CharacterSelect : MonoBehaviour
{
    public int SelectCharacter;//キャラセレの割り振り番号
    public TextMeshProUGUI _1PCharacterName;

    //キャラの表示絵関係
    public GameObject _1PCharacter;
    public Image _1PCharacterImage;
    public Sprite _1PCharacterSprite;

    //カーソルの設定
    public GameObject[] cursor;

    public AudioSource audioSource;
    public AudioClip[] playerSelectSE;
    
    void Start()
    {
        SelectCharacter = 1;
        audioSource = GetComponent<AudioSource>();

        _1PCharacter.gameObject.SetActive(true);//キャラ絵をアクティブ化
        cursor[SelectCharacter].gameObject.SetActive(true);//カーソルをアクティブ化
    }

    public void OnSelectForward(InputAction.CallbackContext context)
    {
        if (context.performed)
        {
            cursor[SelectCharacter].gameObject.SetActive(false);
            audioSource.PlayOneShot(playerSelectSE[0]);

            if (SelectCharacter >= 6)
            {
                SelectCharacter = 1;
            }
            else
            {
                ++SelectCharacter;
            }

            cursor[SelectCharacter].gameObject.SetActive(true);
        }
    }

    public void OnSelectBack(InputAction.CallbackContext context)
    {
        if (context.performed)
        {
            cursor[SelectCharacter].gameObject.SetActive(false);
            audioSource.PlayOneShot(playerSelectSE[0]);

            if (SelectCharacter <= 1)
            {
                SelectCharacter = 6;
            }
            else
            {
                --SelectCharacter;
            }

            cursor[SelectCharacter].gameObject.SetActive(true);
        }
    }

    // キャラクターの決定
    public void OnSelect(InputAction.CallbackContext context)
    {        
        if (context.started)
        {
            audioSource.volume = 1.0f;
            audioSource.PlayOneShot(playerSelectSE[1]);
            
            SceneManager.LoadScene("BattleScene");//対戦シーンへ移動
        }
    }

    void FixedUpdate()
    {
        switch (SelectCharacter)
        {
            case 1:
                _1PCharacterName.text = "Mamina";
                
                _1PCharacterSprite = Resources.Load("portrait_Mamina00");
                _1PCharacterImage.sprite = _1PCharacterSprite;
                break;

            case 2:
                _1PCharacterName.text = "Elde";

                _1PCharacterSprite = Resources.Load("portrait_Elde00");
                _1PCharacterImage.sprite = _1PCharacterSprite;
                break;

            case 3:
                _1PCharacterName.text = "Character3";
                break;

            case 4:
                _1PCharacterName.text = "Titis";

                _1PCharacterSprite = Resources.Load("portrait_Titis00");
                _1PCharacterImage.sprite = _1PCharacterSprite;
                break;

            case 5:
                _1PCharacterName.text = "Nasir";

                _1PCharacterSprite = Resources.Load("portrait_Nasir");
                _1PCharacterImage.sprite = _1PCharacterSprite;
                break;

            case 6:
                _1PCharacterName.text = "Alice";

                _1PCharacterSprite = Resources.Load("portrait_Alice00");
                _1PCharacterImage.sprite = _1PCharacterSprite;
                break;
        }
    }    
}

インスペクターの設定

 [_1PCharacterSprite] 以外の項目を、インスペクター欄から設定します。

Start時に [GameObject.Find("");] で拾っていってもいいんですが、記述が冗長になってしまうので手動の方が楽です。特にカーソル。

 実際に設定した後がこちらになります。

 [Cursor]0番の欠番が気になる方は調整して下さい。

 

 SEは著作権フリーの音響サイトから拝借してます。本当に感謝。

スクリプトの解説

 まずStartメソッドで[SelectCharacter]の初期値を設定し、カーソルとキャラ絵を有効化しています。

 

 続く3つの『On~』メソッドは、InputSystemのEvantに登録して起動する形にしました。

 内容は、→(進む)が押されたら今表示されてるカーソルを無効化、[SelectCharacter]の数字を増加させ、もし選択キャラが一番右端(6番)なら左端に飛ぶようにし、最後に対応したカーソルが表示されるようにしています。←(戻る)が押されたらその逆、[SelectCharacter]の数字を減少させ、一番左端(1番)なら、右端に飛ぶようにしています。カーソルの移動音も、ここで鳴らした方がいいかなと。

 FixedUpdate内では[switch]で背番号を判断し、Resourcesフォルダ内から対象のスプライトを読み込んで表示させてます。ここの記述はゲームの仕様や表示させたい内容によって違ってくると思うので、記載内容はあくまで参考程度に留めて下さい。

 

 自分も後々追加したり修正したりすると思います。

最後に

 これで基礎工事は完成です。

 2P側にも対応させる場合、記述がほぼ2倍になりますので今回は省略します。

 おおむねコピペですしね……

 

 ここから飾り枠のスプライト、UIのアニメーション等で見栄えのよいものにしていきたいのですが、今回はここまでです。

 

 最後までお付き合い頂き、ありがとうございました!