この記事で解決すること
- スライダーはどうやって使うのか？
- スクリプトからスライダーの値を取得する方法
- スライダーの色の変更方法
- HPバーの作成方法
スライダーとは、ユーザーがドラッグして、値を直感的に調整できるUI（ユーザーインターフェース）です。
本記事では、Unityでスライダーを作成・設定し、操作するための基本的な方法から、スクリプトを使った制御方法まで、詳しく解説します。HPゲージの実用的な例も交えながら、スライダーの活用方法を学びましょう。
スライダーは、画面の明るさ設定や音量設定などに使われるよ！
Unityでスライダーを準備する方法
スライダーを準備するには、まずCanvasを作成し、その中にスライダーオブジェクトを追加します。Hierarchyビューで「UI」 > 「Slider」を選択し、スライダーの位置やサイズを調整します。
Canvasとスライダーが現れます。
次に、インスペクターでスライダーの設定を行い、最小値（Min Value）や最大値（Max Value）などを設定します。
スライダーの中身
スライダーの中身は3つあります。
- Background
- Fill Area
- Handle Slide Area
それぞれの部分を色分けすると以下のようになります。
デフォルトでは右に行くほど値が大きくなりますが、スライダーのインスペクターから逆に変更することも可能です。
インスペクターのValueを動かすとスライダーを実際に動かせるから試してみよう！
スライダーの色を変更しよう
スライダーの各部の色を変更する方法です。
Background、Fill、Handleの変更したい部分を選択し、インスペクターのImageコンポーネントのColorから自由に色を設定できます。
Backgroundを変更してみるとこのようになります。
値の取得方法
スライダーコンポーネントを取得し、.valueで現在の値を取得することができます。
初めにusing UnityEngine.UI; をつけるのを忘れないようにしましょう。
using UnityEngine;
using UnityEngine.UI; // これをつけるのを忘れない！
public class Example : MonoBehaviour
{
void Start()
{
// Sliderコンポーネントを取得します
Slider slider = GetComponent<Slider>();
// slider.value でスライダーの値を取得できます
Debug.Log("スライダーの値は" + slider.value) ;
}
}このスクリプトをスライダーにアタッチしてゲームを開始すると、無事Consoleに表示されました！
これをUpdate関数の中に入れることで、リアルタイムに表示することができます。
スライダーをスクリプトから操作する方法
スライダーをスクリプトから動かすには、スライダーコンポーネントのvalueプロパティを変更します。以下のコードでは、スライダーの値を特定の値に設定する例を示します。
using UnityEngine;
using UnityEngine.UI;
public class sliderController : MonoBehaviour
{
public Slider slider;
void Start()
{
slider.value = 0.5f; // スライダーの値を0.5に設定
}
}スライダーの値をスクリプトから動的に変更するには、以下の関数を作っておくと便利です。
public void SetSliderValue(float newValue)
{
Slider.value = newValue;
}HPゲージをスライダーで表現してみよう
HPゲージをスライダーを使用して表現する方法
HPゲージをスライダーで表現するには、スライダーのMax Valueをキャラクターの最大HPに設定し、Current Valueを現在のHPに設定します。例えば、キャラクターのHPが100のとき、スライダーの値を50に設定することで半分のHPを表現します。
HPの値をスライダーで可視化するには、ゲーム内でHPが変動するたびにスライダーの値を更新します。以下のスクリプトは、ダメージを受けた際にスライダーの値を減少させる例です。
public void TakeDamage(float damage)
{
currentHP -= damage;
slider.value = currentHP;
}HPゲージのスライダーを使った表現方法
スライダーの色やアニメーションを使って視覚的にHPの状態を表示します。例えば、HPが少なくなるとスライダーの色を赤く変えることで緊迫感を演出できます。
以下は、HPゲージが残り25％以下になったら赤色にする例です。
void Update()
{
if (currentHP <= slider.maxValue * 0.25f)
{
slider.fillRect.GetComponent<Image>().color = Color.red;
}
}Handleを非表示にする方法
スライダーのつまみの部分はHPバーには不要なので非表示にします。
Handleのインスペクターにある、Imageコンポーネントのチェックを外して非アクティブにすると非表示にできます。
HPバーが右端まで行くようにする
Handleを非表示にできましたが、これだけだと一番右端にもっていっても右端までいきません。これは、Handleがあった時のなごりです。
ヒエラルキーからFill Areaをクリックして、領域を広げます。
スライダーをいじれないようにする
HPバーは表示のためだけに使われて、ユーザーが操作する必要がないので、いじれないようにします。
SliderコンポーネントのInteractableのチェックを外しましょう。
おわりに
スライダーを効果的に利用するためのさまざまな方法を詳しく解説しました。スライダーの基本的な設定方法から、スクリプトを使った操作、HPゲージといった具体的な応用例までをカバーしました。スライダーを使いこなすことで、ユーザーインターフェースの操作性や見た目を大幅に向上させることができます。これらの知識を活用し、より直感的で魅力的なUIを実現してください。
スライダーの見栄えを改善したいときは、こちらの記事がおすすめです！
