ボタンの動作とクリック時の処理

 

Buttonエレメントの動作およびボタンがクリックされたとき行う処理を設定する方法について解説します

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

Buttonエレメント

Buttonエレメントを作成するにはメニューからGameObject→UI→Buttonを選択してください。シーンにButtonエレメントが作成されます。シーンにCanvasがない場合は自動的にCanvasも作成されます。

Buttonエレメントの作成
Buttonエレメントの作成
Buttonエレメント
Buttonエレメント

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

ボタンの画像を変えるときはImageコンポーネントのSource 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コンポーネントのプロパティの説明を行います。
Buttonコンポーネント
Buttonコンポーネント

Interactableプロパティ

Interactableプロパティはユーザからの入力をボタンが受け取るか受け取らないかを設定できます。Interactableプロパティのチェックを外すとユーザからの入力を受け取らなくなります。この時ボタンはDisable状態となります。

Transitionプロパティ

TransitionプロパティはButtonエレメントの状態(Normal,Pressedなど)に応じてボタンをどのように演出するかそのモードを設定できます。Transitionプロパティは以下のようなモードがあります。

モード 説明
Color Tint Buttonエレメントの状態に応じて色を変更するモードです
Sprite Swap Buttonエレメントの状態に応じてボタンの画像を変更することができます
Animation Buttonエレメントの状態に応じてボタンのアニメーションを再生します
Transitionのモード

Navigationプロパティ

キーボードのカーソルキーやゲームパッドで今選択していエレメントを他のボタンやUIを切り替えるときのルールを設定します。

モード 説明
None 選択の移動を行いません
Horizontal 左右のエレメントに選択状態を移動させます
Vertical 上下ののエレメントに選択状態を移動させます
Automatic 上下左右のエレメントに選択状態を移動させます
Explicit 上下左右のエレメントに選択状態を移動させます。どのエレメントに選択状態を移動させるかを手動で指定します

Transitionモードの説明

Transitionプロパティに設定したモードにより設定できるプロパティが変化します。各Transitionモードで設定できるプロパティについて説明を行います。

Color Tintモードのプロパティ

Color Tintモードのプロパティ
Color Tintモードのプロパティ

Target Graphicプロパティ

ボタンの画像を設定します。画像はImageエレメントを指定します。Buttonオブジェクトを作成したときはButtonエレメントと一緒に取り付けられているImageエレメントが設定されています。

Normal Colorプロパティ
Highlighted Colorプロパティ
Pressed Colorプロパティ
Disabled Colorプロパティ

Buttonエレメントの各状態の時の色を設定します。ボタンが押されたときや選択されたときの色を設定します。 Normal,Highlighted,Pressed,Disabledの各状態に白、緑、赤、青を設定したときの動作は以下のようになります

通常(Normal)
通常(Normal)
マウスカーソルをのせたとき(Hightlighted)
マウスカーソルをのせたとき(Hightlighted)

クリックしたとき(Pressed)
クリックしたとき(Pressed)
 Interactableのチェックを外したとき(Disabled)
Interactableのチェックを外したとき(Disabled)
Color Tintでの各状態のボタンの推移

Color Multiplierプロパティ

設定した色の明るさの倍率を設定します。各ColorにこのColor Multiplierの値が乗算されるのですが、Unityの標準のUIシェーダーではColorはColor Multiplierを使っても255を超えられませんので元の画像を暗く作っておく必要があります。

Fade Durationプロパティ

色が変化する時間[秒]を指定します。値が小さいほど素早く変化します。

Sprite Swapモードのプロパティ

Sprite SwapモードはButtonエレメントの状態に応じて画像を差し替えます。ボタンが選択されたときや押されたときに画像が変化します。

Sprite Swapモードのプロパティ
Sprite Swapモードのプロパティ

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エレメントの状態に応じて更新されます。

Normal
Normal
Heightlighted
Heightlighted
Pressed
Pressed
Disabled
Disabled

Animationモードのプロパティ

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

Animationモード
Animationモード

Normal Trigger,プロパティ
Highlighted Triggerプロパティ
Pressed Triggerプロパティ
Disabled Triggerプロパティ

ボタンが各状態になった時にtrueになるMecanimのトリガー名を設定します。少しわかりずらいのでボタンにアニメーションを付ける手順を解説します。

Animationを付ける手順

Auto Generate Animationボタンを押してください。

Auto Generate Animation ボタン
Auto Generate Animation ボタン

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

Animation Controller の保存
Animation Controller の保存

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

Animatorコンポーネントが自動で取り付けられる
Animatorコンポーネントが自動で取り付けられる

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

Animation ウインドウを開く
Animation ウインドウを開く

Animationウインドウ
Animationウインドウ

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


図 Heighlightedの選択

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


図 Recボタン

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

タイムバー
タイムバー

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

Inspectorビューでスケールを操作
Inspectorビューでスケールを操作
キーフレームが打たれる
キーフレームが打たれる

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


図 Recモード解除

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

ボタンがHightlightedになるとアニメーションが再生される
ボタンがHightlightedになるとアニメーションが再生される
ボタンがHightlightedになるとアニメーションが再生される

今回はScaleだけでしたが、PositionやRotation、色やSpriteも同様にアニメーションで設定できます。もっといろいろなアニメーションを付けたいときはUnityのアニメーションシステムMecanimを学ぶとよいでしょう。

他のボタンに先ほど作ったアニメーションを再利用したい場合は以下の手順で行います。

新しく作ったButtonエレメントのTransitionプロパティをAnimationに設定します。


図 Animationモードにする

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


図 Animatorコントローラを取り付ける

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

Animator Controllerを設定する
以上で新しく作ったボタンにも先ほどのアニメーションを設定することができました。

ボタンのクリックで実行する処理の設定

ボタンがクリックされたとき任意の処理を行う方法を説明します。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の「+」を押してください。

「+」ボタンの押してOnClickの要素を追加した
「+」ボタンの押してOnClickの要素を追加した

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

GameLogicObjectを設定
GameLogicObjectを設定

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

FunctionにStringArgFunctionを設定
FunctionにStringArgFunctionを設定

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

引数に「HELLO!!!!」を設定
引数に「HELLO!!!!」を設定

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

コンソール出力で動作を確認
コンソール出力で動作を確認

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

広告