この章ではuGUIのボタンについて説明します。ボタンはユーザーに決定やキャンセルの意思を求めたり次のメニューを表示するときなど様々な処理のトリガーとして使われます。uGUIのButtonエレメントは「選択中」、「押下された」、「無効」などの状態を持っており、その状態に応じて色の変化やアニメーション再生などの演出を行うことができます。また、ボタンはクリックされた時に指定された関数を呼び出すことができゲームの処理と結びつけることができます。
Buttonエレメント
Buttonエレメントを作成するにはメニューからGameObject→UI→Buttonを選択してください。シーンにButtonエレメントが作成されます。シーンにCanvasがない場合は自動的にCanvasも作成されます。


ButtonエレメントにはButtonコンポーネントとImageコンポーネントが取り付けられています。Imageコンポーネントはボタンの背景となる画像の表示をします。ボタンの背景を変更したいときはImageコンポーネントのSource Imageプロパティにスプライトを設定します。


またButtonエレメントの子オブジェクトとしてTextエレメントが作成されます。Textエレメントはボタンの上に表示されるテキストを表示するためのものですが、テキストを表示する必要がなければ削除してしまってかまいません。
Buttonエレメントの状態
Buttonエレメントには幾つかの状態(ステート)があります。まず、Normal状態はボタンに何も起こっていない通常の状態です。ゲーム画面にボタンが表示された時点ではNormal状態です。 そして、マウスカーソルがボタンの上にのるとボタンはHighlighted状態になります。Highlighted状態はこのボタンが選択されていることを表しています。 ボタン上でマウスボタンを押下するとPressed状態になります。Pressed状態の時ボタン上でマウスボタンを離すとボタンを「クリック」したことになります。通常ユーザーは何かの選択を決定するときにボタンをクリックします。なお、ボタンを「クリック」するという動作はボタンの押下した瞬間ではなく「押して離す」ことです。途中でボタン外にカーソルを移動させた場合は「クリック」したことになりません。 Disable状態はこのボタンを押すことができない状態を表します。ButtonエレメントのIntaractableプロパティのチェックを外すとDisable状態になります。
状態 | 説明 |
---|---|
Normal | 通常の状態 |
Highlighted | マウスカーソルがボタンにのったときや、カーソルキー、ジョイスティックなどでボタンが選択されている状態 |
Pressed | ボタンが押されたときの状態 |
Disable | ボタンが使用不可のときの状態 |
Buttonコンポーネント
Buttonコンポーネントのプロパティの説明を行います。
Interactableプロパティ
Interactableプロパティはユーザからの入力をボタンが受け取るか受け取らないかを設定できます。Interactableプロパティのチェックを外すとユーザからの入力を受け取らなくなります。この時ボタンはDisable状態となります。
Transitionプロパティ
TransitionプロパティはButtonエレメントの状態(Normal,Pressedなど)に応じてボタンをどのように演出するかそのモードを設定できます。Transitionプロパティは以下のようなモードがあります。
モード | 説明 |
---|---|
Color Tint | Buttonエレメントの状態に応じて色を変更するモードです |
Sprite Swap | Buttonエレメントの状態に応じてボタンの画像を変更することができます |
Animation | Buttonエレメントの状態に応じてボタンのアニメーションを再生します |
Navigationプロパティ
キーボードのカーソルキーやゲームパッドで今選択していエレメントを他のボタンやUIを切り替えるときのルールを設定します。
モード | 説明 |
---|---|
None | 選択の移動を行いません |
Horizontal | 左右のエレメントに選択状態を移動させます |
Vertical | 上下ののエレメントに選択状態を移動させます |
Automatic | 上下左右のエレメントに選択状態を移動させます |
Explicit | 上下左右のエレメントに選択状態を移動させます。どのエレメントに選択状態を移動させるかを手動で指定します |
Transitionモードの説明
Transitionプロパティに設定したモードにより設定できるプロパティが変化します。各Transitionモードで設定できるプロパティについて説明を行います。
Color Tintモードのプロパティ

Target Graphicプロパティ
ボタンの画像を設定します。画像はImageエレメントを指定します。Buttonオブジェクトを作成したときはButtonエレメントと一緒に取り付けられているImageエレメントが設定されています。
Normal ColorプロパティHighlighted Colorプロパティ
Pressed Colorプロパティ
Disabled Colorプロパティ
Buttonエレメントの各状態の時の色を設定します。ボタンが押されたときや選択されたときの色を設定します。 Normal,Highlighted,Pressed,Disabledの各状態に白、緑、赤、青を設定したときの動作は以下のようになります




Color Multiplierプロパティ
設定した色の明るさの倍率を設定します。各ColorにこのColor Multiplierの値が乗算されるのですが、Unityの標準のUIシェーダーではColorはColor Multiplierを使っても255を超えられませんので元の画像を暗く作っておく必要があります。
Fade Durationプロパティ
色が変化する時間[秒]を指定します。値が小さいほど素早く変化します。
Sprite Swapモードのプロパティ
Sprite SwapモードはButtonエレメントの状態に応じて画像を差し替えます。ボタンが選択されたときや押されたときに画像が変化します。

Target Graphicプロパティ
ボタンのImageエレメントを指定します。Buttonオブジェクト作成時に一緒に取り付けられているImageエレメントが自動で設定されています。ImageエレメントのSource ImageプロパティにはボタンがNormal状態の時のスプライトを設定しておきましょう。
Highlighted Spriteプロパティ
Pressed Spriteプロパティ
Disable Spriteプロパティ
にはButtonエレメントの各状態の時のスプライトを設定します。 ImageエレメントのSource Imageにバナナ、ButtonエレメントのHightlighted Spriteにメロン、Pressed Spritにパイナップル、Disabled Spriteにブドウのスプライトを設定すると、以下のようにボタンの画像がButtonエレメントの状態に応じて更新されます。




Animationモードのプロパティ
AnimationモードはButtonエレメントの状態に応じてボタンをアニメーションさせます。

Normal Trigger,プロパティ
Highlighted Triggerプロパティ
Pressed Triggerプロパティ
Disabled Triggerプロパティ
ボタンが各状態になった時にtrueになるMecanimのトリガー名を設定します。少しわかりずらいのでボタンにアニメーションを付ける手順を解説します。
Animationを付ける手順
Auto Generate Animationボタンを押してください。

新しいAnimation Controllerが自動作成されます。自動で作成されたAnimation Controllerのセーブが行われますので任意のファイル名でセーブしてください。ここではMyButtonControllerというファイル名にします。このAnimation ControllerにはNormalやHightlightedなどのボタンの状態のアニメーションやその遷移が設定されています。

ButtonエレメントにAnimatorコンポーネントが自動で取り付けられます。このAnimatorコンポーネントには先ほどセーブしたAnimation Controllerが設定されています。

Hierarchy ビューで「Buttonエレメントを選択した状態で」メニューからWindow→Animationを選択してください。Animationウインドウが開きます。


Animationウインドウの左上のプルダウンメニューからHighlightedを選択してください。このプルダウンメニューはどのアニメーションの編集を行うかを選択できます。ここではHightlightedの時ボタンが少し大きくなるアニメーションをつくってみます。

キーフレームを作りましょう。Recボタンを押してください。

タイムバーはアニメーションの時間軸を表していてキーフレームを打つ時間を指定します。赤の縦線が現在のアニメーションの時間でマウス操作で位置を変更することができます。今回は0フレームだけのアニメーションを作るのでそのまま0の位置にしておいてください。

ButtonエレメントのRect TransformのScaleをInspectorビューで変更してください。少し大きくしてみましょう。Scaleを(1.2,1.2,1.2)にしてみてください。


Recボタンを押して元に戻してください

Playボタンを押してゲーム画面のボタンにマウスカーソルを乗せてみましょう。少し大きくなりましたね。


今回はScaleだけでしたが、PositionやRotation、色やSpriteも同様にアニメーションで設定できます。もっといろいろなアニメーションを付けたいときはUnityのアニメーションシステムMecanimを学ぶとよいでしょう。
他のボタンに先ほど作ったアニメーションを再利用したい場合は以下の手順で行います。
新しく作ったButtonエレメントのTransitionプロパティをAnimationに設定します。

Animatorコンポーネントをボタンエレメントに取り付けてください。

AnimatorコンポーネントのControllerプロパティに先ほど作成したMyButtonControllerを設定してください。

ボタンのクリックで実行する処理の設定
ボタンがクリックされたとき任意の処理を行う方法を説明します。OnClickプロパティにボタンを押されたとき呼び出される関数を指定することで実現します。 呼び出される関数はpublicで戻り値はvoidでなくてはなりません。また引数をint,float,string,bool,Objectの中から一つとれます。呼び出す関数は以下のどれかの型になります。
public void FunctionName()
public void FunctionName(int arg)
public void FunctionName(float arg)
public void FunctionName(string arg)
public void FunctionName(bool arg)
public void FunctionName(Object arg)
ObjectはUnityの多くのクラスのベースのクラスです。コンポーネントやスクリプトはすべてこのObjectクラスを継承しています。 実験してみましょう。ButtonFunctionという新しいスクリプトを作成して以下のように編集してください。
ButtonFunction.cs
using UnityEngine;
using System.Collections;
public class ButtonFunction : MonoBehaviour {
public void NoArgFunction()
{
Debug.Log ("NoArgFunction");
}
public void IntArgFunction(int i)
{
Debug.Log ("IntArgFunction Called. arg=" + i.ToString ());
}
public void FloatArgFunction(float f)
{
Debug.Log ("FloatArgFunction Called. arg="+f.ToString());
}
public void StringArgFunction(string s)
{
Debug.Log ("StringArgFunction Called. arg="+s);
}
public void BoolArgFunction(bool b)
{
Debug.Log ("BoolArgFunction Called. arg="+b.ToString());
}
public void ObjectArgFunction(Object o)
{
Debug.Log ("ObjectArgFunction Called. arg="+o.ToString());
}
}
ボタンが押されたときこれらの関数を呼び出すようにOnClickに設定してみます。 シーンに空のGameObjectを作成してButtonFunctionスクリプトを取り付けてください。作ったGameObjectの名前をGameLogicObjectに変更してください。

ButtonエレメントのOnClickの「+」を押してください。

先ほどシーンに作成したGameLogicObjectを設定します。

関数を設定します。今はNo Functionと表示されているプルダウンメニューからからButtonFunctionスクリプトを選択して、さらにStringArgFunctionを選択してみましょう。

StringArgFunctionの引数の値を設定するフォームが出るので任意の文字列を入力してください。今回は「HELLO!!!!」を入力してみました。

Playボタンを押してボタンを押してください。先ほど入力した文字列を引数にしてButtonFunctionスクリプトのStringArgFunction関数が呼び出され、Consoleウインドウにメッセージが出力されました。

また、関数だけではなくpublicのプロパティに値をセットすることもできます。これは自作のスクリプトでもUnityのコンポーネントでも可能です。ただし、値がint,float,string,bool,Objectのものに限ります。