【Unity】3Dローグライクゲームの作り方〜Step11-1〜

前回の記事はこちら。
前回はレベルアップの実装をしました。

体力ゲージ(+etc)

本ステップでは本来ゲームのレベル調整を行うことになっています。
しかしレベルデザインについては今回は解説しないということになっていました。
なので、筆者の記事では今までのステップで解説できなかった細かい部分の実装について解説する回としたいと思います。
最初に行うのは体力ゲージの実装です。因みに筆者が想定しているデザインは以下のようになります。

という訳で体力ゲージを作成しましょう。
時間がないという方はひとまず次の画像を使って下さい。

体力ゲージ

画像をインポートして、以下のように設定しておきます。

ゲージの作成

それでは、体力ゲージを配置していきましょう。まずはヒエラルキータブ内に新しくCanvasを作成して下さい。そこに「Gauges」という名前の空の子オブジェクトを作成します。更にGaugesの子に「HPGauge」という名前で空のオブジェクトを作成し、そのHPGaugeの階層下に「Background」と「Gauge」という名前で空の子オブジェクトを作成して下さい。
そして、その両方の階層下に画像(Image)を作成し、次のようにそれぞれ設定しましょう。

Backgroundの画像の設定

Gaugeの画像の設定

同じようにGaugesの子に「FoodGauge」という空のオブジェクトを作成し、その階層下にBackground」と「Gauge」という名前で空の子オブジェクトを作成して下さい。両方の子に画像を作成し、上記と同じように設定します。(ただし、スプライトは別のものを指定して下さい。筆者はユニティちゃんのロゴを使うことにしました)
色は自由に設定しましょう。最終的にこのようになればOKです。

ユニティちゃんを中央に表示

次にユニティちゃんを中央に表示したいと思います。しかしこのためだけにわざわざユニティちゃんのモデルを置くのは勿体ないです。なのでゲージ用のカメラをもう1つ配置し、ユニティちゃんとゲージだけ表示することでこれを実現しようと思います。
まずレイヤー分けをします。インスペクタータブの右上にある「レイヤー」をクリックし、「レイヤーを追加」をクリックします。そして、以下のように設定して下さい。

そしてPlayerには「Player」レイヤーを、先ほど追加したCanvas及びその階層下には「GaugeBackgroundUI」レイヤーをそれぞれ指定しましょう。
次に新たなカメラを「GaugeCamera」という名前で用意します。そのカメラをPlayer階層下に配置し、以下のように設定して下さい。

同様に、MainCameraのカリングマスクからGaugeBackgroundUIのチェックを外しておきましょう。
これができたら、次に先ほど作成したCanvasを以下のように設定して下さい。

後はカメラの位置や有効視野の調整をして、以下のようになればOKです。

若干下から煽り気味にしておくと歩行時に違和感がなくなります。
実行すると、このような感じになります。

通常時

歩行時

ゲージのスクリプト

それではゲージのコードを書いていきます。
「PlayerGaugesController」という名前のスクリプトを作成し、以下のように記述して下さい。

using UnityEngine;
using UnityEngine.UI;

public class PlayerGaugesController : MonoBehaviour
{
   public ActorParamsController paramsController;
   public Image HpGauge;
   public Image FoodGauge;

   private float prevHpPer = 1;
   private float prevFoodPer = 1;

   // Update is called once per frame
   void Update()
   {
       Params param = paramsController.parameter;
       float per = param.hp / param.hpmax;
       if (prevHpPer != per)
       {
           FillGauge(HpGauge, per);
           prevHpPer = per;
       }
       per = param.food / param.foodmax;
       if (prevFoodPer != per)
       {
           FillGauge(FoodGauge, per);
           prevFoodPer = per;
       }
   }

   private void FillGauge(Image image, float per)
   {
       image.fillAmount = per;
   }
}

ビルドしたら、Gaugesにアタッチして下さい。また、それぞれのGaugeパラメーターにはGaugeの子要素のImageを指定しましょう。
テストしてみます。以下のようにゲージが減少すればOKです。

ゲージ減少のアニメーション

今はゲージがすぐに減少してしまいますが、これにアニメーションをつけて少し見栄え良くしてみたいと思います。
PlayerGaugesControllerクラスを以下のように変更して下さい。

using UnityEngine;
using UnityEngine.UI;

public class PlayerGaugesController : MonoBehaviour
{
   public ActorParamsController paramsController;
   public Image HpGauge;
   public Image FoodGauge;
   public float decreasePer = 0.00005f;

   private float prevHpPer = 1;
   private float prevFoodPer = 1;
   private float decrease;

   void Start()
   {
       decrease = decreasePer / Time.deltaTime;
   }

   // Update is called once per frame
   void Update()
   {
       Params param = paramsController.parameter;
       float per = param.hp / param.hpmax;
       if (prevHpPer != per)
       {
           prevHpPer = FillGauge(HpGauge, per);
       }
       per = param.food / param.foodmax;
       if (prevFoodPer != per)
       {
           prevFoodPer = FillGauge(FoodGauge, per);
       }
   }

   private float FillGauge(Image image, float per)
   {
       if (image.fillAmount > per)
       {
           image.fillAmount -= decrease;
           if (image.fillAmount < per) image.fillAmount = per;
       }
       if (image.fillAmount < per)
       {
           image.fillAmount += decrease;
           if (image.fillAmount > per) image.fillAmount = per;
       }
       return image.fillAmount;
   }
}

decreasePerパラメーターをいじることで増減速度を変えることができます。
テストしてみましょう。ゲージがゆっくりと増減すればOKです。

という訳で、今回はここまでに致します。
次回、ステータスの表示を行いたいと思います。