ボタンを配置してみよう Unity UIってなに？OnClick()？を解説[Unity]

UIってなに？

ボタンは「UI」の一部であるそうです。

UIってなに？
User Interface(ユーザーインターフェース)の略称です。
User はまだなんとなく分かりますが
Interfaceってなんでしょうね。
意味を調べると接合部分とか接触面とのこと…

合わせると「ユーザーとの接触面」
なるほど、ユーザーとゲームとの接触面ってことですね。

ユーザーがボタンを押すことによってゲーム内に何か変化が起きる事になります。だからユーザーインターフェースっていうんでしょうね。

Unity上でボタンを作成しよう

ではUnity上でボタンを作成する方法です。
Hierarchyウィンドウで右クリック→UI→Button で作成できます。

ButtonをクリックするとInspectorウィンドウのImage(Script)のところにSource Imageというのがありますね。

ここの横のちっちゃな丸をクリックすると画像が選択できます。
ここで選択した画像がボタンの画像になります。

Canvasとは? Panelとは?

順番が逆になっちゃいましたがボタンというのはCanvasという表示領域の中で描画されるそうです。

ボタンを作成したい場合Canvasが無いと作成できないため、もし無かったら勝手に作られます。

そしてCanvasとButtonの間的な存在がPanelです。
複数のボタンをひとまとまりにしたい、っていう場合にPanelが活躍します。

例えばCanvas上のこのボタンとこのボタンだけ非表示にしたいという場合などにPanelが活躍しそうですね。

ボタンからタワーの生成について
ボタンのOn Click()について
もう少し処理を理解する
TileScriptを変更する

ボタンからタワーの生成について

手順をまとめると以下になります。
・ボタンInspectorウィンドウのOn Clickにタワーを生成するC#スクリプトをアタッチする
・タワーを生成するC#スクリプト自体もボタンにアタッチする
・C#スクリプトに生成したいprefabを紐付ける

順序が逆転しますが、まずは元になるC#Scriptを作成しましょう。
動画ではパパっと作っていっているのですが、頭で理解するには早すぎてよくわかりませんでしたので、ここで整理していきます。

まずはタワーボタン用のC#Scriptを作成します。

public class TowerBtn : MonoBehaviour
{
    [SerializeField]
    private GameObject towerPrefab;

    public GameObject TowerPrefab { get => towerPrefab;}
}

ここでやっているのはタワーのPrefabを定義しているだけです。

そして次にGameManagerにどのボタンを押したか？を認識させるメソッドを定義します。

    public TowerBtn ClickedBtn { get; private set; }

    public void PickTower(TowerBtn towerBtn)
    {
        this.ClickedBtn = towerBtn;
    }

まずpublic TowerBtn ClickedBtn { get; private set; }
でTowerBtnメソッドを定義しています。

そしてPickTowerの引数にTowerBtnを指定することによってPickTowerが呼ばれた際にクリックした対象のボタンを認識させています。

ちょっとわかりにくいですよね。
なにがしたいかというと押されたボタンが何か？をGameManagerが認識できるようにしているんです。

ボタンのOn Click()について

次にUnity上のボタンのOn Click() で上記で作成したスクリプトをアタッチします。

一番最初にボタンに対し、TowerBtnをアタッチします。
ここの変数であるTower PrefabにタワーPrefabを指定します。

そしてButtonのOn Click()で実行するスクリプトを追加しています。
そしてその中のどのメソッドを呼び出すかを決め、最後にPickTowerの引数をここで指定しています。

これで作業は終わりです。

もう少し処理を理解する

もう少し理解するために今の逆順(=ゲームで実際に処理されている順)で動作を見ていきましょう。

まずゲームを初めて配置したボタンをクリックしたとします。

するとまずボタンのOn Clickが実行され紐付けられているGameManagerのPickTowerが呼び出されます。

例えばゲーム画面一番上のダイヤモンドボタンを押した場合、引数にダイヤモンドボタンが指定されているのでPickTowerが実行されると

this.ClickedBtn = ダイヤモンドボタン;

と設定されます。