UnityでuGUIのボタンを配置してイベントを登録する方法を現役エンジニアが解説【初心者向け】

初心者向けに、UnityのuGUIでボタンを配置して、押した際のボタンの挙動とイベントの発生を解説しています。 細かい設定のスクリーンショットやアニメーションも豊富に掲載しているので、読むだけでuGUIのボタンを作成するイメージを掴むことができます。 Unityに興味がある方に是非おすすめです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

UnityでUIを作成するには、uGUI(UnityGUI)と呼ばれる機能を使用します。

UnityのUIは今まで機能が貧弱で様々なプラグインによって実装するのが主流でしたが、現在(2017年12月)は公式のuGUIに安定して落ち着いています。

 

なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。

 

20163020-2

 

今回はuGUIの基本であるボタンの配置を行っていくよ

 

20160620

 

田島メンター!! Unityは3Dのツールというイメージがありますが、UIも作れちゃうんですかー?

 

20163020-2

 

そうだね。uGUIを使えばUIも2Dのアプリも簡単に作れてしまうよ。

 

20160620

 

それは素敵ですね! 早速やってみたいです!

 

 

目次

本記事では下記の流れで説明していきます。

 

ボタンの作り方

20163020-2

 

まずはボタンを作っていこう

 

20160620

 

ボタンも他のオブジェクトと同じように作れるんですか?

 

20163020-2

 

他のオブジェクトと同じように、GameObjectメニューやヒエラルキーを右クリックなどから作成できるよ。早速作ってみよう。

 

ボタンなどのUIオブジェクトは「Canvas」オブジェクト内に配置します。
Canvasがない状態でUIオブジェクトを作成すると、自動的にCanvasが作成されます。
メニューの[GameObject]->[UI]->[Button]からボタンを作成してみましょう。

ボタンとキャンバスが作成されました。
インスペクタで見やすい位置(0,0,0)に移動しましょう。

実行するとボタンを押して色が変わるのが確認できます。

 

[PR] Unityを使ったゲーム開発で挫折しない学習方法を動画で公開中

ボタンの挙動を設定(Transition)

20160620

 

ボタンを押したら色が変わっていますけど、このときの色って変更できるんですか?

 

20163020-2

 

変更できるよ。色以外にも、画像そのものを切り替えたり、アニメーションさせたりもできるんだ

 

20160620

 

すごい! ボタンだけでいろいろできそうですね

 

先程、ボタンを押すと色が変わることが確認できましたが、Unityではボタンを押した際のリアクションをTransition(トランジション=遷移)と呼びます。

Transitionはボタンのインスペクタで選択することができます。

Transitionには以下の種類があります。

  • None : ボタンを押しても見た目は変わらない
  • Color Tint : ボタンを押した際に色が変わる
  • Sprite Swap : ボタンを押した際にスプライトが切り替わる
  • Animation : ボタンを押した際にアニメーションが再生される

1つ1つ設定を見ていきましょう。

・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」ボタンを押すことで、ボタンに対応したトリガー付きのアニメーターコントローラーとアニメーションが自動で生成されます。

 

 

ボタンのクリックイベント

20160620

 

ボタンを作ったのは良いんですけれど、押したときに何か処理をさせたい場合はどうしたら良いんでしょうか?

 

20163020-2

 

ボタンには、コンポーネントのメソッドを簡単に呼び出せる機能が付いているよ。これを使って、自作のスクリプトを呼び出してみようか。

 

事前準備として、自作のスクリプトを作成します。
「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なので、ぜひ覚えていってくださいね。

20163020-2

 

ボタンの見た目の変化と、押したときに実行される処理については以上だよ。

 

20160620

 

ボタンのイベントを登録する部分は、スクリプトを全く書かなくて良いんですね。

 

20163020-2

 

そうだね。他にもuGUIには、スクロールビューやドロップダウンリストなど、便利なUIが用意されているよ。

 

20160620

 

ボタン以外にもたくさんあるんですね! いろいろ試してみます!

 

 

[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。