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

ゆにてく備忘録

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

uGUIチュートリアル まとめ7 UI Slider

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


UI Slider - Unity Official Tutorials

UI Slider

f:id:n_taku:20170425233850p:plain

音量調節や体力ゲージなどに用いられ,Slider(Script)で制御する.Sliderは基本的に3つの要素から成り立つ.背景グラフィックとSliderの選択中の値を示すFill(塗りつぶし)グラフィック,選択中の値の位置を示すハンドルにより成り立つ.背景とハンドルはなくても良い

f:id:n_taku:20170426004426g:plain

Slider(Script)

f:id:n_taku:20170426005709p:plain

Interactable

対象スライダーが入力を受け入れるかどうか.スライダーを表示のみでユーザーに操作をさせない場合(HPバーなど)はInteractableをオフにする.Interactableがオフの場合Transitionの状態が無効状態となる.

Transition

スライダーが通常時,選択時,押下時,無効時などの状態での見た目や状態遷移時の見た目を設定する.Transition時の挙動は他のUI要素と共通だが,Sliderの場合ハンドルにしか適応されない. Transitionの詳細は次回

navigation

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

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

Fill Rect

要素の塗りつぶしに使われるグラフィックのRectTransformへの参照で,スライダーの値までスライダーが塗りつぶされる.

Handle Rect

ハンドルに使われる,グラフィックのRectTransformへの参照で,設定しなくても良い.HPバーなどの時には指定しないで良さそう.

Direction

値の増減の方法を設定できる.以下の4種類を選べる.

  • Left To Right
  • Right To Left
  • Bottom To Top
  • Top To Bottom

f:id:n_taku:20170429192418g:plain

Min Value, Max Value

スライダーの選択範囲の最小値と最大値を設定できる.DirectionがLeft To Rightの時は一番左が0で一番右が1となる.Min Valueはマイナスの値を設定することができるが,Max Valueより小さい値を設定しなければならない.

Whole numbers

これにチェックを入れると,スライダーの値が常に整数になる.少数をスライダーが指定している状態からWhole numbersを指定すると,最も近い整数値に調整される.

Value

スライダーの現在値が表示される.Inspectorで数値を入れておくと,それが初期値となる.

On Value Changed (Single)

f:id:n_taku:20170430021741p:plain

スライダーをタップした時や,動かした時に呼び出されるイベント.On Value Changedは現在のスライダーの値をfloat値としてイベントの関数に渡すことができる.Dynamic Floatと書いてある下にある関数はスライダーの値を受け取ることができる関数で,Static Parameterと書いていある下にある関数はスライダーの値を受け取ることができない関数である

f:id:n_taku:20170430021749p:plain

f:id:n_taku:20170430021754p:plain

f:id:n_taku:20170430021800p:plain

詳細は以下

unitech.hatenablog.com

Scriptからのスライダーの値設定

HPバーなどでスライダーを用いる時は,スクリプトから値を設定することが多い.以下がスクリプトからスライダーの値を設定した例である. またスクリプトから値を設定する時は,スライダーに対する入力を制限するためにinteractiveをoffにする.

gist9332e8ec48b42118ec3fca74700a2f02