Unity UI のボタンを使用する

ページ更新日 : 2023年11月28日火曜日

ページ作成日 : 2022年3月24日木曜日

検証環境

Windows

Windows 11

Unity エディター

2020.3.25f1

この Tips の前提設定

この Tips の説明の前提として以下の設定を事前に行っています。

はじめに

ボタンは単独でユーザーにクリックしてもらうオブジェクトとして使用することもできますし「はい」「いいえ」などの選択をさせるときにも使用できます。少し凝ったものになればメニューなどの一覧項目で選択させるオブジェクトとしてボタンを使うこともできます。

これ以外にもデバッグ目的で配置して任意に状態変化させるときにボタンをクリックする、なんて時にも使えます。

ボタンをクリックしてテキストを変える

単純にボタンをクリックしたら何か処理をするという実装を行います。今回はボタンをクリックするたびにテキストの数値が１ずつ増えるという処理を行います。

UI の配置と設定

ヒエラルキーからテキストとボタンをビューに追加します。

配置場所などは見える場所に置けばどこでもいいです。初期状態だと見えづらいので「テキストの色を白」「サイズ変更」「文字サイズを大きくする」などの設定をしています。 Text の内容は後で自動で変えるので「New Text」のままでいいです。

ボタンの文字設定は「Button」と「Text」に分かれているので Text を選択して設定します。

スクリプトの追加

プロジェクトから Scenes フォルダを選択し、何もないところを右クリックして「C# スクリプト」を選択して追加します。本来スクリプトは別フォルダに作った方がいいですが、動作確認が目的なので割愛します。

ファイル名は処理の内容が分かりやすいものにします。可能な限り英数字で入力します。ここでは ButtonClick と設定しています。

作成したら C# スクリプトをダブルクリックしてスクリプトエディターを開きます。スクリプトエディタ―が Visual Studio の場合は以下のように表示されるはずです。

Start, Update メソッドは今回不要なので削除し、以下のように書き換え保存します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;    // 追加

public class ButtonClick : MonoBehaviour
{
  /// <summary>カウントアップするテキストオブジェクト。</summary>
  [SerializeField] Text CountText;

  public void OnClick()
  {
  }
}

C# の構文については当 Tips では本題ではないので解説しません。各自で勉強してください。Unity 固有の記述についてのみ解説します。

MonoBehaviour を継承しているクラスに記述しているフィールドは Unity エディター上で値を設定できるようになります。ここでは CountText というテキストオブジェクトを定義していますが、表示させるには public をつけて公開する必要があります。ただし SerializeField 属性をつけた場合は public 以外のアクセシビリティでもエディター上で表示できるようになります。エディター上で設定する目的以外でなるべく他のクラスからアクセスさせたくない場合はこの記述の方が良いでしょう。

OnClick メソッドはボタンをクリックしたときに処理する内容を記述するために用意しています。こちらは public で定義する必要があります。

Unity エディターからアタッチ

Unity エディターに戻りヒエラルキーから EventSystem を選択します。

EventSystem のインスペクターが表示されるので、下にある「コンポーネントを追加」あたりに先ほど作成した C# スクリプトをドロップします。これでスクリプトが動作できる状態になります。

実はこのスクリプトはどのオブジェクトに付けることもでき、本来であれば Button オブジェクトにつけるべきなのですが、この Tips では統一的にわかりやすくするように EventSystem に付けることにします。もちろん Button に付けても問題ありません。ただし全く関係ないオブジェクトにつけるのは混乱のもとになるのでやめた方がいいです。

追加したスクリプトを見ると「Count Text」という項目が表示されていることが分かります。このように公開したフィールドは Unity エディター上から値を設定できるようになります。ボタンをクリックしたときにテキストオブジェクトにアクセスしたいのでヒエラルキーから Text をドラッグして Count Text にドロップしてください。これでスクリプトからいつでもアクセスできるようになります。

次にヒエラルキーから Button を選択してインスペクターにある Button から「クリック時」にある「+」をクリックします。

すると項目が１つ追加されます。

右下の項目にヒエラルキーからスクリプトをアタッチしてある EventSystem をドロップしています。ここにはスクリプトをアタッチしているオブジェクトを入れる必要があるので、仮にスクリプトを Button にアタッチしているなら Button を入れる必要があります。

「No Function」をクリックするとアタッチされているスクリプトが表示されるので ButtonClick を選択し、その中にある作成した OnClick メソッドがあるので選択します。これでボタンをクリックしたときに OnClick メソッドが呼ばれるようになりました。

ボタンクリックでログを出力

動くことを確認するためにログを出力してみます。１行書くだけで動くことを確認でき、また今後のデバッグで非常に役に立つので覚えておいた方がいいです。

ButtonClick スクリプトを開き OnClick に以下のように追記します。

public void OnClick()
{
  // コンソール ログを出力
  Debug.Log("ボタンが押されました！");
}

入力して保存したらゲームを実行しボタンをクリックしてみてください。

クリックするたびにコンソールタブにメッセージが表示されます。これで動いていることを確認できます。

ボタンクリックでテキストを変更する

これでボタンの動かすことができたので本 Tips の目的は達成なのですが、せっかくテキストオブジェクトを配置したのでボタンをクリックするたびにテキストを変化させてみたいと思います。

スクリプトを以下のように書き換えてください。

// 省略

public class ButtonClick : MonoBehaviour
{
  /// <summary>カウントアップするテキストオブジェクト。</summary>
  [SerializeField] Text CountText;

  /// <summary>クリックカウント。</summary>
  private int _counter = 0;

  public void OnClick()
  {
    // コンソール ログを出力
    Debug.Log("ボタンが押されました！");

    // カウントを増やす
    _counter++;

    // カウントした数を表示する
    CountText.text = _counter.ToString();
  }
}

内容は単にクリックするたびにカウントを１増やして数値をテキストオブジェクトにセットしているだけです。

ゲームを実行しクリックするたびに数値が増えることを確認してください。

カメラ(2D)とキャンバスを合わせる

Unity UI のドロップダウンを使用する