こんにちは、ともくんのゲーム作り部屋にようこそ！
このページでは、
「UnityでHPゲージの作り方を知りたい！」
「どうやってゲージを変動する処理を作ればいいの？」
というお悩みの方に向けた内容となっています。
ゲームの中で、HPなどの値をゲージで表示させて、ダメージを受けるとそのゲージを減らすような処理を作ることがあると思います。
Unityでは、このHPなどのゲージをFill機能を使って作るのが、非常に便利で簡単です。
Fill機能は、Fill Amountの値に合わせて画像を切り取る機能のことで、HPゲージの値によって画像を切り取ることで、ゲージを変動させるように見せることができます。
そこで、このページでは、Unityでゲームを製作していく際に、Fill機能を使ったHPゲージの使い方をまとめていきます。
Fill Amountを使ったHPゲージの作り方
それでは早速、Fill機能を使ってHPゲージを作っていきます。
なお、ここでは以下のようなシンプルなHPゲージを作成します。
スクリプトでHPを減少させる処理を作る
まず、スクリプトを使ってHPを減少させるという処理を作っていきます。
ここでは、プレイヤーとなるオブジェクト(player)を配置して、そのオブジェクトにスクリプト(PlayerController.cs)をアタッチしておきます。
using UnityEngine;
public class PlayerController : MonoBehaviour
{
public int hp = 100; // HPの変数を宣言
void Update()
{
// スペースキーを押した場合の処理
if (Input.GetKeyDown(KeyCode.Space) && hp > 0)
{
hp -= 10; // HPを10減少する
Debug.Log("HPは" + hp + "です"); // コンソールウィンドウにHPを表示する
}
}
}スクリプト内の5行目で、HPを管理する変数hpを宣言し、「100」の数値を代入しています。
なお、この変数は後ほど他のスクリプトから取得することになるので、public修飾子を付けています。
また、ダメージを与える処理の代わりに、スペースキーを一度押したらHPの値が「10」減少するように、10行目でif文を使って処理を書いています。
ちゃんとHPが減っているかどうかを念のため確認できるように、13行目でコンソールウィンドウに表示させる処理を書いているので、
上記のようにスペースキーを押したら、HPが変動しているのが分かるようになっています。
これで、HPの値を減らす処理を作ることができました。
HPゲージの画像をUIで配置する
次に、実際にHPゲージとなる画像をゲーム内に配置していきます。
今回は、上記のようなHPゲージの枠となる画像(hpgauge_frame)と、HPゲージの画像(hpgauge)の2つを準備しています。
HPゲージは、ゲームとしてのオブジェクトではなく、UIとしてのオブジェクトになるので、ヒエラルキーウィンドウの+ボタンから「UI」の中にある「Image」をクリックします。
Canvasの中に作成されたImageを選択して、インスペクターウィンドウのSource Imageから、先ほどのHPゲージの枠となる画像を選択します。
もう一度、同じ作業を行ってもう一つのHPゲージの画像を追加しておきます。
そして、このHPゲージの画像は、「hpgauge_frame」の子オブジェクトにしておきます。
また、HPゲージを左下に表示させるようにしたいので、UI要素の位置を決めるRectTransformコンポーネントでアンカーポイントを左下に設定して配置してみました。
これで、HPゲージの画像をUIとして配置することができました。
Fill機能の設定を加える
HPゲージが、値によって変動できるようにFill機能の設定を加えていきましょう。
Fill機能は、冒頭でも解説した通りで、画像をFill Amountの値に合わせて切り取ることができる機能で、今回はhpgaugeの画像に対してこのFill機能で切り取って表示させるようにしていきます。
まず、hpgaugeの画像を選択して、インスペクターウィンドウにあるImageコンポーネントから、「Image Type」の項目を「Filled」に選択します。
次に、「Fill Method」で画像を切り取る方向を指定でき、今回は横方向に切り取りたいので、「Horizontal」を選択します。
- Horizontal：横方向で画像を切り取る
- Vertical：縦方向で画像を切り取る
- Radial 90：90度の扇の形で画像を切り取る
- Radial 180：半円の形で画像を切り取る
- Radial 360：円の形で画像を切り取る
次に、「Fill Origin」の項目は画像を表示させる起点を指定することになり、簡単に言えばどちらの方向に向かって画像を切り取るかを決めることができます。
今回は右から左への左向きに切り取りたいので、「Left」を選択します。
最後に、実際に画像をどれくらい切り取るかを決めるFill Amountの初期値を設定することができます。
このFill Amountは「1」を最大として、数値が減れば減るほどその割合分、画像を切り取ることになります。
ゲーム開始時は、体力が最大で始まることになるので、この値は「1」のままで問題ありません。
なお試しに、このFill Amountの値を変更してみると、
画像が切り取られてHPゲージが変動しているのが分かります。
スクリプトからFill Amountの値の更新を行う
ここまで設定ができたら、あとはスクリプトからHPの体力の値に合わせてFill Amountの数値を更新していきます。
まず、hpgaugeのUIオブジェクトにアタッチする形で、スクリプト(HpGaugeController.cs)を作成します。
using UnityEngine;
using UnityEngine.UI; // UIをスクリプトから利用する際に記述必須
public class HpGaugeController : MonoBehaviour
{
public GameObject player; // playerオブジェクトを取得する変数
PlayerController playerController; // PlayerControllerを取得する変数
Image image; // Imageコンポーネントを取得する変数
int hp; // HPゲージを変更するための変数
void Start()
{
playerController = player.GetComponent<PlayerController>(); // PlayerControllerを取得する
image = GetComponent<Image>(); // Imageコンポーネントを取得する
}
void Update()
{
// プレイヤーのHPの値が変動した場合
if (hp != playerController.hp)
{
hp = playerController.hp;
image.fillAmount = hp / 100f; // FillAmountの値を変動する
}
}
}スクリプト内でプレイヤーのHPの値を取得する必要があるので、プレイヤーオブジェクトを取得する変数playerを6行目で宣言して、Startメソッドの13行目でGetComponentを使ってHPを定義しているスクリプトの「PlayerController」を取得しておきます。
インスペクターウィンドウから、変数playerにプレイヤーオブジェクトを紐づけて代入しておきます。
また、Imageコンポーネントを使うことになるので、14行目でImageコンポーネントもGetComponentで取得しておきます。
そして、Updateメソッド内の17行目以降で、プレイヤーの持つ変数hpとHPゲージの持つ変数hpが異なる場合、プレイヤーのHPの値を代入して「FillAmount」の値を変数fillAmountで変動させています。
このfillAmountの値には、最大HP100のうちいくつ残っているかという割合を割り算で計算していますが、hpがint型の整数なので「100」ではなく、「100f」で割って答えを小数で取得する必要があるので注意しておきましょう。
これで実際にゲームを実行してみると、
スペースキーを押してHPが変動する度に、HPゲージも変動するようになりました。
まとめ
このページでは、UnityでFill機能を使ってHPゲージを作るやり方についてまとめていきましたが、いかがでしたでしょうか？
UnityでHPなどのゲージを作る際は、Fill機能を使うことで簡単にゲージを変動させることができます。
このFill機能は、Imageコンポーネントの中の機能で、Fill Amountの数値に合わせて画像を切り取ることができる機能です。
HPゲージなどは常に変動することになるので、このFill機能を使うことで様々なパターンのゲージを作ることができます。
最後までお読みいただきまして、ありがとうございました！
コメント