UnityUnityメモ

Unity入門:スライダーを使ったHPバーの作り方

Unity

はじめに

Unityでゲームを作ってみたいけど、どうやってプレイヤーのHPを表示すればいいのか悩んでいませんか?HPバーは、プレイヤーの体力を見える化する重要なUI要素の一つです。これがあると、ゲームのプレイ感がぐっと良くなります!

でも、「UIって難しそう…」と思っている方も安心してください!今回の記事では、Unity初心者でも簡単にできる スライダーを使ったHPバーの作り方 をわかりやすく解説します。

この記事を読み終えれば、HPバーの設置だけでなく、カスタマイズ方法やスクリプトを使った動かし方までバッチリわかります。さあ、楽しくUnityのスキルを磨いていきましょう!

Unityを使ったことがないという方はコチラの記事から見てみてください!

1. スライダーを設置してHPバーを作成する手順

それでは、実際にUnityでHPバーを作っていきましょう!スライダーを使えば簡単に作れます。以下の手順に沿って進めてみてくださいね。


① スライダーを設置する

  1. Hierarchyウィンドウを右クリックします。
  2. UI」→「Slider」を選択すると、スライダーが画面に追加されます。
  3. Sceneビューでスライダーが確認できるので、好きな位置に配置してください。
  4. サイズを調整したい場合は、RectTransformの「Scale」を変更します。

② 不要な部品を削除する

スライダーを設置すると、子オブジェクトとして「Handle Slide Area」が付いてきます。この部分はバーをスライドさせるためのつまみですが、HPバーでは不要です。

  1. HierarchyウィンドウでHandle Slide Areaを選択します。
  2. 右クリックして「Delete」を選択し、削除しましょう。

このままだとvalueを最大まで動かしても消去したHandle Slide Area分のスペースがあいてしまうので調整します。


③ スライダーの調整

  1. ヒエラルキーの「Slider」を選択しインスペクターからValueプロパティを調整して、スライダーの初期値や範囲を設定します。
    • HPバーの場合、最大値はプレイヤーの最大HPに合わせましょう。
    • Whole Numbersにチェックを入れると、スライダーの値が整数で動くようになります。
  2. スライダーの余分なスペースをなくします。
    • ヒエラルキーの「Fill Area」を選択しインスペクターから「Left」「Right」をすべて「0」に設定してください。
    • ヒエラルキーの「Fill Area」の子オブジェクトの「Fill」を選択して「Width」を「0」にしてください

④ 見た目を確認する

以上の設定が終わったら、Sceneビューでスライダーがどのように見えるか確認してみましょう。この時点で、シンプルなHPバーが完成しているはずです!




2. 色や形状のカスタマイズ

基本のHPバーが完成したら、次は見た目をカスタマイズしてみましょう!背景色やバーの色を変更するだけでも、ゲームの雰囲気に合ったデザインに仕上げられます。ここでは、色や形状の変更方法をわかりやすく解説します。


① バーの色を変更する

スライダーの背景色とバーの色を変えると、HPバーの雰囲気がぐっと良くなります。

  1. Hierarchyウィンドウでスライダーを選択します。
  2. Inspectorウィンドウで以下の設定を調整します:
    • Background:スライダーの背景部分です。好みの色に変更します。
    • Fill:スライダーの中身(HPを表す部分)です。例えば、HPが減るとわかりやすいように「緑」や「赤」に設定すると良いでしょう。
  3. 色を変えたら、Sceneビューでどのように見えるか確認してみてください。

② 角丸から四角形のバーに変更する

デフォルトでは、スライダーは角が丸いデザインになっています。もっとシンプルな四角形デザインに変更したい場合は、以下の手順を試してください。

  1. InspectorウィンドウでFillの「Source Image」を「None」に設定します。
  2. Backgroundの「Source Image」も同様に「None」に変更します。
    • これで四角形のバーに変更できます。

③ バーのサイズと形状を調整する

バー全体のサイズや形をさらにカスタマイズしたい場合は、以下を調整してください。

  • RectTransformを使って幅や高さを変更できます。
  • **Anchor(アンカー)**を設定することで、画面のどこに配置するか細かく調整可能です。

カスタマイズのポイント

  • ゲームのテーマに合わせた色選びをしましょう。例えば、ファンタジー系なら柔らかなパステルカラー、SF系ならメタリックカラーやネオンカラーがオススメです。
  • 自分でデザインをカスタマイズするのが難しい場合、Unity Asset Storeで簡単にデザインをアップグレードするのも良い選択です!

例えば、以下のアセットを利用すれば、デザインの幅が大きく広がります:


  1. Health and Progress Bar Pro: Mana, Stamina, Energy
    → シンプルでプロフェッショナルなデザインが多数含まれており、さまざまな用途に使えます。
  2. Procedural Health and Progress Bar Bundle
    → カスタマイズ可能なプロシージャルバーで、自分好みのデザインを自由に作成可能です。クオリティを重視したい方にピッタリ!
  3. Ultimate Health Bar Collection
    → 豊富なアイコンとともに、HPバーのデザインを劇的に向上させることができます。カジュアルゲームに特にオススメ!

これらのアセットを使うと、プロ並みのHPバーをすぐにゲームに取り入れることができます。デザインに自信がなくても、簡単に美しいUIを実現できますので、ぜひチェックしてみてください!


HPバーのカスタマイズをしながら、自分のゲームのイメージにピッタリなデザインを追求してみましょう!のHPバーを実際に動かすスクリプトの作成方法を解説します。




3. HPバーを動作させるスクリプト

HPバーを見た目だけでなく、実際に動作するようにするには、スクリプトを使ってプレイヤーの体力(HP)を管理し、スライダーに反映させる必要があります。ここでは、初心者にもわかりやすくスクリプトの作成方法と動作の仕組みを解説します!


① スクリプトを作成する

  1. プロジェクトウィンドウを右クリックして、「Create」→「C# Script」を選択します。
  2. スクリプトに名前を付けましょう(例: PlayerHealth)。
  3. 作成したスクリプトをダブルクリックして開きます。

② HPバー制御用のスクリプトを書く

以下のコードをスクリプトに入力してみてください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // UI操作に必要

public class PlayerHealth : MonoBehaviour
{
    // プレイヤーの最大HPと現在のHP
    public int maxHp = 10;
    private int currentHp;

    // スライダーの参照
    public Slider hpSlider;

    void Start()
    {
        // 初期設定
        currentHp = maxHp; // HPを最大値に設定
        hpSlider.maxValue = maxHp; // スライダーの最大値を設定
        hpSlider.value = currentHp; // 現在のHPを反映
    }

    public void TakeDamage(int damage)
    {
        // HPを減らす処理
        currentHp -= damage;
        if (currentHp < 0) currentHp = 0;

        // スライダーに現在のHPを反映
        hpSlider.value = currentHp;

        // HPが0になったときの処理
        if (currentHp == 0)
        {
            Debug.Log("ゲームオーバー!");
            // ここにゲームオーバーの処理を追加
        }
    }
}

③ スクリプトをオブジェクトにアタッチする

  1. プレイヤーキャラクターのオブジェクト(例: Player)を選択します。
  2. 作成したスクリプト(PlayerHealth)をドラッグ&ドロップして、オブジェクトにアタッチします。

④ スライダーをスクリプトに設定する

  1. スクリプトをアタッチしたオブジェクトを選択します。
  2. Inspectorウィンドウで、HpSliderの項目にHPバーのスライダーオブジェクトをドラッグ&ドロップします。

⑤ ダメージ処理をテストする

例えば以下のようにPlayerHealthスクリプトに書き足して、ダメージを受けたときの動作をテストしてみましょう。

void OnTriggerEnter(Collider other)
{
    if (other.gameObject.tag == "Enemy") // 敵と接触した場合
    {
        TakeDamage(1); // HPを1減らす
    }
}

敵キャラクターには「Enemy」というタグを設定しておくのを忘れないようにしてください!


このスクリプトを使えば、HPバーがプレイヤーの体力と連動して減少するようになります。さらにアニメーションやエフェクトを追加して、ゲームにもっと迫力を持たせることも可能です。


まとめ

今回の記事では、UnityでHPバーを作成する方法を解説しました。スライダーを設置し、色や形状をカスタマイズし、スクリプトを使って動作させることで、初心者でも簡単に魅力的なHPバーを作ることができます。

さらにゲーム全体の完成度を高めたい方は、Unity Asset Storeを活用するのもおすすめです。特に以下のようなアセットを使えば、HPバーだけでなくゲーム全体のクオリティが一気に向上します。


おすすめのアセット

  • Corgi Engine – 2D + 2.5D Platformer
    完全なプラットフォーマーゲームのテンプレート。HPバーやUIの実装が既に含まれており、すぐに自分のゲームに取り入れられます。
  • Beat ‘Em Up Game Template 2D
    アクションゲームの基礎が詰まったテンプレート。HPバーの実装だけでなく、攻撃や防御のアニメーションと連動したUIが構築できます。

これらのアセットを使えば、HPバーだけではなく、より複雑なゲームシステム全体を効率よく構築できます。初めてのゲーム開発で時間を短縮したい方や、プロジェクトのクオリティをさらに引き上げたい方は、ぜひチェックしてみてください!


ゲーム開発は試行錯誤の連続ですが、アセットを活用することでその負担を軽減し、クリエイティブな部分に集中できます。ぜひ、この記事を参考に、あなたのゲームをより魅力的なものにしてくださいね!


よくある質問(FAQ)

Q
HPバーが正しく動作しない場合、どこを確認すればいいですか?
A

スクリプトが正しくオブジェクトにアタッチされているか、Sliderがインスペクターで設定されているかを確認してください。

Q
バーのデザインを変更するにはどうすればいいですか?
A

Sliderの背景色やフィルの色、Source Imageの設定を変更することでカスタマイズできます。

Q
他のUI要素と連携させたい場合はどうすればいいですか?
A

ボタンやテキストなどのUI要素を追加し、スクリプトで連動させると良いでしょう。