３Ｄトップビューアクション　手順２１

　前回からの続きです。完成した UI をスクリプトから操作して、Hp の情報に合わせてゲージが動くように制御を行います。

動画ファイルへのリンク

手順２１　－Hp ゲージの実装②－

HPBarのUIを常にカメラの正面を向くようにする

　今のままだと、敵が横を向いた際に、HpBarも横方向を向いてしまうため見えなくなってしまいます。
UIは２Ｄとして設定していますので UI が回転し、カメラの正面を常に向いていてくれれば、この問題は解消できそうです。

　新しいスクリプトを作成し、名前を HpBarFacingCamera にします。完成したら敵の子オブジェクト内にある Slider オブジェクトにアタッチします。

<= ＋ボタンを押すと開きますので、自分なりの実装を行った上で確認をしてみましょう。

using UnityEngine;

public class HpBarFacingCamera : MonoBehaviour
{
    void LateUpdate() {

        // HpBar を常にカメラの方向に向ける
　　　　LookHpBarToCamera();
    }
   
    /// <summary>
    /// HpBarを常にカメラの方向に向ける
    /// </summary>正対
    private void LookHpBarToCamera(){

        // オブジェクトの回転をカメラの回転と完全に一致させることで、
　　　　// このスクリプトをアタッチしているゲームオブジェクトを回転させ、カメラの方向に正対させる
        transform.rotation = Camera.main.transform.rotation;
    }
}

＜回転処理による違いと考察＞

ゲームを実行して動作を確認する

　ゲームを実行し、カメラを回転させて敵のゲージの向きを確認してください。
カメラを変えてもゲージの向きが変わらずに同じ角度で見えていれば制御成功です。

動画ファイルへのリンク

動画ファイルへのリンク

　なお制御できていない場合には、ゲージがカメラの方向を向かないため、カメラの角度によりゲージが見えなくなります。
この不整合な状態を作らないように今回のプログラムを用意しています。

動画ファイルへのリンク

敵のHPとHpバーをリンクさせるための設計を考える

　無事にHpBarを表示し、カメラの方向に回転させることができました。
ですがこのままでは、前回の索敵範囲と同様に、ゲージと Hp の減少処理とが独立しまっており、敵のHPが減少してもHpBarが一緒には減少しません。
HpBarと敵のHPとをリンクさせて、攻撃を受けてHPが減少したら、HpBarも動くようにしましょう。

　プログラムを考えるためには、まずは日本語で設計を考えます。
敵のHPの情報をHpBarに送ることが出来れば、ちゃんと情報がリンクでき、HpBarが動くように出来そうですが、
そのやり方をどのようにして用意するかがポイントです。

　Hp の管理を行っているクラスとして Health クラスがありますが、ここでは Hp の増減処理も含まれています。
Hp ゲージを動かしたいタイミングも Hp が増減したときになりますので、このクラス内に Hp ゲージを制御する処理を書くのが合理的でしょう。

　またゲージを動かす場合も、Slider の Value の値を書き換える方法だけではなく、DOTween を利用することでゲージの補間処理(アニメ化)ができます。
プレイヤーの移動もそうですが、座標を書き換えると、プレイヤーはその位置にテレポートします。移動の間の処理はないため、突然移動します。
そのような表現が適切なゲームもありますが、通常は、プレイヤーの座標を徐々に変えつつ、移動していった方が画面の表現として正しくなります。

　ゲージなども同様に、敵を攻撃していきなりゲージが半分になる表現もよいですが、ゲージが減少するアニメが入っているだけで演出として表現できます。

　このように、プログラムを考えるときには、どのようなアプローチ方法があるかも考えていく必要があります。
たくさんの処理を覚えて、プログラムの書き方に幅が広がれば、それに合わせて、ゲーム内での表現も多彩になります。

Health クラスを修正する

　Hp の管理を行うための Health クラスを修正します。

　このクラス内で Hp の最大値と現在値の更新などの管理をおこなっていますので、
この中でさらに Slider コンポーネントを制御する処理を追加して、Hp の現在値と Slider のゲージとを同期させます。

　まず、Slider 用の変数を用意し、Slider の情報を登録できるようにします。
今回は GetComponent メソッドではなく、SerializeField 属性を付与し、インスペクターから Slider コンポーネントをアサインできるようにしています。

　その後、InitialHealth メソッド内に処理を追加し、Slider の Value の最大値を Hp の値に設定します。
このようにしておくことで、Value と Hp の値の幅が同じになりますので、単純に Hp の値を Value の値に反映すれば済むようにできます。
仮にこのような処理を作らないと、Value の最大値の初期値は 1 であるため、常に割り算を行って、割合で Value を操作するようになり煩雑化します。
自分で作るプログラムは、なるべくわかりやすく作っておくことがポイントです。

　最後に TakeDamage メソッド内に Slider の Value を制御する処理を追加します。
この制御は Hp の減少が起こったあとに動くことで、減少した値を利用して Value に反映できます。
メソッド内のプログラムは上から下へと動きますので、処理の順番も大切となります。

　今回は DOTween の Slider コンポーネント用に用意されている DOValue メソッドを利用して、
0.5 秒かけて Slider の Value を補間処理(ゲージのアニメ化)を行っています。
SetEase メソッドを追加することで補間アニメの変更もできますので、チャレンジしてみてください。

<= クリックすると開きます。

using UnityEngine;

public class Health : MonoBehaviour
{
    [SerializeField]
    private int maxHp;

    private int currentHp;
    

////*　ここから変数を１つ追加　*////


    [SerializeField]
    private Slider healthSlider; // HPゲージを表示するSlider


////*　ここまで　*////

    
    void Start() {
        
        // Hp の初期化
        InitialHealth(maxHp);
    }

    /// <summary>
    /// Hp の初期化
    /// </summary>
    /// <param name="initialHp"></param>
    public void InitialHealth(int initialHp)
    {
        maxHp = initialHp;
        currentHp = maxHp;


////*　ここから処理を追加　*////


        // Hp 用のスライダー設定。Slider の最大値と現在値に、現在の Hp の値をセットする
        healthSlider.maxValue = currentHp;
        healthSlider.value = currentHp;


////*　ここまで　*////


    }

    /// <summary>
    /// ダメージ用
    /// </summary>
    /// <param name="damage"></param>
    public void TakeDamage(int damage)
    {
        currentHp = Mathf.Max(currentHp - damage, 0);
        

////*　ここから処理を追加　*////


        // HPゲージをアニメさせて変動させる
        healthSlider.DOValue(currentHp, 0.5f);


////*　ここまで　*////


        // Hp の計算と生存確認
        if (currentHp <= 0) {

            Destroy(gameObject);
        }
    }
    
    /// <summary>
    /// 回復用
    /// </summary>
    /// <param name="recoveryPoint"></param>
    public void Heal(int recoveryPoint)
    {
        currentHp = Mathf.Min(currentHp + recoveryPoint, maxHp);
    }
}

　新しい変数を追加しました。

変数に SerializeField 属性を付与していますので、インスペクターに表示されています。
こちらに必要な情報をアサインして、制御できるように紐づけを行います。

ゲームを実行して動作を確認する

　それでは実際に動かしてみましょう。プレイヤーの攻撃を受けた際に、敵のHpBarが減少すれば処理は成功です。
敵が倒れたアニメ処理を追加する場合には、破壊されるまで時間がかかりますので、その前にHpBarを非表示にする処理を追加しましょう。

動画ファイルへのリンク

＜応用　プレイヤーの Hp ゲージを作成して制御する＞

　ここまでの学習内容を振り返り、プレイヤーの Hp ゲージを実装チャレンジしてみましょう。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

３Ｄトップビューアクション　手順２１ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school