Last Updated 2025.8.13
Unityで格ゲーっぽいキャラクターセレクト画面を作成した際の備忘録その②
前回 作ったSceneに、キー入力の受付や、UIの挙動をスクリプトで実装していきます。
なお、今回制作するものは 「 Inputsystem 」を使用し、ゲームパッドやキーボード操作のみを想定しています。
マウスによる操作は考慮しておりません。
▼24.12.16追記
Inputsystemに関して、サンプルコードに記載しているのに使い方を解説してない点に思うところがあったので、自分のInputsystemの使い方を別記事でまとめる予定です。
変わった使い方はとくにしていないので、内容的には公式と殆ど変わらなそうですが……
移動するカーソルの仕組み
十字キーの横を押した瞬間に、キャラクターに紐づけられたint型の変数（背番号みたいなもの）を増減させ、その変数に対応したキャラクター画像（Image）やカーソル、名前を表示させるというものになります。
この方法なら、立ち絵一覧から選択する場合や特殊なアイコン配列にも対応できると思います。
実際のスクリプト（サンプル）
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番）なら右端に飛ぶようにしています。
カーソルの移動音(SE)は、この段階で鳴らすようにしました。
Scene移動に関して
まずスクリプトの冒頭、usingディレクティブに
using UnityEngine.SceneManagement;
を記述します。
記述せずにスクリプトを書く方法もありますが、usingディレクティブセクションにこの記述を明確に加えることで、そのスクリプト内で扱う機能の目安として役立ちます。
using UnityEngine.UI;
using UnityEngine.InputSystem;
using TMPro;
などもそうですね。
こうした記述が含まれていることで、そのスクリプトがどのような機能に関連しているのか、簡単に確認できるようになります。
あとは
SceneManager.LoadScene("BattleScene"); // ※"BattleScene"の部分が任意
の部分で、次のシーン（今回は対戦画面"BattleScene"）へと移動させています。
FixedUpdate内の処理に関して
FixedUpdate内では《switch》で背番号を判定し、Resourcesフォルダ内から対象のスプライトを読み込んで表示させています。ここの記述はゲームの仕様や表示させたい内容によって違ってくると思うので、記載内容はあくまで参考程度に留めて下さい。
※現在Resourcesフォルダを参照するやり方は非推奨となっているため
自分も後々追加したり修正したりすると思います。
おわりに
これで基礎工事は完成です。
2P側にも対応させる場合、記述がほぼ2倍になりますので今回は省略します。おおむねコピペですしね……
ここから飾り枠のスプライト、UIにアニメーションなどを加えて見栄えのよいものにしていきたいのですが、今回はここまでになります。
最後までお付き合い頂き、ありがとうございました！
関連記事
▼キャラクターセレクト画面を作成してみるその①（Canvas設定）: