プレイヤーについてくるHPゲージが欲しいんだが

色々なやり方があると思いますが、自分なりのやり方を Pick。

  • HPゲージは UI (Canvas) で表示
  • プレイヤーは 3D

座標の前提知識

ざっくりと、簡単な(簡単すぎる)説明。

3Dオブジェクトが持つ位置、3D座標 (x:横, y:高さ, z:奥行) は常に画面の 2D座標 (x:横, y:縦) に変換して表示されています。
絵師が現実の空間をキャンバスに表現するようなものですね。

  1. ワールド座標:3D 空間座標
  1. ビューポート座標:ゲーム画面を左上 (0,0) ~ 右下 (1,1) と見立てた 2D座標
  1. スクリーン座標:左上 (0,0) ~ 右下 (1919,1079) と見立てた 2D座標

スクリーン座標は環境の設定によります。今回は 1920x1080 としましたが、1280x720 であれば (0,0) ~ (1279,719) となります。

プレイヤーキャラ(3D) に HPゲージ(2D) がついてくるようにするには、プレイヤーの 1: ワールド座標を 3: スクリーン座標に変換することで実現できそうです。

HPゲージを表示

まずは、HPゲージを画面中央に表示しましょう。
下準備が意外と大切なので、丁寧に項目を設定するようにしてください。

Image、Image を表示するための CanvasCamera を作成します。
画面のサイズは先に固定しておきます。その方がなにかと便利なので。

Clear FlagsDon't ClearDepth 1 にしておいてください。
プレイヤーのカメラが描画された後で、UIを表示するためです。

また、Size 540 にして、ピクセル値で UI を配置できるようにします。2D 表示で、今回は特にパースをつけた表示も考えていないため、Projection Orthographic

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

HPゲージはこんなやつ。ImageType = Filled で表現

プレイヤーキャラ

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

位置と角度だけ見やすいところに。Cube は 0,0,0 に配置
ここまで出来ると、大体こんな感じに
(ゲージは皆さんの 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 を調整して出したい場所を調整するなりしましょう。
(オブジェクトが画面上ならゲージは下、画面下ならゲージ上に表示なんてことも可能ですね)

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA