9. ボタンを使ってみよう

ボタンを配置しよう

次はボタンのUIを配置します。 ゲームを始めるスタートのボタンを配置してみたいと思います。

Buttonは下記のどれかの方法で追加する事ができるようになっています。

  • メインメニューから、GameObject > UI > Button
  • ヒエラルキーウィンドウから、Create > UI > Button
  • 右クリックから、UI > Button

配置されたボタンは入れ子でボタン要素の中にテキスト要素が入った状態になっています。

またボタン要素は、ImageとButtonの2つのコンポーネントがアタッチされています。

インスペクタウィンドウを見ると、ボタンのコンポーネントに関していくつか設定に変更が加えられるようになっています。

ボタンには下記のように4つの状態がありますが、それぞれに各個のデザインを当てる事が可能となっています。

名前 状態
Normal 通常
Highlighted マウスが乗った時やボタンが選択されている時
Pressed ボタンが押された時
Normal ボタンが使えない時

Transrationのプルダウンを変更する事で、デザインの適用方法を変更する事ができます。 それぞれ次のようになっていて状況によって使い分けます。

名前 状態
None 何も変えない
Color Tint 色の違いで変化をつけたい場合
Sprite Swap 画像を変えて変化をつけたい場合
Animation Animatorを使用してボタン効果をつけたい場合

ボタンの色やテキスト、画像などを変更して、好きなデザインのボタンを作成しましょう。

NavigationのプルダウンはキーボードによるUIのフォーカスを切り替える設定を変更します。

名前 状態
None キーボードで変更しない
Horizontal 水平方向
Vertical 垂直方向
Automatic 自動で指定する

ボタン用のスクリプトを書こう

作成したボタンは、簡単にC#にイベントを渡す事ができるようになっています。

まずはボタンを押した際のスクリプトを作成します。 ここではいくつかのアクションを実行したいので、ButtonActionsという名前のクラスを作成します。

1
2
3
4
5
6
7
public class ButtonActions : MonoBehaviour
{
	public void OnClickStart()
	{
		print("スタートボタンが押された!");
	}
}

ボタン用のスクリプトを動かそう

最後にボタンが押されたタイミングでOnClickStart()が呼び出されるようにします。

まず、スクリプトはヒエラルキーウィンドウ上のどこかのオブジェクトにアタッチされていないと動かないので、任意のオブジェクトにアタッチします。 プロジェクトウィンドウにスクリプトを作っただけでは動かないので注意しましょう。

また、適当にアタッチすると後から探すのが大変になるので、適切なオブジェクトがステージ上に無い場合には空のゲームオブジェクトScriptsを作成して、そこにアタッチしたりします。

次に、ボタンにイベントとしてこのScriptsオブジェクトのButtonActionsコンポーネントのOnClickStartイベントを登録します。

やり方はボタンを選択し、インスペクタウィンドウの下の方にあるOn Clickという枠の中からプラスボタンを押して、クリックに新しいアクションを作成します。

プラスボタンを押すとOn Clickの枠内にオブジェクトの登録UIが現れるので、ここに先ほどのScriptsオブジェクトを設定します。

すると右側のプルダウンにScriptsオブジェクトにアタッチされているコンポーネントと、そこに登録されているパブリックな関数が選ばれるようになるので、さきほど記述したOnClickStartイベントを呼ぶようにします。

再生してみよう

最後に再生してボタンを押し、コンソールに文字が正しく出力されるか見てみましょう。 下記のどちらかでゲームが再生されます。

  • ツールバーの再生ボタン
  • ショートカット Cmnd+P
試してみよう
  • ボタンイベントには引数として文字列を持たせてみよう
  • タイトルテキストにボタンイベントを持たせてみよう