読者です 読者をやめる 読者になる 読者になる

ゆにてく備忘録

Unityやその他学んだ事を忘れないために書くぶろぐ

uGUIチュートリアル まとめ3 UI BUTTON

 

目次

UnityのuGUIのチュートリアル(UI BUTTON)のまとめです.


UI Button - Unity Official tutorials - YouTube

Button

f:id:n_taku:20150321231104p:plain

  • ButtonはImage(Script)とButton(Script)からなる
  • 子要素にText要素を持つ(これは削除してもかまわない)

Button(Script)

f:id:n_taku:20150321231207p:plain

Interactable

InteractableはInputを受け付けるかどうかを表し,インタラクションさせない場合はFalseとする.falseにするとButtoが使用不可状態となる.デフォルトではボタンの状態はNormal Stateとなっている

transition

Transitionは通常状態,マウスオーバー状態,マウスクリック状態,使用不可状態の際にボタンの色を変えたり,アニメーションさせたり,画像を入れ替えたりするのに使う.Transitionはnone, Color Tint, Sprite Swap, Animationの4種類

None

f:id:n_taku:20150607145929p:plain

この状態の時アニメーションしない

Color Tint

f:id:n_taku:20150607145934p:plain

以下で指定されている色を状態に応じてTarget Graphicに乗算する.

  • Trget Graphic
  • このコンポーネントのついているオブジェクト,もしくはその子要素を指定できる
  • Normal Color
  • 通常状態のときに乗算する色を指定
  • Highlited Color
  • マウスオーバー状態のときに乗算する色を指定
  • Pressed Color
  • マウスクリック状態のときに乗算する色を指定
  • Disabled Color
  • 使用不可状態のときに乗算する色を指定
  • Color Multiplier
  • 上で指定した色を乗算する時にかける値.この値を1以上にする事で,Trget Graphicの色を明るくする事ができる.
  • Fade Duration
  • 状態が変わる際に何秒かけて乗算するのかを指定

Sprite Swap

f:id:n_taku:20150607145939p:plain

状態に応じてスプライトの切り替えをする

  • Trget Graphic
  • このコンポーネントのついているオブジェクト,もしくはその子要素を指定できる
  • Highlited Sprite
  • マウスオーバー状態のスプライト
  • Pressed Sprite
  • マウスクリック状態のスプライト
  • Disabled Sprite
  • 使用不可状態のスプライト

Animation

f:id:n_taku:20150607145925p:plain

スプライトをアニメーションで切り替える.複雑な事をしたいならこのモード

  • Normal Trigger
  • 通常状態の時のアニメーションのトリガーの名前を指定
  • Highlited Trigger
  • マウスオーバー状態の時のアニメーションのトリガーの名前を指定
  • Pressed Trigger
  • マウスクリック状態の時のアニメーションのトリガーの名前を指定
  • Disabled Trigger
  • 使用不可状態の時のアニメーションのトリガーの名前を指定

AnimationコンポーネントをつけていないとDisabled Triggerの下にAuto Generate Animationのボタンがあり,このボタンをクリックするとAnimation Controllerを生成し,Animaterコンポーネントを追加する.この生成したAnimation Controllerは下の画像の様になっている.それぞれのコールバックでの操作をAnimation Windowで定義する

f:id:n_taku:20150704185548p:plain

f:id:n_taku:20150704192626g:plain

またこのAnimation Controllerは,他のUIボタンにも指定する事ができるので,すべてのボタンの同じ挙動をこのAnimation Controller一つで定義する事ができる.

navigation

キーボードによるUIのフォーカスの際の移動の仕方を設定.

  • None
  • キーボードナビゲーション無し
  • Horizontal
  • 水平方向にナビゲート
  • Vertical
  • 垂直方向にナビゲート
  • Automatic
  • 自動でナビゲート方向を指定 <liExplicit 手動でナビゲーション方向を指定 <liExplicit シーンビューにナビゲーションの矢印が表示される.

On Click()

ボタンがクリックされたときに呼び出される関数を指定できる.指定できる関数の型は以下

gist535efa476a2e290b9d0a

On Clickの枠のなかで,このイベントを呼ぶ種類(off, Editor and RunTime(エディター変更時も実行時も呼ばれる), Runtime Only(実行時のみ呼ばれる)),呼ぶ関数が定義してあるコンポーネントを持つオブジェクト,呼ぶ関数名,もし引数がある場合は引数の値を指定する.

gist3061b780fe0565ee876d

例えばSphereに上のスクリプトをつけて,ボタンクリックで関数を呼び出した時の挙動は下となる

f:id:n_taku:20150705113246g:plain