概要

Unityのバージョンは5.2.3f1

uGUIのSlider、Scrollbar、ScrollViewについてのメモです。
各UIのコンポーネントの内容は以下の通りです。

Slider
- Slider
- Background(Image)
- Fill(Image)
- Handle(Image)
Scrollbar
- Scrollbar(Image)
- Scrollbar(Scrollbar)
- Handle(Image)
Scroll View
- Scroll View(Scroll Rect)
- Scroll View(Image)
- Viewport(Mask)
- Viewport(Image)
- Scrollbar Horizontal(Scrollbarと同じ)
- Scrollbar Vertical(Scrollbarと同じ)

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

SliderとScrollbarの表現はImageとほぼ同じなのでImageの記事を参照。
http://qiita.com/seka/items/3cdc47b0d47d85953c39
Scroll ViewはImageのMaskとScroll RectとScrollbarを組み合わせた機能

それぞれの使い道

Slider
- Min Valueを0、Max Valueを10にしてゲームの音量を10段階で調整できるバーにする
- Min Valueを0、Max Valueをキャラクターの最大ライフにして、Handleを削除してキャラクターのライフゲージにする
- Handleを削除してダウンロード中の進捗インジケータにする
Handleを使わない場合は、SliderのInteractableのチェックを外して反応しないようにしておく。

Scroll View、Scrollbar
- テキストやリストボタンをスクロールさせるのに使う。
- ゲームの広いマップを操作するのに使う。

各機能のイベント

イベントはOn Value Changed(Single)で制御します。
Sliderはスライダーの現在の値が変更されたときにイベントが発生します。
Scrollbarはスクロールの現在の値が変更されたときにイベントが発生します。
Scroll Rectはスクロール位置が変更されたときにイベントが発生します。
イベントの追加方法は
1.右下の＋をクリック
2.None(Object)に制御するオブジェクトを選択
3.No Functionで制御するメソッドもしくは変数を指定する

SliderのSprict制御

SliderTest

  using UnityEngine.UI;

  private Slider slider1;
  private ScrollRect scrollRect1;

  void Start()
  {
      slider1 = GetComponent<Slider>();
      slider1.value = 1;  // valueを設定

      scrollRect1 = GetComponent<ScrollRect>();
  }

  void Update()
  {
      Debug.Log(scrollRect1.normalizedPosition);  // Vector2 として (0, 0) から (1, 1) までの間で表現したスクロール位置
  }

  // このメソッドをOn Click()に指定するとボタンを押したときにメソッドを呼び出す
  public void OnClick()
  {
      Debug.Log(slider1.value);  // valueの状態
  }

Sliderでゲームボリューム調整バーを作る

Audio Sourceをどこかのオブジェクトに追加する
SliderのOn Value ChangedにAudio Sourceがあるオブジェクトをドラック&ドロップ
No FunctionでAudioSource>volumeを選択
実行してスライドバーを変更すると音量が変わる

Scroll Viewでスマホのテキストスクロールビューを作る

Scroll Viewを追加したらScrollbar Horizontalを削除しScroll ViewのHorizontalのチェックを外す
ContentにTextコンポーネントを追加して文字を入力リストボタンスクロールビューを作った場合は、タッチパネルのドラック感度を調整しないとスマホだとタップをドラックと誤認させてしまうことが多いので注意。（EventSystemのDrag Thresholdで調整できそう）

参考サイト　http://petlust.hateblo.jp/entry/2014/08/31/230134

その他のメモ

Sliderはテストで値を動的に変えたい時に便利
Sliderはテキストでパーセントを表示したりすると分かり易い
SliderはImageを使って本物のボリュームつまみのように回転させる表現もよさそう
Scrollでインジゲータを表現する時はバーに模様をつけて動いているように見せるといい。
Scrollは一般的な機能なので画面がスクロールする時は表示しないと違和感がでる（iPhoneのようにスクロールが停止すると消えるようにすると画面が見やすくなる） http://nekobata.blog.jp/archives/1030383839.html

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

スマホのUIに使えそうな参考サイト
http://kohki.hatenablog.jp/entry/Unity-uGUI-Fixed-Scroll-Rect
http://tsubakit1.hateblo.jp/entry/2014/12/18/040252
http://albatrus.com/main/unity/7506
http://qiita.com/imatomi/items/61db31536a9f08a67440

スライダーとスクロールバーの表現の参考サイト
http://photoshopvip.net/archives/28161
http://itchyny.hatenablog.com/entry/20121004/1349357817
http://jp.freepik.com/free-photos-vectors/loading-bar

アニメーション表現の参考サイト
http://qiita.com/2dgames_jp/items/31435fcef08dcd04c499
http://tsubakit1.hateblo.jp/entry/2015/02/08/135350
http://kohki.hatenablog.jp/entry/Unity-uGUI-Fixed-Scroll-Rect
http://anz-note.tumblr.com/post/123203725736/unityscrollrectのスクロール位置を制御
 http://tsubakit1.hateblo.jp/entry/2015/02/15/200000

今後の課題

Scroll Rectのスクロールオプションがよくわからなかった。
ライフゲージのアニメーションやライフゲージをキャラクタに追従させる方法は思いついたら別の記事に書く予定
ゲームなどでよくある循環する無限スクロール、所持アイテムによって表示される数が変わるリストビュー、リストビューを絞り込んで表示などは別の記事で書く予定