Unity

Using buttons in the Unity UI

Page update date :
Page creation date :

Verification environment

Windows
  • Windows 11
Unity Editor
  • 2020.3.25f1

Prerequisites for this tip

The following settings have been made in advance as a prerequisite for the explanation of these tips.

At first

A button can be used as an object that the user clicks on its own, or it can be used to make a choice, such as "yes" or "no." If you want to get a little more elaborate, you can use a button as an object to select a list item such as a menu.

In addition to this, it can also be used for debugging purposes and when clicking a button to change the state arbitrarily.

Click the button to change the text

If you simply click the button, you will do some processing. This time, each time you click the button, the text number will increase by 1.

UI Placement and Configuration

Add text and buttons from the hierarchy to the view.

You can place it anywhere as long as you put it in a place where you can see it. Since it is difficult to see in the initial state, settings such as "white text color", "change size", "increase font size", etc. are set. The content of the Text will be changed automatically later, so you can leave it as "New Text".

The character setting of the button is divided into "Button" and "Text", so select Text and set it.

Adding Scripts

Select the Scenes folder from your project, right-click on an empty space, and select C# Script to add it. Originally, it is better to create the script in a separate folder, but I will omit it for the purpose of checking the operation.

The file name should be easy to understand. Enter as many alphanumeric characters as possible. ButtonClick In this case, it is set to .

Once created, double-click the C# script to open the script editor. If your script editor is Visual Studio, you should see something like this:

Start, The method is not needed this time, so delete it, Update rewrite it and save it as follows.

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

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

  public void OnClick()
  {
  }
}

The syntax of C# is not the main topic of this tip, so I will not explain it. Please study on your own. Only Unity-specific descriptions are discussed.

MonoBehaviour Fields written in classes that inherit from will be able to be set in the Unity Editor. CountText Here, we define a text object called In order for it to be displayed, it public must be published with . SerializeField However, if you add the attribute, you public will be able to display it in the editor with accessibility other than . This is a better description if you don't want to access it from other classes as much as possible other than for the purpose of setting it up in the editor.

OnClick Methods are provided to describe what to do when a button is clicked. public This must be defined in .

Attaching from the Unity Editor

Return to the Unity Editor and select from the hierarchy EventSystem .

EventSystem inspector will appear, so drop the C# script you just created in the "Add Component" area below. The script is now ready to work.

In fact, this script can be attached to any object, and Button it should be attached to the object. In this tip, we will add to to make it uniformly easy to understand EventSystem . Button Of course, there is no problem with attaching it to . However, it is better not to attach it to a completely unrelated object, as it will cause confusion.

If you look at the script you added, you can see that the item "Count Text" is displayed. Once you have published a field in this way, you will be able to set the value from the Unity Editor. We want to access the text object when we click the button, so drag from the hierarchy Text and Count Text drop it on . This will allow you to access it from your script at any time.

Next, select from the hierarchy Button and click + under On Click in the Inspector Button .

Then one item will be added.

In the lower right item, I have dropped a script attached from the EventSystem hierarchy. Since we need to put the object to which the script is attached here, If you are attaching a script to a Button, you need to include a Button.

If you click "No Function", the attached script will be displayed, so ButtonClick select . Select the method you created OnClick in it. Now when you click the button, the OnClick method is called.

Output log with the click of a button

I will output the log to confirm that it works. You can check that it works just by writing one line, and it will be very useful for future debugging, so it is better to remember it.

ButtonClick Open the script and OnClick add the following to .

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

Once you've entered and saved, run the game and click the button.

Each time you click on it, a message appears in the console tab. Now you can see that it is working.

Change text with a button click

Now that you can move the buttons, the purpose of this tip has been achieved. Now that I've placed the text object, I want to change the text every time I click the button.

Rewrite the script as follows.

// 省略

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();
  }
}

The content is simply to increment the count by 1 each time you click and set the number to the text object.

Run the game and make sure that the number increases with each click.

Align the camera (2D) with the canvas
Using the Unity UI dropdown