タワーディフェンスゲームで守るべきお城を設置したいと思います。また、耐久値を表示するためのHPゲージ（Health Bar）も準備しましょう。
お城を設置する
こっちは実は結構簡単、本命としてはHealthBarの方なので、ささっとやってしまいましょう。
ラインの終端にお城の画像を設置
Images>20230818-castle01ファイルをドラッグアンドドロップでラインの終端にセットします。ちょうど合わせると表示がおかしくなることがあるので、近くにセットして、移動して合わせるのが良いでしょう。
2Dの表示の重ね合わせについて
人によってはラインの上にお城が表示されることがあります。2Dの表示の重なり方は、Order In Layerという順番によって制御されることがほとんどです。
デフォルトでは０で設定されているため、同じ条件だと前後関係が思うように行かない場合があります。
編集中はラインが見えたほうが良いという方はそのままでも良いですが、私の方ではお城の後ろにラインを表示させたいので、今回はLineのOrder In Layerを-1に設定します。
敵やその他の表示もこのOrder In Layerで前後関係を作ることが出来ますので、気になる部分は適宜変えて見てください。
スライム2Dの表示の前後関係がおかしかったらOrder In Layerを見てみる！
Health Barの準備
呼び方に関してはHPゲージとかHPバーとかの方が多いですね。これを作っていたときに、海外の動画見ていることが多かったので、その影響です。
Canvas関連の事前設定
UIを初めて作る場合、自動的にCanvasも用意されます。ヒエラルキー右クリックからUI>Imageを選択して、名前をHealthBarに変更したら、Canvasの設定を変更します。
- CanvasScalerコンポーネント
- UI Scale Mode：Scale With Screen Modeに変更
- Reference Resolution：x=720 y=1280
HealthBarの設定
まずは見た目を調整します。位置はお城の表示に合わせるためどこでもOK。
- 大きさを変更
- Width：150
- Height：25
- Image>Colorを赤に変更
内側の設定
続いてHealthBarの内側の設定を行います。これはHPの残量になる部分です。
- HealthBarを右クリック>UI>Imageを追加
- ここはお好みで名前を変更：gaugeなど
- gaugeの設定を変更、以下の手順で行ってください。
- アンカープリセットを変更(文字だと)
- 変更先は右下の青い上下左右に矢印が出ているやつ
- 選択するときはAlt+Shiftを押しながら選択する
- 色を緑に変更
- Source Imageを変更：Sprte Shape Edge(ない場合は白い四角であればOK)
- Image Type：Filled
- Fill Method：Horizontal
- Fill Origin：Left
- Fill Amount：0.7(ここは変化するのが確認できればOK)
- アンカープリセットを変更(文字だと)
お城のTransformを追尾するスクリプト
今回のゲームでは使いませんが、複数の拠点を個別に守らなければならないゲームなどでは、各タワーごとにHealthBarを表示したいことがあります。ここでは今作ったHealtBarをお城の位置に合わせて表示するための処理を追加したいと思います。スクリプト名はFollowTargetとして、以下のスクリプトを作成します。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class FollowTarget : MonoBehaviour
{
[SerializeField] private Transform target; // 追従する対象
public Vector3 offset; // オフセット（World Spaceのオフセット）
private RectTransform rectTransform;
private void Start()
{
rectTransform = GetComponent<RectTransform>();
}
private void Update()
{
if (target != null)
{
// World PositionをScreen Positionに変換
Vector2 screenPos = Camera.main.WorldToScreenPoint(target.position + offset);
rectTransform.position = screenPos;
}
}
}
スクリプトが用意できたら早速利用してみましょう。
- HealthBarにスクリプトをアタッチ
- Targetにお城のGameObjectをセット
- お好みでOffsetを変更
- お城の中心から少し下にUIを表示させたい場合は(0,-1,0)
HealthBarの表示スクリプト
最後にHealthBarの状態を外部からセットしてもらうためのスクリプトを用意しましょう。HealthBar自体はただの表示物で、タワー（お城）からの状態を反映させるためのものになります。スクリプト：HealthBarを作成してください。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class HealthBar : MonoBehaviour
{
[SerializeField] private Image fillImage; // 体力ゲージのImage
public void SetHealth(float healthPercent)
{
fillImage.fillAmount = Mathf.Clamp01(healthPercent);
}
}スクリプトが準備できたらHealthBarゲームオブジェクトにアタッチします。インスペクターでは子供にあるはずのgaugeゲームオブジェクトをfillImageにセットしましょう。
このスクリプトは今のままでは特に変化ありません。ダメージを受けたときに利用します。
フェアリーStartメソッドでSetHealth(1)とか呼ぶと、ゲーム開始時にHPゲージが前回しますよ。ちゃんとセット出来ているか確認してみてください。
コメント