
色々なやり方があると思いますが、自分なりのやり方を Pick。
- HPゲージは UI (Canvas) で表示
- プレイヤーは 3D
座標の前提知識
ざっくりと、簡単な(簡単すぎる)説明。
3Dオブジェクトが持つ位置、3D座標 (x:横, y:高さ, z:奥行) は常に画面の 2D座標 (x:横, y:縦) に変換して表示されています。
絵師が現実の空間をキャンバスに表現するようなものですね。
- ワールド座標:3D 空間座標

- ビューポート座標:ゲーム画面を左上 (0,0) ~ 右下 (1,1) と見立てた 2D座標

- スクリーン座標:左上 (0,0) ~ 右下 (1919,1079) と見立てた 2D座標

スクリーン座標は環境の設定によります。今回は 1920x1080 としましたが、1280x720 であれば (0,0) ~ (1279,719) となります。
プレイヤーキャラ(3D) に HPゲージ(2D) がついてくるようにするには、プレイヤーの 1: ワールド座標を 3: スクリーン座標に変換することで実現できそうです。
HPゲージを表示
まずは、HPゲージを画面中央に表示しましょう。
下準備が意外と大切なので、丁寧に項目を設定するようにしてください。
Image、Image を表示するための Canvas、Camera を作成します。
画面のサイズは先に固定しておきます。その方がなにかと便利なので。

Clear Flags を Don't Clear、Depth は 1 にしておいてください。
プレイヤーのカメラが描画された後で、UIを表示するためです。
また、Size を 540 にして、ピクセル値で UI を配置できるようにします。2D 表示で、今回は特にパースをつけた表示も考えていないため、Projection は Orthographic。

特にこだわりがなければ 1920x1080 はオススメです。16:9 ですし、Steam、PS4、switch など多くのプラットフォームの標準サイズ。
スマフォは色々ありすぎるので、1080x1920 で作成し、機種によって余る部分は黒ベタのマスクをかけたりします。


プレイヤーキャラ
Camera は 3D 用のものをもう1つ作ります(デフォのまま)。プレイヤーキャラとして Cube を作成します。


(ゲージは皆さんの Image 次第)
プレイヤー(Cube)を動かす
アナログスティックでグリグリ動かせるようにします。
Inspector で Cube へのアタッチを忘れずに。
using UnityEngine; using UnityEngine.UI; public class Player : MonoBehaviour { [SerializeField] GameObject Cube; void Update() { var axisl = Padd.GetAxisL(); Vector3 trans = Cube.transform.position; trans.x += axisl.Position.x * 0.1f; trans.z += axisl.Position.y * 0.1f; Cube.transform.position = trans; } }
Padd は New Input System を使った自作ライブラリです。説明記事はこちら。
ない場合は、適当に Input に割り当てるなどしてください。十字キーに割り当てるならこんな感じ?
if (Input.GetKey(KeyCode.LeftArrow) == true) trans.x -= 0.1f; if (Input.GetKey(KeyCode.RightArrow) == true) trans.x += 0.1f; if (Input.GetKey(KeyCode.UpArrow) == true) trans.z -= 0.1f; if (Input.GetKey(KeyCode.DownArrow) == true) trans.z += 0.1f;
HPゲージを追従させる
HPゲージ(Image)に、次のスクリプトをアタッチ。
GameObj にプレイヤーキャラを放り込んでください。
using UnityEngine; using UnityEngine.UI; public class HpGauge : MonoBehaviour { [SerializeField] GameObject GameObj; Image gauge; void Awake() { gauge = GetComponent<Image>(); } void Update() { Vector3 position = GameObj.transform.position; // プレイヤーのスクリーン座標(2D)を取得 Vector3 screen = camera.WorldToScreenPoint(position); screen.x -= Screen.width/2; screen.y -= Screen.height/2; screen.z = 0; // 表示物より少し下にゲージが表示されるようにする screen.y -= 100; // ゲージの座標を設定 Vector3 trans = gauge.gameObject.transform.position; trans.x = x; trans.y = y; gauge.gameObject.transform.position = trans; } }
ポイントは camera.WorldToScreenPoint。また、UI の座標は左上が 0,0 ではなく中央が 0,0 なので、それに合わせた計算から、画面サイズの半分を引くことで行っています。
完成
後はゲージを豪華にするなり、Vector3 screen を調整して出したい場所を調整するなりしましょう。
(オブジェクトが画面上ならゲージは下、画面下ならゲージ上に表示なんてことも可能ですね)