1. はじめに
こんにちは、azarashin です。 ゲームをプレイする際、例えばメニューから項目を選択したり、戦闘シーンでアイテムを選択したりといったような何かを選択することが多くあるかと思います。 こういった項目を選択させる処理を実現しようとすると実は色々な処理を実現する必要があります。
- 操作対象の項目を表示する
- タップ・クリックした位置を調べる
- ゲームパッドの方向キーの入力から項目を特定する
- マウスの状態に合わせて見た目を変える
- タップ・クリックまたはゲームパッドの決定ボタンが押された時に特定の処理を実行する
Unity のUI 機能のうちボタン機能を活用するとこれらの処理を比較的簡単に実現することができます。 本記事ではこのボタン機能について紹介していきたいと思います。
2. ボタンを生成する
何はともあれ、UIの根っこ部分となるCanvas オブジェクトを作成します。
続いて、Hierarchy 上で右クリック→ Create → UI → Button - TextMeshPro を選択します。
これでボタンオブジェクトが生成されます。
早速エディタを再生してボタンをクリックすると見た目が変化するのですが、これだけではまだ何も起こりません。 ボタンが押された時に何らかの処理を実行するためには、ボタンにイベントを割り当てる必要があります。
今回はボタンが押された時に画面に表示されるテキストが変化するような機能を実現していこうと思います。
表示するテキストを変化させるため、C#スクリプトファイルMyButtonEvent.cs を作成して下記のように記述してみます。
using TMPro; using UnityEngine; public class MyButtonEvent : MonoBehaviour { [SerializeField] TextMeshProUGUI _label; private int _count = 0; // Start is called before the first frame update void Start() { // ラベルを初期化する _label.text = $"{_count}"; } public void OnPressed() { // ボタンが押されたらカウンタを一つ増やし、ラベルを更新する _count++; _label.text = $"{_count}"; } }
そして先ほど生成したボタンオブジェクトにスクリプトファイルMyButtonEvent.cs をアタッチします。
上述したスクリプトのメンバ変数_label を介してテキスト表示を制御しますので、Hierarchy 上のテキストオブジェクトをMyButtonEvent コンポーネントのLabel 部分にドラッグ＆ドロップします。
続いて、ボタンが押された時にMyButtonEvent コンポーネントのOnPressed メソッドが呼び出されるようイベントの割り当てを行います。 Button コンポーネント内にOn Click() という欄がありますので、この欄にMyButtonEvent コンポーネント をドラッグ＆ドロップし、ドロップダウンリストからOnPressed メソッドを選択します。
これでボタンが押された時にOnPressed メソッドが実行されるようになりましたので、エディタを再生してみましょう。 ボタンを押すとテキスト部分が変化していくのが確認できると思います。
3. ボタンの見た目を変化させる
初期状態ではボタンの色はグレーっぽい色になっていますが、この色は変更することができます。 実際にはボタンの色と言ってもその時の状態に応じて幾つかの色を個別に設定します。 また、状態が変化した時の色の変化速度を調節することもできます。
これらのパラメータは下記のスクリプトリファレンスにて定義されています。
下記の表は上記のスクリプトリファレンスから設定可能なパラメータの記述を引用したものです。
| プロパティー | 機能 |
|---|---|
| Target Graphic | インタラクションコンポーネントに使用するグラフィック。 |
| Normal Color | コントロールの通常色。 |
| Highlighted Color | ハイライトされている時のコントロールの色。 |
| Pressed Color | 押下されている時のコントロールの色。 |
| Disabled Color | 無効時のコントロールの色。 |
| Color Multiplier | それぞれの Transition の色にこの値を乗算します。これを用いると、元の色が白以下(または完全なアルファ以下)のグラフィック要素の色(またはアルファチャネル)を明るくするために 1 より大きい色を作成することができます。 |
| Fade Duration | あるステートからほかのステートへフェードする秒単位の所要時間。 |
実際にボタンの色を設定してエディタを再生すると、下記のようにボタンの色がカラフルに変化します。 （実際のゲームではこのように派手に変化させることは稀だと思いますが、今回はボタンの振る舞いを理解しやすくするために目立つ色にしてみました。）
4. ボタンが選択される順序を設定する
ゲームパッドやキーボードで操作するタイプのゲームの場合、ボタンを上下左右のキー入力で選択することができます。 この時、初期状態ではボタンが選択される順序はUnity 側で自動的に設定されます。しかし、時には自分でボタンの選択順序を決めたくなることもあるかと思います。
4.1. 最初に選択されるオブジェクトの設定
まずよく設定するのが最初に選択されるオブジェクトをどれにするか？ということです。この設定を行うにはまずHierarchy からEventSystem を選択します。
そして、最初に選択されるボタンオブジェクトをInspector 内のEventSystem にあるFirst Selected 欄にドラッグ＆ドロップすればOKです。
4.2. オブジェクトの選択順序を設定する
オブジェクトの選択順序を設定するには、選択対象のオブジェクトをHierarchy から選択し、Inspector 欄からNavitgation を設定します。 初期状態ではこの欄がAutomatic になっており、オブジェクトの選択順序が自動的に設定されるようになっています。
Navigation のVisualize ボタンを押すと、Scene 欄でオブジェクトの選択順序を確認することができます。
ここで選択順序を手動で選択できるようにはNavigation をExplicit に変更し、上下左右の入力が発生したときに次に選択されるオブジェクトをSelect～ の各欄にドラッグ＆ドロップします。 例えば左側にあるボタンから右側にある複数のボタンを選択する時に必ず一番上のボタン（Button(1)(Buton)）が選択されるようにする場合は以下のように設定します。
実際にエディタを再生すると以下のようになります。
5. 終わりに
本記事ではボタンの操作について基本的なことを説明しました。 今回紹介したボタンは典型的なUI部品の見た目でしたが、実際のゲームで入力を受け付けている一見ボタンに見えないような部分も 中身はButton オブジェクトだったりすることもあります。 ボタンの見た目を工夫し、ビジュアルと操作性を両立できるようなゲームを目指していきましょう。
