【Unity】ノベルゲームで使えるボタンによる選択肢の実装例

今回は、ノベルゲームで重要な選択肢の実装についてボタンを使って行いたいと思います。

本格的なノベルゲームを作ろうとすると、やはり選択肢という要素はとても重要な役割を担うと思うので、ボタンで実装してみたい際には参考にしてみると良いかもしれません。

【Unity】ノベルゲームで使えるボタンによる選択肢の実装例

【Unity】ノベルゲームで使えるボタンによる選択肢の実装例

1. CanvasとUIの構築

Canvasを作成
- Hierarchyで GameObject→UI→Canvas を選択してCanvasを作成します。
選択肢用のPanelを作成
- Canvasを右クリックしてUI→Panelを選択します。
- Panelの名前を「ChoicesPanel」に変更します。
- Panelのサイズと位置等は適当に調整してください。
ボタンを作成
- ChoicesPanelを右クリックしてUI→Buttonを選択します。
- ボタンの名前を「ChoiceButton1」に変更します。
- 必要な選択肢の数だけボタンを複製して「ChoiceButton2」「ChoiceButton3」といった感じで量産してください。

Panelを非表示に設定
- ChoicesPanelのGameObjectを非アクティブにします。（後でスクリプトで表示・非表示を切り替えます）

ヒエラルキーウィンドウはこんな感じになりますかね。私もとりあえずボタンを3つ準備しています。

2.ChoiceManagerスクリプトを作成する

続いて、「ChoiceManager」という名前でスクリプトを作成します。

using UnityEngine;
using UnityEngine.UI;
using System;
using TMPro;


public class ChoiceManager : MonoBehaviour
{
    [SerializeField] private GameObject choicesPanel; // 選択肢のPanel
    [SerializeField] private Button[] choiceButtons; // 選択肢のボタン
    private Action onChoiceSelected; // 選択肢が選ばれた時のコールバック

    // 選択肢を表示
    public void ShowChoices(string[] choices, Action callback)
    {
      
        choicesPanel.SetActive(true); // Panelを表示
        onChoiceSelected = callback; // コールバックを保存

        for (int i = 0; i < choiceButtons.Length; i++)
        {
            if (i < choices.Length)
            {
                // ボタンを有効にしてテキストを設定
                choiceButtons[i].gameObject.SetActive(true);
                choiceButtons[i].GetComponentInChildren().text = choices[i];

                // ボタンにクリックイベントを登録
                int index = i; // ローカル変数にコピーしてイベントに渡す
                choiceButtons[i].onClick.RemoveAllListeners();
                choiceButtons[i].onClick.AddListener(() => OnChoiceClicked(index));
            }
            else
            {
                // 不要なボタンを非表示
                choiceButtons[i].gameObject.SetActive(false);
            }
        }
    }

    // 選択肢を非表示
    public void HideChoices()
    {
        if (choicesPanel != null)
        {
            choicesPanel.SetActive(false);
        }
    }

    // ボタンがクリックされた時の処理
    private void OnChoiceClicked(int choiceIndex)
    {
        HideChoices(); // 選択肢を非表示
        onChoiceSelected?.Invoke(choiceIndex); // コールバックを実行
    }
}

choicesPanel: 選択肢を表示するPanel（ChoicesPanel）をInspectorで指定します。
choiceButtons: 選択肢となるボタン（ChoiceButton1, ChoiceButton2等）を配列として指定します。

ShowChoicesメソッドでは、引数として選択肢のテキスト（文字列配列）と、選択後の処理を指定します。
ボタンのテキストを更新し、クリックイベントを登録します。
登録されたコールバックが選択結果を処理します。
HideChoicesメソッドでchoicesPanel.SetActive(false)を呼び出して選択肢を非表示にします。
ボタンがクリックされたら、ユーザーが選択したボタンのインデックス（番号）を取得して、コールバックを実行します。

スクリプトを作成したら、新たに空のオブジェクト「ChoiceController」を作ってそこにこのスクリプトをアタッチします。

インスペクターからChoices PanelにヒエラルキーウィンドウのChoicePanelをドラッグ＆ドロップします。Choice Buttonsにはそれぞれのボタンを上から設定しましょう。

3.選択肢を実行するNovelGameManagerスクリプトの作成

ボタンの選択肢を実行するためにスクリプトを作成します。

using UnityEngine;

public class NovelGameManager : MonoBehaviour
{
    [SerializeField] private ChoiceManager choiceManager;

    void Start()
    {
        // 選択肢を表示
        string[] choices = { "選択肢1", "選択肢2", "選択肢3" };
        choiceManager.ShowChoices(choices, OnChoiceSelected);
    }

    // 選択肢が選ばれたときに呼ばれるコールバック
    private void OnChoiceSelected(int choiceIndex)
    {
        Debug.Log("選択された選択肢: " + choiceIndex);

        // 選択に応じた処理を実行
        switch (choiceIndex)
        {
            case 0:
                Debug.Log("選択肢1を選びました！");
                break;
            case 1:
                Debug.Log("選択肢2を選びました！");
                break;
            case 2:
                Debug.Log("選択肢3を選びました！");
                break;
        }
    }
}

choicesという配列を作成し、選択肢のテキスト（例: “選択肢1”, “選択肢2”, “選択肢3″）を設定します。

choiceManager.ShowChoicesを呼び出して選択肢を表示します。