Unity UI入門⑥｜Buttonの使い方とOn Click・Transitionを徹底解説

Unityでメニュー画面や設定画面を作るとき、よく使うUIの一つがButtonです。
Buttonは、クリックやタップをきっかけに処理を実行するためのUIです。

たとえば、次のような場面で使います。

・ゲームを開始する
・メニュー画面を開く
・設定内容を決定する
・ゲームを終了する
・アイテムを購入する

今回は、Buttonの作成方法、On Clickへの処理の登録、押したときの見た目を変えるTransition、Buttonの有効・無効を切り替える方法まで確認します。

Buttonとは

Buttonは、クリックやタップを受け取り、登録された処理を実行するUIです。

Buttonを作成すると、Button本体と、その子オブジェクトとして文字を表示する TextMeshPro、または Text が作成されます。

Button本体では、主に次の役割を管理します。

・クリックやタップの受付
・クリック時に実行する処理
・マウスを重ねたときの見た目
・押したときの見た目
・操作できるかどうか

Buttonの背景画像はImageコンポーネントが担当し、文字は TextMeshPro が担当します。

Buttonを作成する

HierarchyウィンドウでCanvasを右クリックし、次の順番で選択します。

UI → Button - TextMeshPro

Unityのバージョンによっては、最初にTextMeshProを使うときに、必要なファイルの読み込みを求められることがあります。
その場合は、表示された画面から必要なTMP Essentialsを読み込みます。

Button本体には、主に次のコンポーネントが付いています。

・Rect Transform
・Canvas Renderer
・Image
・Button

それぞれの役割は、次のように考えると分かりやすいです。

・Rect Transform：位置や大きさを管理する
・Canvas Renderer：Canvas上に描画する
・Image：背景画像や背景色を表示する
・Button：クリック処理や状態変化を管理する

子オブジェクトのText (TMP)には、TextMeshProUGUIコンポーネントが付いています。ここでButtonの文字を変更できます。

Buttonの見た目を変更する

作成したButtonを選択すると、InspectorにImageコンポーネントとButtonコンポーネントが表示されます。

Buttonの背景色は、ImageコンポーネントのColorから変更できます。
ボタンに画像を使いたい場合は、ImageコンポーネントのSource ImageにSpriteを設定します。

枠付きの画像を使用する場合は、Image TypeをSlicedにすると、Buttonの大きさを変更しても角や枠線を崩しにくくなります。
Slicedを使う場合は、あらかじめSprite EditorでBorderを設定しておく必要があります。
これは前回の Image の解説をご参照ください。

Buttonの大きさは、Rect Transform の Width と Height で調整します。

文字を変更する

Buttonの子オブジェクトにある Text (TMP)、または Text を選択します。Text (TMP)を変更する場合、Inspector の TextMeshProUGUI コンポーネントから、次のような設定を変更できます。

・表示する文字
・文字サイズ
・文字色
・太字
・文字の配置
・フォント

TextMeshProUGUI の変更は以前の記事をご参照ください。

On Clickに処理を登録する

Buttonを押したときに処理を実行するには、ButtonコンポーネントのOn Click()を使います。

今回は、Buttonを押すたびに、ボタンに表示されている文字をONとOFFで切り替える処理を作ります。

新しいC#スクリプトを作成し、名前をButtonSampleにします。
このスクリプトを Canvas にアタッチしてみます。（任意のObjectで結構です）

using TMPro;
using UnityEngine;

public class ButtonSample : MonoBehaviour
{
    //ボタンのテキストを表示するためのテキスト
    [SerializeField] TMP_Text buttonText; 
    bool isOn = true;   //ボタンの状態を管理するフラグ

    public void OnButtonClick() //ボタンがクリックされた時の処理
    {
        isOn = !isOn;          //ボタンの状態を反転
        //ボタンの状態に応じてテキストを変更
        buttonText.text = isOn ? "ON" : "OFF"; 
    }
}

buttonTextには、Buttonの子オブジェクトにあるText (TMP)をセットします。

isOnは、現在の状態がONかOFFかを管理する変数です。
Buttonを押すたびにisOnの値を反転しています。

・trueの場合はfalseに変わる
・falseの場合はtrueに変わる

その後、isOnの状態に応じて、ボタンの文字をONまたはOFFに変更します。

OnButtonClickはButtonから呼び出すためのメソッドです。
InspectorのOn Clickから選択できるように、publicを付けています。

On Clickにメソッドを登録する

Button本体を選択し、Inspector の Button コンポーネントを確認します。
下の方にOn Click()という項目があります。

次の手順で処理を登録します。

1．On Clickの右下にある「＋」を押す
2．新しく表示されたオブジェクト欄にCanvasをドラッグする
3．右側のプルダウンを開く
4．ButtonSampleを選択する
5．OnButtonClick()を選択する

ゲームを実行してButtonを押します。

ボタンを押すたびに、ボタンの文字が On → Off →On と切り替わればOKです。

Transitionで見た目を変える

Buttonコンポーネントには、Transitionという設定があります。

Transitionは、マウスを重ねたときやButtonを押したときに、見た目をどのように変えるかを設定する項目です。

主に次の種類があります。

・None
・Color Tint
・Sprite Swap
・Animation

通常、Buttonを作成した直後はColor Tintが設定されています。

Color Tint

Color Tintは、Buttonの状態に応じて色を変更する方法です。

Color Tintを選択すると、次の項目が表示されます。

・Normal Color
・Highlighted Color
・Pressed Color
・Selected Color
・Disabled Color

それぞれの意味は次の通りです。

Normal Color

通常時の色です。
マウスを重ねておらず、Buttonを押していない状態で使われます。

Highlighted Color

マウスポインターをButtonの上に重ねたときの色です。
通常時より少し明るくすると、Buttonを選択していることが分かりやすくなります。

Pressed Color

Buttonを押している間の色です。
通常時より少し暗い色にすると、押し込んだような表現になります。

Selected Color

Buttonが選択状態になっているときの色です。
キーボードやゲームパッドでUIを操作するときにも関係します。

Disabled Color

Buttonが操作できない状態のときに使われる色です。
灰色や半透明にすると、押せないButtonであることが伝わりやすくなります。

Target Graphic

Buttonコンポーネントには、Target Graphicという項目があります。
Target Graphicは、Transitionによる見た目の変化を反映する対象です。

通常は、Button本体のImageコンポーネントが設定されています。Buttonの子にある別のImageをTarget Graphicに設定すれば、そのImageの色を変えることもできます。

Color MultiplierとFade Duration

Color Tintには、Color MultiplierとFade Durationもあります。

Color Multiplier は、設定した色の明るさに影響します。
通常は初期値のままで問題ありません。

Fade Duration は、色が切り替わるまでの時間です。
値を小さくするとすぐに色が変わり、値を少し大きくすると滑らかに色が変化します。急に切り替えたい場合は小さめにし、やわらかい変化にしたい場合は少し大きめに設定します。

Sprite Swap

Sprite Swapは、Buttonの状態ごとに別のSpriteを表示する方法です。
たとえば、次のように画像を切り替えられます。

・通常時の画像
・マウスを重ねたときの画像
・押したときの画像
・操作できないときの画像

色を変えるだけではなく、Buttonの形や模様を変えたい場合に向いています。

Animation

Animationは、Animatorを使ってButtonの見た目を変える方法です。
たとえば、次のような演出ができます。

・マウスを重ねると少し大きくなる
・押すと少し縮む
・選択中に光る
・操作できないときに暗くなる

細かな演出を付けられますが、Animatorの設定が必要になるため、Color Tintより少し難易度が高くなります。
まずはColor Tintを使い、必要になったらSprite SwapやAnimationへ進むとよいでしょう。

サンプル：ButtonでPanelを開閉する

ここからは、Buttonを使ってPanelを表示・非表示にします。

今回は、次のようなUIを作ります。

・「開く」Buttonを押すとPanelを表示する
・Panel内の「閉じる」Buttonを押すとPanelを非表示にする

Hierarchyは、次のような構成を想定します。

MenuPanelの中には、背景用のImageやText、CloseButtonなどを配置できます。

PanelControllerを作成する

新しい C#スクリプトを作成し、名前を PanelController にします。

using UnityEngine;

public class PanelController : MonoBehaviour
{
    [SerializeField] GameObject menuPanel;   //メニューパネル

    void Start()
    {
        menuPanel.SetActive(false); //メニューパネルを非表示
    }

    public void OpenPanel()
    {
        menuPanel.SetActive(true); //メニューパネルを表示
    }

    public void ClosePanel()
    {
        menuPanel.SetActive(false); //メニューパネルを非表示
    }
}

このスクリプトを任意の GameObject にアタッチします。
サンプルでは Canvas にアタッチします。

Inspector の Menu Panel に、表示・非表示を切り替えたいMenuPanelを設定します。

開くButtonを設定する

OpenButtonを選択し、ButtonコンポーネントのOn Clickを設定します。

1．On Clickの「＋」を押す
2．左下に Canvas を登録する
3．PanelController → OpenPanel()を選択する

これでOpenButtonを押すと、MenuPanelが表示されます。

閉じるButtonを設定する

MenuPanelの中にあるCloseButtonを選択します。

On Clickに次の処理を登録します。

1．On Clickの「＋」を押す
2．左下に Canvas を登録する
3．PanelController → ClosePanel()を選択する

これでCloseButtonを押すと、MenuPanelが非表示になります。

Buttonが押せないときの確認ポイント

Buttonを作成したのにクリックできない場合は、次の項目を確認します。

InteractableがOFFになっている

ButtonコンポーネントのInteractableがOFFになっていると、Buttonを押せません。
まずはInteractableにチェックが入っているか確認します。

EventSystemがない

ButtonなどのUI操作には、EventSystemが必要です。
通常は、最初にUIを作成したときに自動で作成されます。

EventSystemがない場合は、Hierarchyを右クリックし、UIメニューからEventSystemを作成します。

ほかのImageが上に重なっている

Buttonの上に別のImageが重なっていると、そのImageがクリックを受け取ってしまう場合があります。
透明な Image でも、ImageコンポーネントのRaycast TargetがONになっていると、操作判定の対象になります。

背景や装飾として使っていて、クリック判定が必要ないImageでは、Raycast TargetをOFFにします。

On Clickに登録したGameObjectが違う

On Clickには、対象のスクリプトが追加されているGameObjectを登録します。
Projectウィンドウのスクリプトファイルを登録しても、メソッドは実行できません。

また、別のGameObjectを登録していないか確認しましょう。

Panelや親オブジェクトが操作を止めている

親オブジェクトにCanvas Groupが付いている場合は、次の項目も確認します。

・Interactable
・Blocks Raycasts

Blocks RaycastsがOFFになっていると、そのCanvas Group内のUIがクリックを受け取れなくなる場合があります。

今回のまとめ

今回は、UnityのUIパーツの一つであるButtonについて確認しました。

ポイントは次の通りです。

Buttonは、ゲームのメニューや設定画面を作るうえで欠かせないUIです。

まずはOn Clickに簡単なメソッドを登録し、Buttonを押したときに処理が実行される流れを確認してみましょう。

その後、Color TintやInteractableを設定すると、状態が分かりやすく、操作しやすいButtonを作れるようになります。

次回予告

次回は、UnityのUIパーツの中から、Sliderについて解説します。

Sliderは、つまみをドラッグして数値を変更するためのUIです。

音量や画面の明るさ、速度などを調整する設定画面でよく使います。

次回は、Sliderの作成方法、最小値と最大値の設定、現在値の取得、値が変化したときに処理を実行する方法を確認します。

▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。