Unity2Dでゲームを作成している者です。
今まで作成したゲームではHPは数字での表記にしてきていたのですが、今回はゲージでHPを表すようにしてみました。
HPを使うゲームは多いと思うので、今回作成したHPゲージは結構使いまわせそうな気がしています。
作成した手順について記載をしていきたいと思います。
作成したHPゲージ
今回の記事で作成したHPゲージは上記のようなものです。
シンプルで最低限という感じですが、画像を差し替えるなどすれば、もっと良い見た目になるかなと思います。
早速作成した手順について記載をしていこうと思います。
画像を２種類用意して重ねる
まず下記のような２種類の画像を作成しました。
（保存して自由に使ってもらっても構わないです。ただの四角の図形ですが…）
この２種類の四角を「黒が下、青が上」になるように重ねます。HPの減り方によって青い四角の高さを減らすことでゲージに見せるようにします。
まずUnityでCanvas上に「HPGauge」というオブジェクトを作成します。
そしてImageとして、上記の黒色の四角を指定します。
高さ260、幅15とかなり細長い形にして、PivotのYを０に指定します。PivotのYが０になっていないと高さを変更した時に、ゲージの位置がずれてしまうので注意です。
HPゲージを操作するスクリプトを作成する
次にスクリプトを作成しました。以下のとおりです。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Gauge : MonoBehaviour
{
public int max;
public int cur;
public string txtHeader;
public Image curImg;
public Text txt;
void Update()
{
if (max > 0)
{
txt.text = txtHeader + "\n" + cur.ToString() + "\n/" + max.ToString();
if (cur > max)
{
curImg.GetComponent<RectTransform>().localScale = new Vector3(1f, 1f, 1f);
}
else if (cur < 0)
{
curImg.GetComponent<RectTransform>().localScale = new Vector3(1f, 0f, 1f);
}
else
{
float hpRate = (float)cur / (float)max;
curImg.GetComponent<RectTransform>().localScale = new Vector3(1f, hpRate, 1f);
}
}
}
}
変数についてですが、
maxがHPの最大値
curが現在のHP
txtHeaderが”HP”とか”MP”などといった種類を表す文字列
curImgが青色の画像のオブジェクト
TxtがHPを表示するテキストのオブジェクト
となります。
Updateメソッドの中で、
HPが最大値以上であれば青色の画像の高さは100%
HPが０未満であれば青色の画像の高さは0%
HPが１以上最大未満であれば、青色の画像の高さは現在値/最大値に設定しています。
現在のHPのオブジェクトとテキストのオブジェクトを作成する
次に、下記のような形で現在のHPを表すオブジェクトを作成します。黒色の四角のオブジェクトと全く同じ位置と大きさに設定します。
黒色の画像と同じようにPivotのYを０に指定します。そしてImageのSourceImageに青色の画像を指定します。
次にゲージの下にTextで以下のように数値を表示するオブジェクトを作成します。
オブジェクトを引数に指定する
最後に黒色の画像のオブジェクトに、先ほど作成したスクリプトを追加して以下のように設定します。
CurImgとTxtというのは前項で作成したオブジェクトになります。
前述したとおり、このHPゲージのオブジェクトのMaxがHPの最大値、Curが現在のHPの値となっています。この値をHPに応じて変更していけばHPゲージの完成となります。
例えば、このオブジェクトの上位にPlayerというオブジェクトを作成し以下のように操作します。
using System.Collections.Generic;
using UnityEngine;
public class Player : MonoBehaviour
{
public int maxhp;
public int hp;
public Gauge hpGauge;
// Start is called before the first frame update
void Start()
{
hpGauge.max = this.maxhp;
}
// Update is called once per frame
void Update()
{
}
public void addHP(int plus)
{
this.hp += plus;
if (hp > maxhp)
{
this.hp = this.maxhp;
}
hpGauge.cur = this.hp;
}
}
今回作成したHPゲージをオブジェクトをhpGaugeという変数に格納します。
addHPというメソッドでHPを増やした時に、hpGaugeのcur(現在値)を変更することで、HPが増えた時にゲージのHPも増えるようになります。
同様の考えで、HPが減ったときにはhpGaugeのcur(現在値)を減らせばゲージの高さを減らすことができます。
コメント