【Unity】Slider(スライダー)の使い方

シーンへの追加と構成の説明
主なパラメータ
スクリプトからスライダーの操作
応用例
- HPバーの作成

シーンへの追加と構成の説明

Hierarchyで右クリック⇒「UI」⇒「Slider」でスライダーをCanvasの子オブジェクトに追加できます。
ヒエラルキーで作成

スライダーは下の画像に示すようなゲームオブジェクトで構成されています。また、重要なゲームオブジェクトについての説明は表にまとめました。
Sliderの構成

名称	役割
Slider	親となるゲームオブジェクトここにアタッチされているSliderクラスを操作することで様々な値を変更できる。
Background	スライダーの背景色などを操作できる
Fill	fill部分の色の決定などができる
Handle	ハンドル(スライダーのつまみ)について

主なパラメータ

一覧

先ほど説明した「Slider」(ゲームオブジェクト)にはSliderクラスがアタッチされていると述べましたが、そのクラスのインスペクター上での表示を下図に示します。
変数などの説明

名称	役割
Interractable	ここにチェックが入っているとスライダーの値をタッチにより操作できる。
Direction	方向を決定する
Min Value & Max Value	スライダーの最小値と最大値。デフォルトではMin Valueが0、Max Valueが1。
Value	スライダーの現在の値。 Min Value～Max Valueの間の値をとる
On Value Changed	スライダー値が変更されたときに呼び出される処理。

Direction

スライダーの方向を決定します。下の表に示す4方向がありますがデフォルトでは「Left To Right」となっています。

名称	方向
Left To Right	左から右
Right To Left	右から左
Bottom To Top	下から上
Top To Bottom	上から下

それぞれの動作を確認した様子が下の動画です。
Direction動作確認

色の変更方法

先ほど紹介した「Fill」と「Background」のImageコンポーネントを変更することでスライダーの色を変更できます。
Fillを赤色に、Backgroundを黄緑色にして動かしたときの様子はこんな感じです。

色の変更

On Value Changed

まず、以下のスクリプト「SliderTest.cs」を用意します。
Func1はOn Value Changedに割り当てるための関数であり、引数のvalueにはスライダーの値が格納されます。

using UnityEngine;

public class SliderTest : MonoBehaviour
{
    public void Func1(float value)
    {
        Debug.Log(value);
    }
}

次にスライダークラスをインスペクター上で以下の様に設定を行います。
OnValueChanged用の設定

スライダーを操作するとコンソールウィンドウにその時の値が表示されます。
OnValueChangedによるログ表示

スクリプトからスライダーの操作

まず、次のスクリプト「SliderScript.cs」を用意します。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Events;

public class SliderScript : MonoBehaviour
{
    void Start()
    {
        //取得
        Slider slider = GetComponent<Slider>();

        //最小値=0, 最大値=20とする
        slider.minValue = 0;
        slider.maxValue = 20;

        //現在の値の取得
        float v = slider.value;//今回は取得しただけで使用はしていない

        //Directionを「Right To Left」にする
        slider.direction = Slider.Direction.RightToLeft;

        //onValueChangeの設定
        UnityAction<float> action = (float value) =>
        {
            Debug.Log(value);
        };
        slider.onValueChanged.AddListener(action);   
    }
}