UnityでuGUIのボタンを配置してイベントを登録する方法を現役エンジニアが解説【初心者向け】
初心者向けに、UnityのuGUIでボタンを配置して、押した際のボタンの挙動とイベントの発生を解説しています。 細かい設定のスクリーンショットやアニメーションも豊富に掲載しているので、読むだけでuGUIのボタンを作成するイメージを掴むことができます。 Unityに興味がある方に是非おすすめです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
UnityでUIを作成するには、uGUI(UnityGUI)と呼ばれる機能を使用します。
UnityのUIは今まで機能が貧弱で様々なプラグインによって実装するのが主流でしたが、現在(2017年12月)は公式のuGUIに安定して落ち着いています。
なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。
今回はuGUIの基本であるボタンの配置を行っていくよ
田島メンター！！ Unityは3Dのツールというイメージがありますが、UIも作れちゃうんですかー？
そうだね。uGUIを使えばUIも2Dのアプリも簡単に作れてしまうよ。
それは素敵ですね！ 早速やってみたいです！
目次
本記事では下記の流れで説明していきます。
ボタンの作り方
まずはボタンを作っていこう
ボタンも他のオブジェクトと同じように作れるんですか？
他のオブジェクトと同じように、GameObjectメニューやヒエラルキーを右クリックなどから作成できるよ。早速作ってみよう。
ボタンなどのUIオブジェクトは「Canvas」オブジェクト内に配置します。
Canvasがない状態でUIオブジェクトを作成すると、自動的にCanvasが作成されます。
メニューの[GameObject]->[UI]->[Button]からボタンを作成してみましょう。
ボタンとキャンバスが作成されました。
インスペクタで見やすい位置(0,0,0)に移動しましょう。
実行するとボタンを押して色が変わるのが確認できます。
ボタンの挙動を設定(Transition)
ボタンを押したら色が変わっていますけど、このときの色って変更できるんですか？
変更できるよ。色以外にも、画像そのものを切り替えたり、アニメーションさせたりもできるんだ
すごい！ ボタンだけでいろいろできそうですね
先程、ボタンを押すと色が変わることが確認できましたが、Unityではボタンを押した際のリアクションをTransition(トランジション=遷移)と呼びます。
Transitionはボタンのインスペクタで選択することができます。
Transitionには以下の種類があります。
- None : ボタンを押しても見た目は変わらない
- Color Tint : ボタンを押した際に色が変わる
- Sprite Swap : ボタンを押した際にスプライトが切り替わる
- Animation : ボタンを押した際にアニメーションが再生される
１つ１つ設定を見ていきましょう。
・None
設定項目はなく、ボタンを押しても見た目が変わりません。見た目が変わらないだけなので、ボタンのイベント（後述）は起動します。
・Color Tint
デフォルトの設定です。ボタンを押した際やマウスオーバーした際の色を設定できます。
- Target Graphic : 色を変えるImageコンポーネントが追加されたゲームオブジェクト
- Normal Color : 通常時の色
- Highlighted Color : マウスカーソルを乗せたときの色
- Pressed Color : ボタンを押したときの色
- Disabled Color : ボタンが無効になっているときの色
- Color Multiplier : 色に倍率をかけます。あまり使用しませんが、これによって暗い色のボタンを押した際の色を明るくすることができます。
- Fade Duration : ボタンを押した際の色の切り替わりにかかる時間を秒で指定します。
・Sprite Swap
ボタンを押した際やマウスオーバーした際にスプライトが切り替わります。
- Target Graphic : スプライトを切り替えるImageコンポーネントが追加されたゲームオブジェクト
- Highlighted Sprite : マウスカーソルを乗せたときに切り替わるスプライト
- Pressed Sprite : ボタンを押したときに切り替わるスプライト
- Disabled Sprite : ボタンが無効になった際に切り替わるスプライト
また、通常時のスプライトはTarget Graphicに指定されたImageコンポーネントのSourceImageに設定します。
・Animation
ボタンを押した際に作成したアニメーションが再生されます。
- Normal Trigger : 通常状態に戻る際に発生させるアニメーショントリガー
- Highlighted Trigger : マウスカーソルを乗せた際に発生させるアニメーショントリガー
- Pressed Trigger : ボタンを押した際に発生させるアニメーショントリガー
- Disabled Trigger : ボタンが無効になった際に発生させるアニメーショントリガー
「Auto Generate Animation」ボタンを押すことで、ボタンに対応したトリガー付きのアニメーターコントローラーとアニメーションが自動で生成されます。
ボタンのクリックイベント
ボタンを作ったのは良いんですけれど、押したときに何か処理をさせたい場合はどうしたら良いんでしょうか？
ボタンには、コンポーネントのメソッドを簡単に呼び出せる機能が付いているよ。これを使って、自作のスクリプトを呼び出してみようか。
事前準備として、自作のスクリプトを作成します。
「ButtonAction.cs」という名前のスクリプトを作成して、以下のコードをコピー＆ペーストしてみましょう。
using UnityEngine;
using UnityEngine.UI;
public class ButtonAction : MonoBehaviour
{
public void OnButtonClick() {
ChangeRandomColor();
}
void ChangeRandomColor() {
var r = Random.Range(0f, 1f);
var g = Random.Range(0f, 1f);
var b = Random.Range(0f, 1f);
GetComponent<Image>().color = new Color(r, g, b);
}
}
次に、Imageオブジェクトを作成します。
[GameObject]->[UI]->[Image]からImageオブジェクトを作成します。
作成したら、ボタンと被らない位置に移動させましょう。
最後に、上記で作成したスクリプトをImageオブジェクトにアタッチします。
これで事前準備は完了です。
それではボタンイベントの説明に戻ります。
ボタンのインスペクタにはOnClickというUnityイベントが用意されています。
ここにボタンが押された際に呼び出されるメソッドを登録することができます。
現在は何も登録されていないので、”List is Empty”(リストが空)と表示されています。
まずは「＋」ボタンを押して新しいイベントリスナを作成しましょう。
次に、イベントを呼び出す対象に、先程作成したImageオブジェクトを設定します。
右側の”No Function”と書かれたプルダウンをクリックすることで、
Imageオブジェクトにアタッチされたコンポーネントの一覧と、コンポーネントのメソッドの一覧が表示されます。
今回は先程作成した自作スクリプト(ButtonAction)のOnButtonClickメソッドを指定します。
実行すると、ボタンをクリックするたびにImageオブジェクトの色がランダムに変化するようになります。
ボタンを押した際に任意の処理を行うことができました。今回の記事は以上です。
まとめ
今回はUnity標準のUI機能、uGUIでボタンを配置して任意の処理を行ってみました。ボタンはアプリケーションの基本となるUIなので、ぜひ覚えていってくださいね。
ボタンの見た目の変化と、押したときに実行される処理については以上だよ。
ボタンのイベントを登録する部分は、スクリプトを全く書かなくて良いんですね。
そうだね。他にもuGUIには、スクロールビューやドロップダウンリストなど、便利なUIが用意されているよ。
ボタン以外にもたくさんあるんですね！ いろいろ試してみます！
TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。
