UnityでキャラクターのHPゲージを頭上に表示する
こんにちは！ジェイです。今回は自キャラや敵キャラの頭上にHPゲージを表示する方法を紹介します。
キャラの作成
プロジェクト新規作成して、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の角度にメインカメラの角度を設定しています。
最終的にはこのような感じになります。
