UnityでキャラクターのHPゲージを頭上に表示する

2020年9月5日

こんにちは！ジェイです。今回は自キャラや敵キャラの頭上にHPゲージを表示する方法を紹介します。

Contents

1. キャラの作成
2. HP表示用UIの作成
3. HP表示用UIの角度を常にカメラの向きにするスクリプトの作成

キャラの作成

プロジェクト新規作成して、Hierarchy→3DObjetct→PlaneとHierarchy→3DObjetct→Cubeを作成して、CubeのYを0.5に設定。

HP表示用UIの作成

次にHP表示用のUIを作ります。

Hierarchy→UI→Slider
1で作ったCanvasをSliderごとCubeの子要素にする
Handle Slide Areaを削除

次にCanvasを設定してキャラの上にHPゲージが表示されるようにします。

CanvasのRender ModeをWorld Spaceに変更し、普通のゲームオブジェクトと同じように移動できるようにして、Rect TransformでScaleの値を調整し、WidthとHeightのサイズの調整をして敵の頭上に丁度良い大きさにします。

次にSliderを選択します。

Directionでスライダーのメーターの方向を指定出来ます。

MaxValueを1、Whole Numbersにチェックを入れると数値が整数で変更されます。

次はSliderの背景であるBackGroundを選択します。

Source ImageをNoneにして背景画像を四角形にします。

次にFill Areaを選択します。

Fill Areaはスライダーの値が設定される範囲の背景ですが、初期値だとBackgroundと合わないので↑のように調整します。

次はFillを選択します。

Fillはスライダーの値によって幅を変えるImage画像を設定しますが、Source ImageをNoneにしてBackgroundと合わせます。

また値の部分は青くしたい為、Colorの色を変更します。

FillにWidthやleftなどRectTransformの値が入っていると、スライダーの値が最小値や最大値でもメーター表示が最後まで行かないので、0を設定しておきます。

メーターの領域を表示したくない場合はSliderの子要素のBackgroundのColorのAlphaを0に設定します。

HP表示用UIの角度を常にカメラの向きにするスクリプトの作成

UIは2D表示で厚みを持っていない為、敵キャラクターが動くとUIも傾き敵キャラが横向きになった時には、カメラからみるUIは完全にペラペラで見えなくなります。

その為、UIは常にカメラの方を向くよう調整する必要があります。

HPUIゲームオブジェクトに新しくHPUIRotateScriptスクリプトを作成し取り付けます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class HPUIRotateScript : MonoBehaviour
{
    void LateUpdate() {
        //　カメラと同じ向きに設定
        transform.rotation = Camera.main.transform.rotation;
    }
}

HUUIの角度にメインカメラの角度を設定しています。

最終的にはこのような感じになります。