コガネブログ

平日更新を目標にUnityやC#、Visual Studioなどのゲーム開発アレコレを書いていきます

【Unity 入門】全方位シューティングを作る 第21回 HP ゲージと経験値ゲージの作成

目次

前回のチュートリアル

はじめに

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

HP ゲージの配置

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

f:id:baba_s:20180331204532p:plain

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

f:id:baba_s:20180401110302p:plain

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

f:id:baba_s:20180331204627p:plain

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

f:id:baba_s:20180331204831p:plain

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

f:id:baba_s:20180331205047p:plain

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

f:id:baba_s:20180331205126p:plain

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

f:id:baba_s:20180331205444p:plain

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

f:id:baba_s:20180331205432p:plain

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

f:id:baba_s:20180331205629p:plain

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

経験値ゲージの配置

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

f:id:baba_s:20180331205706p:plain

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

f:id:baba_s:20180331205758p:plain

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

f:id:baba_s:20180331210029p:plain

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

f:id:baba_s:20180331210320p:plain

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

f:id:baba_s:20180331210411p:plain

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

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

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

f:id:baba_s:20180331210504p:plain

「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 );
    }
}

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

ゲージを制御するスクリプトの反映

作成したスクリプトを反映していきます

f:id:baba_s:20180331210724p:plain

Unity に戻り、「Hud」スクリプトを「Canvas」オブジェクトにドラッグして設定します

f:id:baba_s:20180331210926p:plain

そして、「Canvas」オブジェクトを選択した状態で
「HpGauge」の子オブジェクトの「Image」を「Hp Gauge」の欄に、
「ExpGauge」の子オブジェクトの「Image」を「Exp Gauge」の欄に
ドラッグして設定します

f:id:baba_s:20180331211113g:plain

これで Unity を再生すると、プレイヤーがダメージを受けた時に HP ゲージが減り、
宝石を取った時に経験値ゲージが増えることが確認できます

次回は、レベルを表示していきます

次のチュートリアル

チュートリアル一覧