Tsuの雑記¯\_(ツ)_/¯

主に製作メモ・備忘録として使用。製作したアプリのリンクもあります。

【Unity】UI.Button のテキストを動的に変化させる【C#】

「ボタンの文字を変数化する」というワードで当ブログが検索されていたため,この事について書いてみたいと思います。

(Unity 2018.3.0f2)

UnityEditor 上の準備

まずは,UnityEditor 上で UI.Button を用意します。

UnityEditor 上で UI.Button を生成した画像
UI.Button の設置

スクリプトの準備

次にスクリプトを用意しますが,全体の設計によって書き方が2通り考えられます。

全体の設計とは,今後スクリプト上で「主に Button 本体を操作する」「主に Text を操作する」かです。

主に Button 本体を操作する場合

using UnityEngine;
using UnityEngine.UI;

public class NewBehaviourScript : MonoBehaviour
{
    // フラグ切り替え定数
    const int Switch = -1;

    [SerializeField, Tooltip("ボタン")]
    Button button = null;

    // ボタンのテキスト
    Text buttonText = null;
    // On / Off
    enum Flag { Off = -1, On = 1 }
    // On / Off フラグ
    Flag flag = Flag.Off;

    void Start()
    {
        // ボタンのテキストコンポーネントをキャッシュ
        buttonText = button.GetComponentInChildren<Text>();
    }

    /// <summary>
    /// テキストコンポーネントの文字列を変更
    /// </summary>
    public void ChangeText()
    {
        // 切り替え後のフラグ
        var switchedFlag = (Flag)((int)flag * Switch);
        // テキストコンポーネントの文字列を切り替え
        buttonText.text = System.Enum.GetName(typeof(Flag), switchedFlag);
        // フラグ切り替え
        flag = switchedFlag;
    }
}

今回操作するのは Text のみですが,その親オブジェクトである Button を Inspector ウィンドウで指定してから Text をスクリプトで取得しています。

docs.unity3d.com

次にこのスクリプトを UnityEditor 上で適当な GameObject にアタッチし ,UI.Button を指定します。

UnityEditor の Inspector ウィンドウで UI.Button をアタッチしている画像
UI.Button のアタッチ

主に Text を操作する場合

using UnityEngine;
using UnityEngine.UI;

public class NewBehaviourScript : MonoBehaviour
{
    // フラグ切り替え定数
    const int Switch = -1;

    [SerializeField, Tooltip("ボタンのテキスト")]
    Text buttonText = null;

    /* ボタン(操作する必要があれば)
    Button button = null;
    */

    // On / Off
    enum Flag { Off = -1, On = 1 }
    // On / Off フラグ
    Flag flag = Flag.Off;

    void Start()
    {
        /* ボタンコンポーネントをキャッシュ(操作する必要があれば)
        button = buttonText.GetComponentInParent<Button>();
        */
    }

    /// <summary>
    /// テキストコンポーネントの文字列を変更
    /// </summary>
    public void ChangeText()
    {
        // 切り替え後のフラグ
        var switchedFlag = (Flag)((int)flag * Switch);
        // テキストコンポーネントの文字列を切り替え
        buttonText.text = System.Enum.GetName(typeof(Flag), switchedFlag);
        // フラグ切り替え
        flag = switchedFlag;
    }
}

先程のパターンとは逆に,子オブジェクトである Text を Inspector ウィンドウで指定してから Button をスクリプトで取得しています。

docs.unity3d.com

次にこのスクリプトを UnityEditor 上で適当な GameObject にアタッチし ,UI.Text を指定します。

UnityEditor の Inspector ウィンドウで UI.Text をアタッチしている画像
UI.Text のアタッチ

Button のイベントを登録する

Inspector ウィンドウで Button コンポーネントの OnClick() イベントに,先程のスクリプトをアタッチした GameObject を指定します。

次に "No Function" と表示されているボタンをクリックして,クラス名→メソッド名の順に探して決定します。

UnityEditor の Inspector ウィンドウで OnClick() イベントを操作している画像
UI.Button の OnClick() コンポーネント

動作確認

Game 画面で Button のテキストの On・Off が切り替わっている画像
クリックするたびに On・Off が切り替わる

以上,UI.Button のテキストを動的に変化させる方法でした。

解説

列挙子の名称をそのまま文字列stringに変換したい場合,GetName()メソッドを使用します。

// テキストコンポーネントの文字列を切り替え
buttonText.text = System.Enum.GetName(typeof(Flag), switchedFlag);

docs.microsoft.com

2つの列挙子を切り替える方法については,以下の記事にて詳しく説明しております。

tsu-games.hatenablog.com

UI.Button については,こちらの記事もお読みいただけると幸いです。

tsu-games.hatenablog.com