UI ボタンの作成

1. UI ボタンの作成

ボタンは特に使用頻度が高い UI コンポーネントです。ボタンはカスタマイズが非常に簡単で、アプリケーションに合わせてあらゆるアートスタイルを補完するようすぐに設定できます。ボタンには一般公開されている On Click 機能が備わっており、実際のスクリプティングなしでインタラクションを実行できます。ボタンを使用すれば、カスタム機能の呼び出しも簡単です。

• キャンバスがすでに「Hierarchy」内にある場合は、「Canvas」を右クリックして
  「UI」 > 「Button」を選択します。シーン内にキャンバスがない場合は、自動的に作成され、ボタンの親として設定されます。（図 01）

図 01：Canvas を親として、デフォルトで表示されるボタン

ボタンは、Button そのものと子の Text の 2 つのコンポーネントで構成されます。デフォルトでは、Text コンポーネントは Unity 標準の UI テキストですが、TextMesh Pro テキストを UI コンポーネントに使用できるようになりました。TextMesh Pro では、アプリケーションのテキストを作成するときに非常に多くのオプションを利用できます。

• 「Window」ドロップダウンから、「Package Manager」を選択します。

• 「Package Manager」ウィンドウの左上で、「All」ボタンをクリックします。

• 左側のリストから TextMesh Pro パッケージを選択し、右上にある「Install」をクリックします。

• パッケージマネージャーが更新されると、「Project」タブに TextMesh Pro が表示されます。「Package Manager」ウィンドウを閉じます。

• 「Button」のピボットをクリックし、子の Text コンポーネントを表示します。（図 02）
  

図 02：子となる Text コンポーネント

• Text コンポーネントを削除します。

• ボタンを右クリックし、「UI」 > 「TextMesh Pro Text」を選択します。

• ボタンの子として、新しいテキストコンポーネントが表示されます。このテキストは白で表示されるため、若干見にくい可能性があります。

• 黄色のバウンディングボックスを調整してボタンの形状に合わせます。（図 03）
  

図 03：最初に表示されるバウンディングボックス（左側）と、ボタンに合わせたバウンディングボックス（右側）

• 「Inspector」で、必要に応じてボタンテキストを設定します。テキストは「Text Input Box」で変更できます。TextMesh Pro には、他の多数のアートまたはレイアウトプログラムと同様のテキスト編集機能が用意されています。（図 04）

図 04：「Inspector」の TextMesh Pro の設定セクション。

ボタンオブジェクトで最も重要な 2 つのコンポーネントは Image と Button です。「Source Image」は、ボタンの背景画像となります。デフォルトでは、Unity に付属している UISprite アセットに設定されています。カラーオーバーレイを追加し、ボタンの色合いを変更できます。オプションでマテリアルを追加できますが、UI シェーダーを使用する必要があります。そうしないと、ゲームビューではマテリアルが黒で表示されます。（図 05）

図 05：黄色の背景が表示されるよう編集されたボタン画像のプロパティ。ボタンの形状を定義するためのソース画像として UISprite が使用されていることに注意してください。

Button コンポーネントでは、アタッチされているボタンの機能を制御します。コンポーネントの上半分はボタン遷移（操作されたときの反応）に関する設定です。デフォルトでは、この「Transition」は「Color Tint」に設定されていますが、「Sprite Swap」または「Animation」に設定できます。「Sprite Swap」に設定すると、操作時にボタンの実際の背景画像が変更されるのに対し、「Animation」を設定すると、ボタンの機能に応じて異なるアニメーションを再生できるようになります。「Transition」は「None」に設定することもできますが、少なくともデフォルトの「Color Tint」のままにしておくことをおすすめします。ユーザーがボタンを適切にクリックするための視覚的な手掛かりになるためです。何らかの理由でボタンを無効にする必要がある場合は、「Transition」の上の「Interactable」チェックボックスをオフにしてください。（図 06）

図 06：デフォルトの「Color Tint」が設定されている Button コンポーネント

Button スクリプトの下半分のセクションは、On Click のインタラクションを作成するために用意されています。

• 「On Click()」セクションの下部にある「+」ボタンをクリックします。そうすると、新しいアクションが作成されます。（図 07）

図 07：On Click の下部の「+」ボタンをクリックしたときに表示される設定可能なアクションスロット

• 「None (Object)」スロットに、このボタンに関連付けるオブジェクトをドラッグします。または、ボタン押したときに実行する必要があるスクリプトが関連付けられているオブジェクトをドラッグします。

• オブジェクトを「Object」スロットにドラッグしたら、「Function」ドロップダウンが利用できるようになります。このドロップダウンで、実行する機能を含むオブジェクトプロパティまたはスクリプトを選択します。