丸いHPゲージの作り方

2018.03.29
Unity
script, UI

　実際に作成したHPゲージはこのような感じです。Sliderを動かすとHPの値とゲージが変化します。

　背景用の画像（左）とHPによって変化するゲージ用の画像（右）を用意します。

次に、シーンにCanvasを設置します。HierarchyのCreate→UI→Canvasから作成できます。

HierarchyのCreate→Create Emptyによって、空のゲームオブジェクトを作成し、ドラック＆ドロップによりCanvas内に移動させます。さらに、Create→UI→Imageを二回、Create→UI→Textを二回選択し、ImageとTextを二個ずつ作成します。それらを、先ほど作成した空のゲームオブジェクトに移動させます。

上のImageに背景画像を、下のImageに緑の画像を設定します。

緑色の画像を指定したImageの設定を変更します。ImageTypeをFilled、FillMethodをRadial360、FillOrigenをTopに変更し、Clockwiseのチェックを外します。

上のTextにHP、下のTextに000と入力します。そして、入力したTextが中央に来るようにAlignmentを変更します。FontSizeは22にしました。

ProjectのCreate→Prefabで新しいPrefabを作成します。このPrefabに作成したHPゲージをドラック＆ドロップし、HPゲージのPrefabを作成します。

Prefabを作成した後は、Canvas内のHPゲージは不要なので削除します。

次に、HPゲージを動かすためのScriptを作成します。今回はSliderを動かすことで、HPの値とゲージが変化するScriptを作成しました。

・HPゲージのScript

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class HPGauge : MonoBehaviour {

    public GameObject objHPGauge, objTextHPValue;
    private Image imgHPGauge;
    private Text textHP;
    private int maxHp, hp;

	// Use this for initialization
	void Start () {
        imgHPGauge = objHPGauge.GetComponent<Image>();
        textHP = objTextHPValue.GetComponent<Text>();
	}

    public int MaxHP
    {
        set{ maxHp = value; }
    }

    public int HP
    {
        set { hp = value; }
    }
	
	// Update is called once per frame
	void Update () {
        imgHPGauge.fillAmount = (float)hp / maxHp;
        textHP.text = hp.ToString();
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class HPGauge : MonoBehaviour {

public GameObject objHPGauge, objTextHPValue;

private Image imgHPGauge;

private Text textHP;

private int maxHp, hp;

// Use this for initialization

void Start () {

imgHPGauge = objHPGauge.GetComponent<Image>();

textHP = objTextHPValue.GetComponent<Text>();

}

public int MaxHP

{

set{ maxHp = value; }

}

public int HP

{

set { hp = value; }

}

// Update is called once per frame

void Update () {

imgHPGauge.fillAmount = (float)hp / maxHp;

textHP.text = hp.ToString();

}

・SliderのScript

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class HPGaugeSlider : MonoBehaviour {

    public GameObject preHPGauge;
    private HPGauge hPGauge;
    private Slider slider;
    private int maxHp = 100, hp;

    private void Awake()
    {
        hp = maxHp;
    }

    // Use this for initialization
    void Start () {
        GameObject objCanvas = GameObject.Find("Canvas");
        GameObject objHPGauge = (GameObject)Instantiate(preHPGauge, objCanvas.transform);
        hPGauge = objHPGauge.GetComponent();
        hPGauge.MaxHP = maxHp;
        slider = gameObject.GetComponent();
        slider.value = (float)hp / maxHp;
    }

    // Update is called once per frame
    void Update () {
        hp = Mathf.FloorToInt(maxHp * slider.value);
        hPGauge.HP = hp;
	}
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class HPGaugeSlider : MonoBehaviour {

public GameObject preHPGauge;

private HPGauge hPGauge;

private Slider slider;

private int maxHp = 100, hp;

private void Awake()

{

hp = maxHp;

}

// Use this for initialization

void Start () {

GameObject objCanvas = GameObject.Find("Canvas");

GameObject objHPGauge = (GameObject)Instantiate(preHPGauge, objCanvas.transform);

hPGauge = objHPGauge.GetComponent();

hPGauge.MaxHP = maxHp;

slider = gameObject.GetComponent();

slider.value = (float)hp / maxHp;

}

// Update is called once per frame

void Update () {

hp = Mathf.FloorToInt(maxHp * slider.value);

hPGauge.HP = hp;

}

CanvasにHierarchyのCreate→UI→SliderでSliderを作成します。SliderにSlider用のScriptを、HPゲージのPrefabにHPゲージ用のScriptを追加します。SliderScriptのpreHPGaugeにHPゲージのPrefabを、HPゲージのScriptのobjHPGaugeにPrefab内の緑色の画像を適用したオブジェクトを、objTextHPValueにPrefab内の数字を入力したほうのオブジェクトを指定します。