概要

Unityのバージョンは5.2.3f1

uGUIのButtonについてのメモです。
Buttonのコンポーネントの内容は以下の通りです。

Image　Imageについての説明はこちら
Button
Text　Textについての説明はこちら

内容はマニュアルを見ると詳しく載っています。
http://docs.unity3d.com/ja/current/Manual/script-Button.html
http://docs.unity3d.com/ja/current/Manual/script-SelectableNavigation.html

Buttonの表現

Buttonの表現はTransitionで変わります。

Noe　変化なし
Color Tint　色の変化
Sprite Swap　テクスチャの変化
Animation　アニメーションで変化といった感じです。

ボタンの状態は４つに分けられます。

Normal　通常の状態（Sprite Swapの場合はImageの画像が）
Highlighted　選択中の状態（フォーカス中）
Pressed　ボタンを押している状態
Disabled　ボタンが反応しない状態(Interactableのチェックをはずした状態)

ButtoのColor Tint

各状態の色を設定するとその状態になったときに色が変化する
Color Multiplierで色の乗算。Fade Durationで色が変化する時間を秒単位で指定

ButtonのSprite Swap

各状態にSpriteを設定するとその状態になったときに画像が変化する
Normalの画像はImageコンポーネントで設定する

ButtonのAnimation

Auto Generate Animationを押してButtonのcontrollerを作成する
Animationを設定したボタンをHierarchyで選択してAnimationウィンドでScaleやColorを変化させる http://www.metalbrage.com/UnityTutorials/uGUI/ButtonElement.html

ButtonのNavigation（Selectable）

Navigationはキーボードでのフォーカス順を設定できますが、特に使用しない場合はNoneにしておく
- そうしないとボタンを押したあとフォーカスが残ってHighlightedの状態がつづく
Explicitに変更すると上下左右の移動先を指定できる（これでボタン選択をループさせることもできる）
- Select Onに移動先のオブジェクトを選択する
Button(Script)はAdd ComponentでButton以外にも追加することができる（名称はSelectable）
- UI > Selectable で追加
EventSystemのFirst Selectedに最初に選択しておくオブジェクトを指定できる

参考ページ
https://yumineko.com/unity-ugui-gamepad/
http://westhillapps.blog.jp/archives/43683528.html
https://gametukurikata.com/program/uifocus

Buttonのイベント

ボタンのクリックイベントはOn Click()で制御します。
ボタンは押してから離したときにイベントが発生します。
（ボタンを押してから範囲外にドラッグして離してもイベントは発生しない、同様に別の所でクリックしてからドラッグしてボタンの場所でリリースしてもイベントは発生しない）
イベントの追加方法は
1.右下の＋をクリック
2.None(Object)に制御するオブジェクトを選択
3.No Functionで制御するメソッドもしくは変数を指定する

ButtonのSprict制御

ButtonTest

  using UnityEngine.UI;

  private Button button1;
  button1 = GetComponent<Button>();  // コンポーネントを取得

  // フォーカスを指定（nullを指定すると何も選択していない状態になる）
  EventSystem.current.SetSelectedGameObject(gameObject);

  // フォーカスされてるオブジェクトを取得
  selectedObj = EventSystem.current.currentSelectedGameObject;

  // このメソッドをOn Click()に指定するとボタンを押したときにメソッドを呼び出す
  public void OnClick()
  {
      button1.enabled = false;
  }

その他のメモ

Buttonには様々な使い道がある

横に並べてナビゲーションボタンを作る
スクロールするようにしてリストボタンを作る
メッセージボックスのYes Noボタンを作る
シーンが切り替えられるボタンを作る
ボタンを押したらアニメーションやサウンドが再生されるボタンを作る
Scriptでドラック&ドロップの処理を追加する
Scriptでボタンを押しているときに反応して離したときに解除するような処理を追加する

参考になりそうなサイトやAsset

スマホの場合、ボタンをつくる上で注意することはボタンのサイズ(小さすぎると押しづらい)
http://www.dotproof.jp/2013/08/06/minimum-tap-size/

ボタン表現の参考サイト
http://baigie.me/sogitani/2014/08/navigation-design-type/
http://lab.sonicmoov.com/smartphone/appli-ui-ux/

ボタンアニメーションの参考サイト
http://tsubakit1.hateblo.jp/entry/2015/02/11/223849
http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html
http://11neko.com/menu-style-inspiration/
http://nelog.jp/how-to-transformicons
http://elmt.jp/web/2930/#

NGUI（uGUIが出るまでゲームなどでよく使われていたアセット）
https://www.assetstore.unity3d.com/jp/#!/content/2413

今後の課題

Buttonを使ったリスト、ドロップボックス、ナビゲーションボタンなどの作り方は別の記事で書く予定。
ドラック&ドロップ、ボタンの長押し処理は別の記事で書く予定。

uGUIのButton、Selectable

概要