見出し画像

Unity UI入門⑦ | Sliderの使い方｜値の表示とつまみ操作の基本

ファイブボックス

前回はボタンの使い方について解説を行いました。

UnityのUIには、数値をバーの長さやつまみの位置で表せる「Slider」というパーツがあります。

Sliderは、次のような場面でよく使われます。

・キャラクターのHP
・経験値ゲージ
・制限時間
・音量調整
・画面の明るさ調整
・ゲーム設定の数値変更

Sliderには、スクリプトから値を変更してゲージとして使う方法と、ユーザーがつまみを動かして値を変更する方法があります。

今回は、Sliderを構成するオブジェクトや、Sliderコンポーネントの主なプロパティを確認します。

後半では、次の2つのサンプルを作成します。

・スクリプトからSliderの値を変更する
・つまみを操作してSliderの値を変更する


1．Sliderとは

Sliderは、一定の範囲内にある数値を、バーの長さやつまみの位置で表すUIです。
たとえば、Sliderを次のように設定したとします。

Min Value：0
Max Value：1
Value：0.5

この場合、Sliderが扱う値の範囲は 0 から 1 です。
現在の値は 0.5 なので、バーはおよそ半分まで表示されます。

Sliderには、大きく分けて2つの使い方があります。

スクリプトから値を変更する

キャラクターのHPや経験値などを表示する場合は、ゲームの状態に合わせて、スクリプトからSliderの値を変更します。

たとえば、HPが 100 から 80 に減った場合はSliderの値も 80、値の範囲を0 から 1 の範囲に指定した場合は、0.8 に変更します。この場合、Sliderはユーザーが操作するものではなく、現在の状態を表示するために使います。

ユーザーがつまみを操作する

音量や画面の明るさを調整する場合は、ユーザーがSliderのつまみを動かして値を変更します。

つまみが動くとSliderの値が変化し、その値を音量や明るさの設定に利用できます。

同じSliderでも、目的によって設定や使い方が異なります。

2．Sliderを作成する

Hierarchyウィンドウ内で右クリックし、次の順番に選択します。

「UI → Slider」

Canvasがまだ作成されていない場合は、Sliderと一緒にCanvasやEventSystemも作成されます。
SliderはCanvasの中に配置されるUIです。

作成したSliderを選択すると、InspectorウィンドウにSliderコンポーネントが表示されます。

まずは、SliderコンポーネントのValueを動かしてみましょう。
Valueを変更すると、バーの長さやつまみの位置が変化します。

3．Sliderを構成するオブジェクト

作成したSliderをHierarchyウィンドウで展開すると、複数の子オブジェクトが配置されています。

主な構成は次のとおりです。

それぞれの役割を確認します。

Slider

Slider全体を管理する親オブジェクトです。
Sliderコンポーネントが付いており、現在値や最小値、最大値、つまみの操作などを管理します。

Background

Sliderの背景部分です。
値が入っていない部分や、ゲージ全体の土台として表示されます。
Background には Imageコンポーネントが付いているため、Color から色や透明度を変更できます。

Fill Area

Fillを表示する範囲を管理するオブジェクトです。
Fill Area自体は、基本的に画像として表示されません。
子オブジェクトであるFillの位置や大きさを管理するために使われます。

Fill

Sliderの現在値を表す部分です。
Valueが大きくなるとFillが長くなり、Valueが小さくなると短くなります。
HPゲージであれば、現在残っているHPを表す部分です。
FillにもImageコンポーネントが付いているため、色や画像を変更できます。

Handle Slide Area

Handleが移動できる範囲を管理するオブジェクトです。
ユーザーがつまみを操作する場合、Handle は Handle Slide Area の範囲内を移動します。

Handle

ユーザーがドラッグして動かすつまみ部分です。
音量調整など、ユーザーがSliderを操作する場合に使用します。
一方、HPゲージのように表示だけを行う場合は、Handleを非表示、または削除することもあります。

4．Sliderコンポーネントのプロパティ

Slider本体を選択すると、InspectorウィンドウにSliderコンポーネントが表示されます。
ここでは、主なプロパティを確認します。

Interactable

ユーザーがSliderを操作できるかを設定します。
オンの場合は、マウスやタッチ操作でつまみを動かせます。
オフの場合は、ユーザーからの操作を受け付けません。

音量調整などではオンにします。
HPゲージのように、スクリプトから値を変更するだけの場合は、オフにしておくと安心です。

Transition

Sliderが選択されたときや、押されたときの見た目の変化を設定します。
初期状態ではColor Tintが設定されています。

Color Tintでは、通常時、選択時、押下時、無効時などの色を指定できます。
前の記事でまとめた「Button」のTransition とほぼ同じなので、詳しくはこちらをご参照ください。

今回の記事では、初期設定のまま使用します。

Fill Rect

現在値を表すFillオブジェクトを指定します。
通常は、子オブジェクトのFillが設定されています。
Valueが変化すると、Fill Rectに設定されたオブジェクトの大きさも自動的に変化します。

Handle Rect

つまみとして使用するHandleオブジェクトを指定します。
通常は、子オブジェクトのHandleが設定されています。

HPゲージなど、つまみを使用しない場合は、Handleオブジェクトを非表示にするか、Handle RectをNoneにする方法があります。

Direction

値が増えたときに、FillやHandleが動く方向を設定します。
Directionには、次の4種類があります。

・Left To Right

値が増えると、左から右へバーが伸びます。
横向きのHPゲージや音量調整でよく使われます。

・Right To Left

値が増えると、右から左へバーが伸びます。

・Bottom To Top

値が増えると、下から上へバーが伸びます。
縦向きのゲージを作る場合に使えます。

・Top To Bottom

値が増えると、上から下へバーが伸びます。

Min Value／Max Value

Min Value は Sliderで扱う最小値を設定します。
たとえば、0から100までの値を扱う場合は、Min Valueを0にします。

一方 Max Value は、Sliderで扱う最大値を設定します。
0から100までの値を扱う場合は、Max Valueを100にします。

Whole Numbers

Sliderの値を整数だけにするかを設定します。
アイテムの個数やレベルなど、整数だけを扱いたい場合に便利です。

Value

Sliderの現在値です。
Valueは、Min ValueからMax Valueまでの範囲で設定します。
たとえば、次の設定ではバーが半分程度まで表示されます。

Value は Inspectorウィンドウから変更するだけでなく、スクリプトから変更することもできます。

On Value Changed

Sliderの値が変化したときに実行する処理を設定します。

ButtonのOn Clickは、ボタンがクリックされたときに呼び出されます。
一方、Sliderの On Value Changed は、Slider の値が変わるたびに呼び出されます。

On Value Changedでは、Sliderの現在値をfloat型で受け取ることができます。

5．サンプル1：スクリプトから値を変化させる

最初のサンプルでは、キャラクターの頭の上に配置したSliderの値を、Spaceキーを押すたびに10ずつ減らします。

Sliderを準備する

用意したキャラクターのオブジェクトの上で右クリック
Create → UI → Slider を選択し、上の図のようにスライダーを配置します。生成された各オブジェクトを以下のように指定します。

■ Canvas

  • Canvasコンポーネント

    • RenderMode を World Space

    • Event Camera を Main Camera 

  • Rect Transformコンポーネント

    • PosX、PosY をともに 0 でリセット

    • Scale をリンクさせてすべて 0.01倍

■ Slider

  • Rect Transformコンポーネント

    • 座標：キャラクターの頭上に配置（サンプルでは PosX 0、PosY 250）

    • Width：160、Height：50 

  • Sliderコンポーネント

    • Interactable：オフ（つまみ操作無効）

    • Min Value：0

    • Max Value：100

    • Whole Numbers：オン

■ BackGround

そのまま使用します

■ Fill Area

  • Rect Transformコンポーネント

    • Left 0、Right 0　 満タンエリアの両サイドの余白をなくします

■ Fill

  • Image コンポーネント

    • Color：任意の満タンエリアの色を指定

■Handle Slide Area

使用しないので削除、もしくはチェックを外して非表示

スクリプトを作成する

Projectウィンドウで新しいスクリプトを作成し、名前を「HpSliderController」とします。

スクリプトを開き、次のように記述します。

using UnityEngine;
using UnityEngine.UI;

public class HpSliderController : MonoBehaviour
{
    [SerializeField] Slider hpSlider; // HPスライダー

    void Start()
    {
        hpSlider.value = 100;   // 初期値を100に設定
    }

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Space))    // スペースキーを押したら
        {
            hpSlider.value -= 10;   // HPを10減らす 
        }
    }
}

スクリプトの内容

まず、Sliderをスクリプトから扱うため、次の記述を追加しています。

using UnityEngine.UI;

SliderをInspectorから設定する

作成したスクリプトを、任意のGameObject にアタッチします。
サンプルでは「Char」にアタッチしています。

InspectorウィンドウにHp Sliderの項目が表示されるので、HierarchyウィンドウのSliderをドラッグして設定します。

ゲームを実行し、Spaceキーを押してみましょう。
キーを押すたびに、SliderのValueが10ずつ減り、Fillが短くなります。

値の範囲について

SliderのValueは、Min ValueからMax Valueまでの範囲内に制限されます。
今回のSliderはMin Valueが0なので、Spaceキーを何度押しても、Sliderの値は0より小さくなりません。

HPの数値を別の変数で管理する場合は、Mathf.Clampを使って範囲を制限する方法もあります。

currentHp = Mathf.Clamp(currentHp, 0, maxHp);

これにより、現在HPを0から最大HPの範囲内に収められます。

6．サンプル2：つまみ操作で値を変化させる

次のサンプルでは、ユーザーがSliderのHandleを動かし、現在値をTextMeshProのテキストに表示します。

音量調整や明るさ調整に近い使い方です。

Sliderを設定する

ヒエラルキー上で UI → Slider から Slider を作成し、Inspectorで以下のように設定します。

Sliderコンポーネント

  • Interactable：オン（つまみ操作有効）

  • Min Value：0

  • Max Value：100

  • Whole Numbers：オン

今回はユーザーがつまみを操作するため、Interactableをオンにします。

TextMeshProを作成する

Hierarchyウィンドウ内で右クリックし、
UI → Text - TextMeshPro
で TextMeshPro を配置します。

作成したテキストを、Sliderの近くに配置します。

スクリプトを作成する

新しいスクリプトを作成し、名前を「VolumeSliderController」とします。

次のように記述します。

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class VolumeSliderController : MonoBehaviour
{
    [SerializeField] Slider volumeSlider;   // 音量スライダー
    [SerializeField] TextMeshProUGUI valueText;   // 値テキスト

    void Start()
    {      
        ChangeValue();   // 音量スライダーの値をChangeValueメソッドに渡す
    }

    public void ChangeValue()
    {
        // 値テキストに音量スライダーの値を表示する
        valueText.text =  volumeSlider.value.ToString("F0");   
    }
}

スクリプトの内容

Slider、TextMeshProを扱うため、次の記述を追加しています。

using UnityEngine.UI;
using TMPro;

SliderとTextMeshProを設定するための変数を作成します。

[SerializeField] Slider volumeSlider;   // 音量スライダー
[SerializeField] TextMeshProUGUI valueText;   // 値テキスト

ChangeValue()関数は、Sliderコンポーネントの OnValueChanged にセットします。

public void ChangeValue()
{
    // 値テキストに音量スライダーの値を表示する
    valueText.text =  volumeSlider.value.ToString("F0");   
}

つまみを動かして変化した値ををTextMeshProに表示します。
ToString("F0")を使うと、小数点以下を表示せず、整数として表示できます。

Startメソッド内では、最初から現在値を表示するため、ChangeValueメソッドを一度呼び出しています。

ChangeValue();

この処理がない場合、ユーザーがSliderを操作するまで、テキストが更新されません。

Inspectorからオブジェクトを設定する

作成したスクリプトを、空のGameObject などに追加します。サンプルではCanvasにアタッチしました。

以下の手順でSliderコンポーネント の On Value Changed に作成した関数をセットします。

  1. プラスボタンを押してイベントを追加

  2. 左下にスクリプトファイルをもったCanvasをセット

  3. 右上にVolumeSliderControllerクラスの ChangeValue()関数をセット

続いて、VolumeSliderController がついているCanvas の Inspectorウィンドウで、次のように設定します。

Volume Slider：作成したSlider
Value Text：作成したTextMeshPro

ゲームを実行して、SliderのHandleを左右に動かしてみましょう。

つまみの位置に合わせてSliderのValueが変化し、その値がTextMeshProに表示されます。

音量変更に応用する

受け取ったSliderの値は、実際の音量変更にも利用できます。

たとえば、Sliderの値を0から1に設定しておけば、AudioSourceのvolumeにそのまま代入できます。

private void ChangeValue(float value)
{
    audioSource.volume = value;
}

AudioSourceのvolumeは、0から1の範囲で指定します。

0：無音
1：最大音量

そのため、音量用のSliderは次のように設定すると扱いやすくなります。

Min Value：0
Max Value：1
Value：0.5
Whole Numbers：オフ

7．よくあるトラブル

Valueを変えてもFillが動かない

SliderコンポーネントのFill Rectを確認します。

Fill Rectに、子オブジェクトのFillが設定されている必要があります。
Fill RectがNoneになっていると、Valueを変更してもバーの長さが変化しません。
Fillオブジェクトが非表示になっていないか、Imageコンポーネントの透明度が0になっていないかも確認しましょう。

Handleを操作できない

まず、SliderコンポーネントのInteractableを確認します。
Interactableがオフの場合、ユーザーはHandleを操作できません。

また、Handle Rectに正しいHandleが設定されているか確認します。
Handle Slide AreaのRect Transformが小さすぎる場合も、Handleがほとんど動かないことがあります。

HPゲージをユーザーが操作できてしまう

HPゲージのように表示だけを行う場合は、Interactableをオフにします。
必要に応じて、Handleオブジェクトも非表示にします。
これにより、ユーザーから操作されないゲージとして使用できます。

Sliderの値が想定どおりにならない

Min Value、Max Value、Valueの関係を確認します。
たとえば、次のような設定ではValueに100を指定しても、最大値の10までしか入りません。

Min Value：0
Max Value：10
Value：100

SliderのValueは、Min ValueからMax Valueまでの範囲内に制限されます。

On Value Changedが何度も実行される

On Value Changedは、Sliderの値が変化するたびに呼び出されます。
Handleをドラッグしている間は、値が少し変わるたびに何度も処理が実行されます。

そのため、ファイルの読み込みや複雑な計算など、負荷の高い処理を直接実行すると、動作が重くなることがあります。

On Value Changedでは、表示の更新や音量の変更など、比較的軽い処理を実行するのが基本です。

8．今回のまとめ

今回は、UnityのUIパーツの1つであるSliderについて確認しました。
Sliderは、数値をバーの長さやつまみの位置で表せるUIです。

Sliderは、ゲームの状態を表示する場合にも、ユーザーに数値を選択してもらう場合にも使える便利なUIです。

まずはValueをInspectorウィンドウから動かし、FillとHandleがどのように変化するか確認してみましょう。

その後、スクリプトからValueを変更する方法と、On Value Changedで値を受け取る方法を試すと、Sliderの仕組みを理解しやすくなります。

▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

いいなと思ったら応援しよう！

ファイブボックス よろしければ応援お願いします！ いただいたチップはクリエイターとしての活動費に使わせていただきます！