Unity ボタンUIの使い方


##0.0 はじめに
UnityのButton UI（ボタンUI）の使い方についての忘備録です。
ボタンUIのボタンコンポーネントにはOn Clickというイベントが用意されています。
このイベントでボタンが押されたという動作を取得します。




👍**ポイント!!**
ボタンUIのOn Clickイベントは <b>押した後の離した時に</b> （押しただけではイベントが始まりません）反応しますので注意が必要です。





##1.0 ボタンUIの作成方法
Hierarchy(ヒエラルキー) ウインドウで Create　→　UI → Button　の順に選択します。
HierarchyとInspectorウインドウの中にButton（ボタン）オブジェクトができます。


👍**ポイント!!**
ボタンUIは初期状態ではCanvas（キャンバス）オブジェクトの中に作られます。このままCanvasに入れておきましょう。またいっしょにEventSystemオブジェクトも作られます。このEventSystemオブジェクトはボタンのイベントを使うときに必要となります。このままHierarchy内に入れておきましょう。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352037/1b1504aa-ec18-fae3-29a2-133d828c2260.gif" alt="ボタンの作成方法" title="ボタンの作成方法" width="600" height="300">



































##2.0 ボタンコンポーネント
ボタンオブジェクトの中にボタンコンポーネントが出来ています。
このコンポーネントの中にOn Click()と書かれている場所（On Clickイベント）があります。
ここでボタンが押された時に呼び出す関数を登録できます。




👍**ポイント!!**
初期状態でボタンUIを作成した場合に自動的に作成されるEventSystemがシーン上で有効になっていないとボタンUIのイベントが認識されませんので注意が必要です。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352037/4e011c34-bf12-6979-ed07-6f18d77301a7.png" alt="ボタンコンポーネントとOn Clickイベント" title="ボタンコンポーネントとOn Clickイベント" width="400" height="300">










































##3.0 呼び出す関数の作成
ボタンUIを押した時にOn Clickイベントで呼び出される関数を作ります。
今回は、OnPushButton()関数を記述したButtonTestというスクリプトを作って、ボタンオブジェクトに貼り付けました。なお、呼び出す関数のアクセス修飾子はpublicにしなければいけません。
OnPushedButton()関数が呼び出されるとコンソール画面に　<b>ボタンが押されたよ！！</b>　と表示するスクリプトです。 





```C#:ButtonTest.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ButtonTest : MonoBehaviour
{
    // 呼び出す関数
    public void OnPushedButton() {
        Debug.Log("ボタンが押されたよ！！"); // コンソールに表示
    }
}
```






##4.0 スクリプトの貼り付け
作ったスクリプトをボタンオブジェクトに貼り付けます。
保存したButtonTestスクリプトをボタンオブジェクトにドラッグ&ドロップします。
Inspectorウインドウでボタンオブジェクトを見てみるとButtonTestスクリプトが貼り付けられたButtonTest(Script)コンポーネントが出来ています。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352037/ddc333a2-a59e-6d99-eac8-9ab76088af6d.jpeg" alt="Add Component" title="Add Component" width="400" height="300">





























##5.0 呼び出す関数の登録
ボタンを押した時に呼び出される関数を登録します。
ボタンコンポーネントの中のOn Clickイベントの右下に " ＋ " ボタンがあります。これを押すと関数を登録できる画面が出てきます。
ここに関数を持っているオブジェクトを登録します。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352037/50228db7-1208-6092-d733-93cf359a6201.jpeg" alt="On Click" title="On Click" width="400" height="300">
















呼び出したい関数を持ったスクリプトを持っているボタンオブジェクト（Button）をOn Click()のオブジェクト指定の空欄 （ None（Object）となっているところ）にドラッグ&ドロップします。


<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352037/8bda5d6e-d6a9-8b11-cb45-94aae014d2f0.gif" alt="Add Component" title="Add Component" width="600" height="300">




























次に No Functionと書かれたボタンからスクリプト名（ButtonTest）を選び、その中の関数名（OnPushedButton()）を選びます。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352037/8d106ca8-1395-c425-b78f-d6deceacf06c.gif" alt="Add Component" title="Add Component" width="600" height="300">





































👍**ポイント!!**
スクリプト名が表示されていない場合はボタンオブジェクトが正しくセットされていない、もしくはボタンオブジェクトに正しくスクリプトが貼り付けられていない可能性があります。
スクリプト名が表示されているけれど関数名が表示されていない場合は、関数のアクセス修飾子がpublicになっていない可能性があります。





<br>
**ゲームを再生（Play）、そしてボタンオブジェクトを押した後に、コンソール画面に下記のようなメッセージが表示されれば成功です。**
![ConsoleScreenWhenButtonClicked.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352037/ef61593e-1d59-6b2d-6ded-c096344f2e83.jpeg)