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

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

動画ファイルへのリンク

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

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

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

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

HpBarFacingCamera.cs

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

using UnityEngine;

public class HpBarFacingCamera : MonoBehaviour
{
    void LateUpdate() {

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

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

＜座標体系による回転処理の違い＞

　スクリプトを利用して回転処理を行う際の指定方法として、Quaternion 型で指定を行う場合には、transform.rotation と transform.localRotation の2つがあります。

　transform.rotation では、オブジェクトの回転をワールド座標で表します。これは親オブジェクトの回転に関係なく、そのオブジェクト自身の回転を経常計算します。
すべてのオブジェクトは、シーン内の総合的な位置と回転を表すためのワールド座標を使います。たとえば、ゲーム中の任意のオブジェクトの位置や方向は、すべてワールド座標により決定されます。

　transform.localRotation では、オブジェクトの回転を親オブジェクトのローカル座標に基づいて表します。この値は親オブジェクトに対する相対的な回転に関します。
ローカル座標は親オブジェクトに基づいて子オブジェクトの位置と回転を表す座標です。そのため、親子関係を考慮する際に有用です。

HpBarFacingCamera.cs

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

　今回のケースは Slider ゲームオブジェクトの回転を制御することを目的としており、Slider ゲームオブジェクトは、Canvas ゲームオブジェクトの子オブジェクトとして配置されています。
つまり、親子関係を考慮した処理を設計する必要があります。

　transform.localRotation を利用することで、親である Canvas ゲームオブジェクトのローカル座標から見た Slider ゲームオブジェクトの相対的な回転が実行されるため、正しい回転処理を制御することが可能になっています。

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

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

動画ファイルへのリンク

動画ファイルへのリンク

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

動画ファイルへのリンク

　いつも遊んでいるゲームの画面がどのようになっているかを思い出してみるとよいでしょう。

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

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

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

　Hp の管理を行っているクラスとして Health クラスがありますが、ここでは Hp の増減処理(メソッド)も含まれています。
Hp ゲージを動かしたいタイミングとは、Hp が増減したときになりますので、この Health クラス内に 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 メソッドを追加することで補間アニメの変更もできますので、チャレンジしてみてください。

Health.cs

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

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を非表示にする処理を追加しましょう。

動画ファイルへのリンク

　
　ゲージの動く方向は Slider コンポーネント内の Direction の設定で変更可能です。
この設定に応じて、Value の値が変化する際に、Slicer のゲージが設定方向に動きます。

　Direction の初期設定は Left To Right となっており、Value の値の減少に合わせて、右から左側に向かってゲージが減少していきますが、
例えば、Top To Bottom に設定すれば、上から下方向に減少していくゲージも作成可能です。

参考サイト

Hatena Blog パープルハット様
【Unity】Slider(スライダー)の使い方
https://kiironomidori.hatenablog.com/entry/slider-...

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

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

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

印刷する

コメント（0）

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

コメントをかく

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

i-school