クリアメモリ

プログラミングやモーショングラフィックス、便利なアプリケーションなど雑多に記録するブログ

【Unity】HPゲージなどのバーを作ってみた| 動画あり

f:id:clrmemory:20170422162116p:plain 

今回はアクションゲームなどでよく使われる「HPゲージ」の作り方を紹介します。

今回使用するのは「LineRenderer」というUnityの機能を使い、それをコードで制御していきます。

それほど難しくはないので、ぜひ覚えておきましょう。

では、さっそくHPゲージの作り方に入ります。

 

 

はじめに

 

今回紹介する「HPゲージ」はHPを表示する時にはもちろんのこと、「メーター」や「経験値ゲージ」などにも使うことができます。

LineRendererを使えば、ただの線を引くこともできます。

 

この記事を読む前に以下の動画を見ておくと、実際の動作がわかりやすくなるかもしれません。

 

 

では、まずUnityからの設定方法を説明します。

 

LineRendererを設定

 

まず、空のオブジェクトを作ります。

そのオブジェクトに「LineRenderer」を追加しましょう。

 

 

Effects > LineRenderer と進むか、検索をかけて見つけます。

 オブジェクトに「LineRenderer」を追加したら、以下のような設定にしてみましょう。

(マテリアルは無しで大丈夫です)

 

Lineの長さや角度などは自由に変更してください。

横長のバーを作る場合、Element 1 のXの値を変更してみましょう。

Element 0からElement 1までの長さがバーの長さになります。

 

後でコードから操作するので、Element 0は0などにしておくとわかりやすくなります。

同じようにYの値を変更すると、角度を調節できます。

 

バーの太さを変更する時には、「StartWidth」と「EndWidth」を調整します。

Element 0 の太さからElement 1の太さというようになっています。

 

また、2Dの場合「Use World Space」のチェックを外しておきましょう。

そうしないと、ビュー上に表示されない可能性があります。 

以下のように実装できましたか。

 

 

先ほど作成した赤いバーの後ろに、少し大きな黒いバーを作成しておくと、枠のようになるので作成しておくと良いです。

 

もし黒いバーがなかった場合、以下のようになります。

 

黒枠あり↓

 

黒枠なし↓

 

断然黒枠有りの方が良いですね。

ぜひ作成しておいてください。

 

ではコードからゲージを減少させる方法の説明に入ります。

 

コードから制御する

 

今回使うコードは、主に1文だけで大丈夫です。

 以下のようなコードを作成しましょう。

 

using UnityEngine;
using System.Collections;

public class PlayerHP : MonoBehaviour {

  public float hp = 100;
  public float MaxHP = 100;

  LineRenderer hpBar;

  void Start(){
    hpBar = GameObject.Find("HP").GetComponent;
  }
  void Update(){
    if (hp >= 0) {
            hpBar.SetPosition (1, new Vector3 (3 * (hp / MaxHP), 0.0f, 0.0f));
        }
    }
}

 

このようなコードを使えばHPゲージの減少を実装できます。

 

if(hp >= 0){ の部分は、プレイヤーの体力が0になったらゲージの減少を止めるというものです。これがない場合、ゲージが0になった後、そのままマイナス方向にゲージが増加されてしまいます。

 

このコードで重要なのが以下の部分です。

hpBar.SetPosition (1, new Vector3 (3 * (hp / MaxHP), 0.0f, 0.0f));

このコードを順番に説明していきます。

 

まず、GameObject.SetPositionで先ほど作成したHPゲージの位置を指定します。

次に1となっているSetPositionの第一引数ですが、これはElementを表しています。

ここが0だったらElement 0、1だったらElement 1という具合です。

 

第2、第3、第4はそれぞれ「x座標」「y座標」「z座標」となっています。

では、どのエレメントの座標を書けば良いのかというと、「先ほど指定したElementの座標」です。

 

私の場合「Element 」1を「3 * (hp / MaxHP)」の大きさにするというコードになっています。後は、ダメージを食らったら、hp を-1するなどすれば、ゲージが短くなっていくと思います。

 

hp / MaxHpの部分は、簡単に言うと「%」です。

残HPが何%かで表示できるので、MaxHPが1000になっても同じコードで実装することができるようになっています。

後は、今回のコードをプレイヤーのオブジェクトなどに追加すれば完了です。

 

実際に動作を確認してみてください。

 

まとめ

 

今回の方法で、簡単にHPゲージが作成できました。

先ほども説明した通り、第1引数を0に変更するとElementも変わるので、だんだん増えていくゲージを作成できます。

 

ゲージを貯めると強い攻撃を繰り出す」時などに使えそうですね。

 他にもプレイヤーのHPとして使うのではなく、ゲームの進行状況などをゲージで表すこともできます。カラオケなどで良く見かけるやつです。 

応用すれば様々な箇所で活躍しそうですね。

 

ぜひ使っていきましょう。 

ではまた。

新着記事