ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

20220329162023

Unity - UI:Slider の使い方 -

初めに

 HPバーを作るときや音量の設定などに使われる Slider についてまとめます。

Slider とは

 Unity 公式では、「マウスをドラッグすることによって、設定した範囲から数値を選択できる UI 」と説明されています。文章で Slider とは何かを説明することは難しいので、上の画像のようなものとしておきます。

docs.unity3d.com

Slider のコンポーネントの機能


Interactable, Transition, Navigation

 下の記事の中でまとめております。そちらをご覧ください。

fineworks-fine.hatenablog.com

Fill Rect, Handle Rect

Fill Rect Fill(Sliderを満たしていく部分)のオブジェクトを選択します。デフォルトでは子要素のFillが指定されます。
Handle Rect Handle(Sliderのつまみ部分)のオブジェクトを選択します。デフォルトでは子要素のHandleが指定されます。

Direction

 スライダーの方向を変更できます。

 X TO Y の形になっています。X に近づくほど最小値に近づき、Y に近づくほど最大値に近づきます。

Min Value, Max Value

 Min Value は Slider が取れる値の最小値、Max Value は Slider が取れる値の最大値を設定できます。

Whole Numbers

 true であれば(チェックをいれていれば)Slider の値が整数に制限されます。
 なお、Whole Numbers は通常は非負整数(0 または 正の整数)のことですが、Unity 上では負の整数もとることができます。

Value

 Slider の現在の数値を表します。Slider の Handle の位置に合わせて数値が変化します。

On Value Changed

 Sliderの状態が変わったときに呼び出す関数(メソッド)を設定できます。

Slider の色を変える

 Slider の子オブジェクト、孫オブジェクトである Background, Fill, Handle の色を変えれば変更できます。

 これらには、Image コンポーネントがついており、そちらから変更できます。

 Image の使い方については、下の記事をご覧ください。

fineworks-fine.hatenablog.com

スクリプトから設定する

 今回は HPバーを作ってみます。まず、スクリプトを用意します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  //SliderはUIのため追加

public class SliderScript : MonoBehaviour
{
    public GameObject SliderObject;
    Slider slider;

    public float MaxHp = 300f;  //最大値
    public float minHp = 0f;  //最小値
    private float currentHp;  //現在のHP

    void Start()
    {
      currentHp = MaxHp;  //現在の HP を最大値と等しくする
      //Sliderコンポーネントを取得する
      slider = SliderObject.GetComponent<Slider>();  
      //Sliderの最大値, 最小値を設定する
      slider.maxValue = MaxHp;
      slider.minValue = minHp;
    }

    void Update()
    {
      //Slider の値を現在のHPにする
      slider.value = currentHp;
    }
}

 スクリプトを Slider につけます。
 

 スクリプトの Slider Object に Slider をドラッグ&ドロップします。

 あとは、ダメージを受けたとき currentHp を減らす処理を作れば、HPバーが完成します。

最後に

 Slider についてまとめました。値の変化を表す方法の一つとして押さえておくとよいでしょう。