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)に移動しましょう。
実行するとボタンを押して色が変わるのが確認できます。
[PR] Unityを使ったゲーム開発で挫折しない学習方法を動画で公開中
ボタンの挙動を設定(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オブジェクトの色がランダムに変化するようになります。
ボタンを押した際に任意の処理を行うことができました。今回の記事は以上です。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
今回はUnity標準のUI機能、uGUIでボタンを配置して任意の処理を行ってみました。ボタンはアプリケーションの基本となるUIなので、ぜひ覚えていってくださいね。
ボタンの見た目の変化と、押したときに実行される処理については以上だよ。
ボタンのイベントを登録する部分は、スクリプトを全く書かなくて良いんですね。
そうだね。他にもuGUIには、スクロールビューやドロップダウンリストなど、便利なUIが用意されているよ。
ボタン以外にもたくさんあるんですね！ いろいろ試してみます！
TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
