【Unity】スライダーで制限時間ゲージ、HPバー、音量調整

UnityでUIスライダーの使い方
当サイトで紹介する商品・サービス等の外部リンクは、アフィリエイト広告を含む場合があります。
スポンサーリンク

Unityを使ったゲームを開発にて、プレイヤーに情報を視覚的に伝えるためにさまざまなUI要素が必要になります。
例えば、RPGの場合は敵キャラのHPバー、その他にも、制限時間ゲージがゲームプレイの重要な要素です。

制限時間ゲージはプレイヤーに残り時間を視覚的に示して、HPバーはプレイヤー・敵の体力を表示します。
これらのUI要素を効果的に実装することで、ゲームのプレイヤー体験を向上させることができます。

本記事では、Unity標準搭載のUIスライダーを使って制限時間ゲージやHPバー、音量調節を実装する方法について紹介します。

本記事は次の人におすすめ
  • Unityのスライダーを使いたい。
  • 制限時間やHP、音量調整などのUIを表示したい。
スポンサーリンク

UIスライダー

UnityのUIスライダー

UIスライダー(Slider)は、グラフィカルなバー上のトリガーをスライドさせることで、数値を選択したり範囲を調整したりするためのUI要素です。
スライダーは、音量調整や明るさ設定などに利用されます。
さらに、スクリプトで制御すれば様々な用途に応用することができます。

Unity学習ができる教本

タイトル対象特徴
Unityの教科書 2023完全対応版入門・初心者プログラミング未経験でも、ゲーム制作したい人
マンガでわかる Unityゲーム開発入門入門・初心者Unityを挫折したけど、もう一度挑戦したい人
2Dゲームの作成をマンガで丁寧に解説
作って学べる Unity本格入門中級者~RPG、特に3Dゲームを作りながら学習したい人
Unity ソーシャルゲーム開発ガイド中・上級者ガチャ・ログインボーナスなどのソシャゲの機能を開発したい人

スライダー作成

Hierarchyウィンドウから「Create > UI > Slider」と選択してスライダーを作成します。

テキストやボタンなどを含めてUI要素は、Canvas下の子componentに配置されます。
さらに、Sliderを親とした子componentがあります。

スライダーのcomponent(コンポーネント)構成
Sliderの要素
  • Background:バーの背景
  • Fill Area>Fill:バーの上の背景
  • Handle Slide Area:スライダーのつまみ

制限時間ゲージを作成

スライダーで制限時間

スライダーを使った例ー1つ目は、制限時間ゲージです。
ユーザーはゲージに干渉しないで、時間経過によって色の割合が変化します。

Hierarchyウィンドウからスライダーを作成します。
制限時間では、ユーザーから干渉をされないように、「Handle Slide Area」は削除します。
つまみはなくなりましたが、ユーザーがゲージを動かせる状態なので、「Interactable」のチェックを除外します。

ソースコード

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class Timer : MonoBehaviour
{
    float limit = 3f;  // 制限時間
    float now = 0f; // 経過時間
    public TextMeshProUGUI time;    //現在の時間
    public Slider timerGauge;   //残り時間ゲージ

    void Start()
    {
        timerGauge.value = 1f;  //制限時間ゲージ
    }

    void Update()
    {
        // 時間制御
        now += Time.deltaTime; // タイマー
        Debug.Log(now);
        float t = now / limit; // スライダーの値ー正規化
        timerGauge.value = Mathf.Lerp(1f, 0f, t);
        float timeLimit = limit - now; // 残り時間
        timeLimit = Mathf.Max(timeLimit, 0f);
        string timeLog = timeLimit.ToString("F0");
        time.text = timeLog + "秒";
        time.color = (timeLimit > 1.5f) ? Color.green : Color.red; // 文字の色(1.5秒以上は緑、未満は赤)
    }
}

解説

  • 名前空間

「using UnityEngine」:Unityのクラスや機能を使用するために必要です。
「using UnityEngine.UI」:Sliderを使用するので、UIの有効に必要です。
「using TMPro」:TextMesh Proを使用するために必要です。

TextMesh Proの導入方法や日本語表示など詳しく紹介しています。
  • フィールド(メンバ変数)

「limit」 は制限時間を表します。デフォルトでは10秒です。
「now」 は現在の経過時間を保持します。
「time」 は、TextMeshProのテキスト要素を表し、残り時間を表示します。
「timerGauge」 は、Slider要素を表し、残り時間をゲージで表示します。

  • Startメソッド

制限時間ゲージの初期値を設定しています。

  • Updateメソッド

毎フレーム経過時間を更新し、ゲージの値を計算して更新します。
残り時間を計算し、それをテキストとして表示します。
最後に、残り時間が一定の閾値に応じて、表示するテキストの色を変更します。

実装例

ソースコードをHierarchyウィンドウにアタッチし、スライダーとテキストを添付します。

再生ボタンを押すと、時間をカウントし始めます。
制限時間のテキストが減少して、ゲージが緑から赤に変わります。

制限時間の実演

HPバーを作成

HPをスライダーで表現

スライダーを使った例ー2つ目は、HPバーです。
制限時間とは異なり、ユーザーがアクションを取ることで色の割合が変化します。

Hierarchyウィンドウからスライダーを作成します。
制限時間と同様に、ユーザーがつまみを操作しないように「Handle Slide Area」は削除します。
つまみはなくなりましたが、ユーザーがゲージを動かせる状態なので、「Interactable」にチェックを除外します。

ソースコード

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class HP : MonoBehaviour
{
    public Slider hpGauge;   //残りHPゲージ
    public TextMeshProUGUI hpText;  //残りHPを表示するテキスト
    float hpEnemy; // 敵HP

    void Start()
    {
        hpGauge.value = 1f; // HPゲージの初期値を設定
        hpEnemy = 30f; // 初期の敵HPを設定
        enemyPoint(); // HPテキストを更新
    }

    void Update()
    {
        // スペースキーが押されたかどうかを検出
        if (Input.GetKeyDown(KeyCode.Space))
        {
            float attack = Random.Range(0f, 10f); // 0から10までの攻撃
            hpEnemy -= attack;      // 敵のHPをランダムで減少させる
            Debug.Log("攻撃力:" + attack);
            Debug.Log("敵HP"+hpEnemy);
            hpGauge.value = hpEnemy / 30f;  // ゲージの値を更新
            hpEnemy = Mathf.Max(hpEnemy, 0f); // HPが0未満にならないように調整
            enemyPoint();   // HPテキストを更新
        }
    }

    void enemyPoint()
    {
        hpText.text = hpEnemy.ToString("F1");   // 敵HPをテキストとして表示
    }
}

思い通りのゲームが作れない

Unityでゲーム開発しているけど完成しない。
技術的な壁や知識不足が原因で、思い描いたゲームを実現するのは難しいです。

しかし、Udemyは動画で実践的なゲーム開発を解説していて、
購入した講座は再生・停止・スキップなどが可能なオンデマンド形式なので、
専門的な内容を自分のペースで学習できます。

Udemyの特徴
  • プロのエンジニアによる講習が受けられる
  • 自分のペースで学習を進められる
  • オンデマンド形式だから何度でも視聴可能
  • 不満足なコースは視聴していても返金可能返金ポリシー

Unityの機能を網羅したいや作りたいゲームがある人はUdemy学習を取り入れましょう。
数多くある講座の中から特におすすめな講座を3つ紹介します。

Unityのはじめの一歩としておすすめ。開発例に物理挙動やアニメーションを使用しているので、今後の開発が円滑になる。

トランプを題材にした講座。カードゲームやボードゲーム開発に応用可能

UnityエンジンのインストールやC#の文法に加えて、App StoreとGoogle Playにゲームをリリース方法を解説。

解説

  • フィールド(メンバ変数)

「hpGauge」は、現在の敵のHPをゲージで表示します。
「hpText」は、現在のHPを文字で表示します。
「hpEnemy」は、敵のHPを表します。

  • Startメソッド

HPゲージと敵HPを初期値に設定します。
HPテキスト更新の繰り返しを避けるため、enemyPointメソッドを用意します。

  • Updateメソッド

スペースキーが攻撃をするユーザーアクションです。

他にも、画面上をマウスで左クリックする制御もおすすめです。

スペースキーが入力されるとランダムで、0~10までの間で攻撃がされます。
敵HPは、アタックポイントをデクリメントして残りのHPを減少させます。
HPバーとテキストを更新しますが、HPの最小値は0で下回らないようにします。

範囲、配列などそれぞれのランダムの表現をまとめています。

実装例

同様に、ソースコードとそれぞれスライダー、テキストを添付します。

Speceキーによって敵のHPが減少します。
0になって攻撃してもそれよりも小さくなることはありません。

spaceキーを押すと、数字が減少

音量調整ハンドルを作成

音量調整

スライダーを使った例ー3つ目は、音量調整です。
ユーザーがつまみを操作することで音量の大きさを変化させます。

Hierarchyウィンドウからスライダーを作成します。
今回は、つまみは使用するので「Handle Slide Area」は削除しません

ソースコード

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;
using TMPro;

public class volume : MonoBehaviour
{
    private bool isBlack = true; //音量ゲージの表示・非表示
    public Slider volumeSlider; //音量ゲージ
    public AudioSource audioSource; //BGMの音量
    public GameObject volumeObject; //音量操作のゲームオブジェクト
    public TextMeshProUGUI volumenow;   //現在の音量
    public static float volumeSound;    //保持する音量の大きさ

    void Start()
    {
        audioSource.volume = 1f;    //音量の大きさ
        volumeSlider.value = audioSource.volume;    //スライダーと音量を同期
        volumeSlider.onValueChanged.AddListener(BGM);   // スライダーの値が変更した時の処理を登録
        volumeObject.SetActive(false);  //音量操作のゲームオブジェクト非表示
    }

    void Update()
    {
        volumeSound = audioSource.volume;   //音量の大きさ
        volumenow.text = audioSource.volume.ToString("F1"); //現在の音量を小数第1位で表示
    }

    //音量が0.5を超えると黒字。以下だと赤字。
    public void BGM(float value)
    {
        audioSource.volume = value;
        if (value > 0.5)
        {
            volumenow.color = Color.black;
        }
        else
        {
            volumenow.color = Color.red;
        }
    }

    //音量調整ゲージ
    public void adjuster()
    {
        if (isBlack == true)
        {
            isBlack = false;
            volumeObject.SetActive(true);
        }
        else
        {
            isBlack = true;
            volumeObject.SetActive(false);
        }
    }

    //シーン移動
    public void play()
    {
        SceneManager.LoadScene("Main");
    }
}

解説

  • フィールド(メンバ変数)

「isBlack」は、音量調節するオブジェクトの表示・非表示を扱います。
「volumeSlider」は、音量を調節するスライダーです。
「audioSource」は、BGMの音量を制御するために必要です。
「volumeObject」は、音量調節するオブジェクトです。
「volumenow」は、現在の音量をテキストに表示します。
「volumeSound」は、音量を数値として保持します。

Sceneを変えても、変数を保持する方法を紹介しています。
  • Startメソッド

音量を最大とし、スライダーとAudioSourceのVolumeを同期させます。
スライダーの値が変更した時の処理を登録します。
volumeObjectは、非表示にします。

  • Updateメソッド

音量の大きさは常に更新し続けます。
表示させる音量のテキストは、現在のボリュームを小数第1位です。

  • BGMメソッド

valueを引数として、AudioSourceに代入します。
valueは、0.5を閾値として超えると黒字、以下だと赤字にします。

  • adjusterメソッド

UIボタンを押すと、処理されるメソッドです。
isBlackがtrueであれば、ボリュームゲージを表示し、isBlackをfalseにします。
isBlackがfalseであれば、ボリュームゲージを非表示し、isBlackをtrueにします。

つまみを離したときに実行するには?

スライダーのつまみを離すと処理されるようにするには、「IPointerUpHandler」を使います。
スライダーのつまみを押すと処理されるようにするには、「IPointerDownHandler」を使います。
参考サイト:「EventSystems.IPointerUpHandler – Unity スクリプトリファレンス

using UnityEngine;
using UnityEngine.EventSystems;

public class Leave : MonoBehaviour, IPointerUpHandler, IPointerDownHandler
{
    public void OnPointerUp(PointerEventData eventData)
    {
        Debug.Log("Leaved handle");
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        Debug.Log("Pressed handle");
    }
}

実装例

同様に、ソースコードをアタッチして、各種ゲームオブジェクトを対応させます。

UIボタンを押して、音量ゲージを表示。
ハンドルで音量を操作した後、スタートボタンでSceneを移動します。

シーン遷移後、音量の数値は保持されています。

音量をゲージで操作、シーン遷移しても値を保持する

まとめ

UnityでUIスライダーの使い方を紹介しました。

プレイヤーに情報を視覚的に伝えるためにさまざまなUI要素が必要です。
スライダーは敵キャラのHPバー、制限時間ゲージ、音量調整に使用します。

この記事を書いた人

プロフィール

アリッシア

                 

大学4年間で何か胸を張れるスキルを身に着けたくて当サイト運営を始めました。
現在、大学院に進学するか就職するか迷いながら勉強しています。
詳しいプロフィールはこちら

Contact icon

contact

X icon

X

Instagram icon

Instagram

Note icon

Note

スポンサーリンク
Unity
フォローする
タイトルとURLをコピーしました