前回のチュートリアル

はじめに

前回は、SE を実装しました
今回は、HP ゲージと経験値ゲージを作成していきます

HP ゲージの配置

まずは、HP ゲージを配置していきます

Hierarchy の「+>UI>Image」を選択します

作成された「Canvas」オブジェクトを選択して、
「UI Scale Mode」を「Scale With Screen Size」に変更し、
「Reference Resolution」の「X」に「576」、「Y」に「432」と入力します

次に、作成した「Image」オブジェクトの名前を「HpGauge」に変更します

続けて、「HpGauge」を選択した状態で
「space-shooter/hud」フォルダの「health-bar」を
「Source Image」の欄にドラッグして設定し、「Set Native Size」ボタンを押します

さらに、「Pos X」に「-225」、「Pos Y」に「187」と入力します

続いて、「HpGauge」オブジェクトを右クリックして「UI>Image」を選択します

次に、作成した「Image」オブジェクトを選択した状態で、
「health-bar-fill」を「Source Image」の欄にドラッグして設定し、
「Set Native Size」ボタンを押します

そして、「Image Type」を「Filled」に変更して、
「Fill Method」を「Horizontal」にします

これで、HP ゲージの配置が完了しました

経験値ゲージの配置

次は、経験値ゲージを配置していきます

「HpGauge」を選択した状態で Ctrl + D を押して

複製した「HpGauge (1)」を選択して、名前を「ExpGauge」に変更します

次に、「ExpGauge」を選択した状態で「Pos X」に「-119」と入力します

そして、「ExpGauge」の子オブジェクトの「Image」を選択した状態で
「energy-bar-fill」を「Source Image」の欄にドラッグして設定します

これで、経験値ゲージの配置が完了しました

ゲージを制御するスクリプトの作成

ゲージの配置が完了したので、プレイヤーの HP と経験値を
ゲージに反映するスクリプトを作成していきます

「Player」スクリプトを作成した時と同様の手順で、
「Hud」スクリプトを作成します

そして、作成した「Hud」スクリプトをコードエディタで開き、
下記のコードを記述します

using UnityEngine;
using UnityEngine.UI;

// 情報表示用の UI を制御するコンポーネント
public class Hud : MonoBehaviour
{
    public Image m_hpGauge; // HP ゲージ
    public Image m_expGauge; // 経験値ゲージ

    // 毎フレーム呼び出される関数
    private void Update()
    {
        // プレイヤーを取得する
        var player = Player.m_instance;

        // HP のゲージの表示を更新する
        var hp = player.m_hp;
        var hpMax = player.m_hpMax;
        m_hpGauge.fillAmount = ( float ) hp/ hpMax;

        // 経験値のゲージの表示を更新する
        var exp = player.m_exp;
        var prevNeedExp = player.m_prevNeedExp;
        var needExp = player.m_needExp;
        m_expGauge.fillAmount = 
            ( float )( exp - prevNeedExp ) / ( needExp - prevNeedExp );
    }
}