Unityの Slider（スライダー）は、プレイヤーが数値を調整できるUIコンポーネント です。
- 音量やBGMの調整バー
- パラメータ変更（明るさ、感度調整 など）
- HPやMPゲージのような進捗表示
しかし、「スクリプトでスライダーの値を取得したい」「バーの見た目を変更したい」「スライダーの動きに合わせてリアルタイムで処理を実行したい」など、実装方法が分かりにくいこともあります。
この記事では、Sliderの基本からスクリプト制御、カスタマイズ、よくあるエラーと解決策 まで詳しく解説します！
この記事で学べること
- UnityのSliderの基本的な使い方
- スクリプトで値を取得・変更する方法
- スライダーの値をリアルタイムで処理に反映する
- デザインのカスタマイズ（色・形の変更）
- よくあるエラーと解決策
UnityのSlider（スライダー）の使い方
Slider（スライダー）の構成と追加方法
① Hierarchy から追加
・ [Hierarchie] → [右クリック] → [UI] → [Slider] を選択
・ Sliderオブジェクトがシーンに追加される
② Sliderの構成要素
- Background（スライダーの背景）
- Fill Area（スライダーの進捗バー）
- Handle（つまみ部分）
※ この他にもDropdown、ScrollViewも参考にしてください。
Slider（スライダー）の設定（Inspector）
・ 「Min Value」、「Max Value」でスライダーの範囲を設定（例：0〜100）
・ 「Whole Numbers」にチェックを入れると整数のみ調整可能
・ 「Value」でスライダーの初期値を設定
スクリプトでSlider（スライダー）を制御
Slider（スライダー）の値を取得
スライダーの値はvalueを使って取得できる。
➡︎ プレイヤーがスライダーを動かしたときに値を取得可能
➡︎ ボタンを押したときに値を取得する場合に便利
using UnityEngine;
using UnityEngine.UI;
public class SliderExample : MonoBehaviour
{
public Slider mySlider;
private void Update()
{
GetSliderValue();
}
public void GetSliderValue()
{
float value = mySlider.value;
Debug.Log("スライダーの値: " + value);
}
}Slider（スライダー）の値を変更
スクリプトからvalueを変更すると、スライダーのつまみを動かせる。
➡︎ ゲーム開始時にデフォルト値を設定
➡︎ スクリプトで値を変更して進行状況を反映
mySlider.value = 50; // スライダーを50に設定Slider（スライダー）の値が変更されたときに処理を実行（onValueChanged）
onValueChanged.AddListener()を使うと、スライダーの値が変わったときにリアルタイムで処理を実行できる。
➡︎ スライダーを動かすたびに値をリアルタイム更新
➡︎ 音量調整や設定画面に便利
using UnityEngine;
using UnityEngine.UI;
public class SliderExample : MonoBehaviour
{
public Slider mySlider;
public Text valueText; // スライダーの値を表示するテキスト
void Start()
{
mySlider.onValueChanged.AddListener(UpdateText); // イベント登録
UpdateText(mySlider.value); // 初期値を表示
}
void UpdateText(float value)
{
valueText.text = "値: " + value.ToString("F1");
}
}
※ 音量調整（BGM・SE）については以下のサイトを参考にしてください。
Slider（スライダー）をHPゲージ・進行バーに応用
HPバー（Slider（スライダー）で進捗を表示）
Slider.valueを使えば、HPバーや経験値バーを作れる。
➡︎ ダメージを受けるとHPバーが減少
➡︎ Mathf.Clamp() を使って0以下にならないように制御
using UnityEngine;
using UnityEngine.UI;
public class SliderExample : MonoBehaviour
{
public Slider healthSlider; // スライダー UI の参照
private float maxHealth = 100; // 体力の最大値
private float currentHealth; // 現在の体力
void Start()
{
currentHealth = maxHealth; // ゲーム開始時に現在の体力を最大値に設定
healthSlider.maxValue = maxHealth; // スライダーの最大値を設定
healthSlider.value = currentHealth; // スライダーの初期値を現在の体力に設定
}
// ダメージを受けたときに体力を減少させるメソッド
public void TakeDamage(float damage)
{
currentHealth -= damage; // 指定されたダメージ分、体力を減少させる
currentHealth = Mathf.Clamp(currentHealth, 0, maxHealth); // 体力が 0 を下回らず、最大値を超えないように制限
healthSlider.value = currentHealth; // スライダー UI に反映
}
}
Slider（スライダー）のカスタマイズ
Slider（スライダー）の色を変更
スライダーの色はFill AreaのImage.colorを変更すると変更できる。
➡︎ スライダーの値によって色を赤→緑に変更（例：HPバー）
using UnityEngine;
using UnityEngine.UI;
public class SliderColorChanger : MonoBehaviour
{
public Slider mySlider;
public Image fillArea;
void Start()
{
mySlider.onValueChanged.AddListener(ChangeColor);
}
// スライダーの値に応じて色を変更するメソッド
void ChangeColor(float value)
{
fillArea.color = Color.Lerp(Color.red, Color.green, value / mySlider.maxValue); // 赤から緑へ補間しながら色を変化させる
}
}Slider（スライダー）の形状を変更
➡︎ カスタムデザインのスライダーを作れる
➡︎ 円形やゲージ風のスライダーも可能
- BackgroundのSource Imageを変更 → スライダーの背景画像を変更
- Fill AreaのImageを変更 → スライダーの進捗バーの形状を変更
- HandleのImageを変更 → つまみのデザインをカスタム
よくあるエラーと解決策
Slider（スライダー）の値が変わらない
・ mySlider.value = X;を実行しているか確認
・ InspectorのMin Value、Max Valueを適切に設定
Slider（スライダー）を動かしてもイベントが発火しない
・ Inspector の On Value Changed に関数をセット
・ スクリプトで onValueChanged.AddListener() を設定
mySlider.onValueChanged.AddListener(OnValueChanged);Slider（スライダー）のデフォルト値が適用されない
・ Start() 内で mySlider.value = X; を設定しているか確認
・ 値を設定した後に ForceUpdate() を実行する
mySlider.value = 50;
mySlider.ForceUpdate();まとめ
・ スライダーは数値を調整するUIコンポーネント
・ valueで値を取得・変更可能
・ onValueChanged.AddListener()を使えばリアルタイム更新
・ HPバーや音量調整バーとして活用できる
・ カスタマイズすれば色やデザインを自由に変更できる
