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