【Unity】OnClickとは?UIのボタンにクリックイベントを作成する方法

Unity

こんにちは、ともくんのゲーム作り部屋にようこそ!

このページでは、

「Unityのボタンクリックイベントってなに?」

「ボタンを押す処理はどうやって作るの?」

というお悩みの方に向けた内容となっています。

Unityでは、ボタンを配置してそのボタンクリックに合わせたクリックイベント(OnClick)を作ることができます。

PC用ゲームであればボタンをマウスでクリック、スマホ用ゲームであればボタンをタップした際の処理をクリックイベントで作ることができます。

そして、このクリックイベントを使うことで、ボタンを押すのと同時にオブジェクトを動かしたり、タイマーをスタートしたりといったことが簡単に出来るようになります。

そこで、このページでは、Unityで作ることができるボタンのクリックイベントについて、どんな仕様や特徴なのか、また作り方までをまとめていきます。

この記事を書いた人

ゲーム作りを学び始めた一児のパパです。
このブログは、子供から「ゲームを作ってみたい!」と言われ、非プログラマーでゲーム作りをしたことない僕が、ゲーム作りの本を読んで独学でゲーム開発を学んでいるブログです。
同じように初めてゲーム作りをしている方と一緒に学んでいけるようなブログに出来たらいいなと思っています。
また、「このコードはおかしい」とか「もっと良い書き方があるよ!」などあれば、どんどん指摘して頂けると助かります。

ボタンのクリックイベント(OnClick)とは?

ボタンのクリックイベントとは、Unityに配置したボタンをクリックした際に、ゲーム内で処理を行うことができる仕組みです。

もう少し詳しく書くと、マウスでボタンをクリックしたり、スマホでタップ操作してボタンを押すことで、クリックイベントの中で設定しておいた処理が実行されるという仕様になっています。

このクリックイベントは、Unityの中でデフォルトで作成されているもので、「OnClick」で設定することができます。

ただし、このOnClickイベントは、ボタンが押し終わったタイミングで処理が実行されることになるため、もしボタンを押した瞬間などに処理が行われるようにしたい場合は、EventTriggerというコンポーネントを使うことで作ることができます。

ボタンのクリックイベント(OnClick)の作り方

ここからは、実際にボタンのクリックイベント(OnClick)の作り方をまとめていきます。

UIのボタンを作成

まずは、ボタンをUnityに配置していきます。

ヒエラルキーウィンドウの+ボタンから「UI」の中にある「Button – TextMeshPro」を選択します。

すると、Canvasを親オブジェクトとして、ボタンの形を作る「Button」オブジェクト、さらにその配下にボタン内のテキスト表示を行う「Text(TMP)」オブジェクトが作成されます。

それぞれインスペクターウィンドウから色や形状を変えたり、テキスト内容を変更することができます。

なお、UI表示については以下のページでも解説していますので、参考にしてみてください。

クリックした際のスクリプトを作成

次に、ボタンをクリックした際にどのような処理を行いたいかを作っていきます。

今回は、ボタンを押したらオブジェクトの向きが変わるようにしたいので、オブジェクト(三角形)をゲーム内に配置しておきます。

そして、「ButtonClick」という名前でスクリプトを新たに作成して、この三角形のオブジェクトにアタッチしておきます。

using UnityEngine;

public class ButtonClick : MonoBehaviour
{
    public void OnButtonClick()    // クリック用のメソッドを作成
    {
        this.transform.Rotate(0, 0, 45);    // オブジェクトの回転させる処理
    }
}

スクリプト内で、オブジェクトの向きが変わる処理を行うメソッド「OnButtonClick」を5行目で作っていて、その中でRotate関数を使いオブジェクトが回転するようにしています。

メソッドの作り方やオブジェクトの回転のRotateについては、以下の記事でまとめていますので、参考にしてください。

ボタンにクリックイベント(OnClick)を設定

最後に、ボタンをクリックしたら先ほど作った「OnButtonClick」メソッドを呼び出す処理を作っていきます。

ボタンのオブジェクトを選択して、「On Click()」の項目の+ボタンをクリックします。

下の画像の赤枠部分に、スクリプトをアタッチした三角形のオブジェクトを選択、もしくはドラッグ&ドロップで設定します。

そして、「No Function」と書かれている場所をクリックして、先ほどのスクリプト名(クラス名)の「ButtonClick」から、「OnButtonClick」を探して選択します。

これで、ボタンをクリックすると、ボタンに紐づいている「ButtonClick」のクラスで定義した「OnButtonClick」メソッドが呼ばれることになります。

実際にゲームを実行してみると、

クリックする度にオブジェクトの向きを変更することができました。

まとめ

このページでは、Unityで使うことができるボタンのクリックイベントのOn Clickについて、どんな特徴や仕様か、また使い方までをまとめていきましたが、いかがでしたでしょうか?

ボタンを配置して、クリックすると何かしらの処理を作る場合は、クリックイベントのOn Clickを使うと非常に簡単です。

ボタンのOn Clickイベントに、どのクラスのメソッドを呼び出すかを設定してあげることで、クリックされた際の処理を作ることができます。

On Clickは簡単に使うことができますが、処理が実行されるタイミングは、クリックし終わったタイミングになるので、クリックした瞬間に行いたい場合は異なる方法を使う必要があります。

最後までお読みいただきまして、ありがとうございました!

コメント