【Unityメモ】ゲーム画面のUI「体力ゲージ」の作成

※ 2016/10/29 記事を一部修正しました。

というわけで、今回は所謂「体力ゲージ」の作成になります!
やはりというか、恒例の「大切なのに作っていなかった」部分です。

shot2ss20160508224101922

ダメージで体力ゲージが減少し、なくなるとゲームオーバーにする予定です。
基本的に即死するトラップや落下死は実装しません。
デザインもシンプルに、ひとまず「体力が見えるもの」を目指します!

体力ゲージの作成とUI設定

実をいうと、Unityの新UIはあまり使ったことがなかったりします。
NGUIをいじったことがあるので分かる部分もありますが、割と手探りな状態からスタート。

とりあえずゲージの素材がないと話にならないので、フォトショで適当に作ります。
作るのはメインとなる緑ゲージ、体力減少表現用に赤ゲージ、ゲージの背景、そしてゲージの枠となるフレームです。
今はグラデーションでそれっぽく描くだけで終わらせます。

Unityへインポート後、InputType を「Sprite」に設定します。
Texture のままでは透明部分が白くなってしまう上、そもそもUIのImageに設定できません。

shot2ss20160508224136610

新規で UI→Canvas を作成し、追加で Image を4つ配置します。
表示順は「Hierarchyで見て下のUIほど手前」になるらしいです。
なので「フレーム→緑ゲージ→赤ゲージ→背景」の順に並び替えます。

shot2ss20160508224232114

ポジションや縦横幅は画面に合わせてお好みで。
Anchor は横は left、縦は middle に設定し、Pivot は X:0、Y:1 にします。
画面に合わせて調整したものを1つ作り、コピーして Image の参照だけ変えるのが確実かも。

このあたりの設定はテラシュールブログさんの記事が分かりやすいです。
今回の体力ゲージ作成の際も参考にさせて頂きました!

Image コンポーネントの Image Type は Filled にします。
また、Fill Method は Horizontal、Fill Origin は Left にしておきます。

体力ゲージ増減の制御

お次はスクリプトによる制御です。
冒頭でも書きましたが、要はプレイヤーの体力を視覚化するものなので、Player クラスの life の値をそのまま反映すればOKです。
ただ、Image コンポーネントの Fill Amount の値は0~1の間でしか設定できないことに注意が必要です。

UI表示の制御をPlayerクラスでやらせると更に見にくくなるので、専用のマネージャクラスを作成します。
以下はUIオブジェクトをコントロールする「GameUIManager」クラスです。

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class GameUIManager : MonoBehaviour {

    private Player player;

    public Image lifeGage;
    public Image lifeRedGage;

    void Start () {
        player = GameObject.FindGameObjectWithTag("Player").GetComponent<Player>();
        this.initParameter();
    }

    void Update () {
        lifeGage.fillAmount = player.life / player.maxLife;
    }

    private void initParameter() {
        lifeGage = GameObject.Find("LifeGage").GetComponent<Image>();
        lifeGage.fillAmount = 1;

        lifeRedGage = GameObject.Find("LifeRedGage").GetComponent<Image>();
        lifeRedGage.fillAmount = 1;
    }
}

プレイヤーと各種UIを Find()→GetComponent() します。
UIのオブジェクト名は変わることはない想定なので、オブジェクト名でFindしてしまいます。

あとは Update() 内でプレイヤーの体力割合に応じた値を lifeGage に設定します。
Playerクラスに最大ライフを持たせて参照することで、最大値が変わった場合にも対応できます。
これで緑ゲージがプレイヤーの体力に連動して増減するようになりました!

赤ゲージの減少処理

次は赤ゲージで、これは体力減少時の表現用に設定してあるものです。
最近のゲームの体力ゲージは「ダメージ分緑ゲージが減り、後を追うように赤いゲージに徐々に減る」といった表現のものが多い感じがします。
なので「赤ゲージ」といっても、モンハンや格ゲーのような所謂「ヴァイタルソース」的なものとは異なります。

「特定の値を徐々に変化させる」処理には iTween.ValueTo() が便利です。
これをプレイヤーがダメージを受けた際に実行し、赤ゲージの制御を行います。

Playerクラスのダメージ処理については以下の記事をご参照下さい。

【開発メモ】被ダメージ処理とノックバック・無敵時間の実装

ダメージ発生時、Player クラスの Damage() が呼ばれ、体力ゲージ (life) を減らす処理が実行されます。
その life を減少させる処理の前に iTween.ValueTo() を実行します。

以下は Player クラスの Damage() 関数の一部です。
予め GameUIManager の参照を取得しておき、iTween() をマネージャに対して実行します。

iTween.ValueTo(gameUIMnaager.gameObject, iTween.Hash(
    "from", life,
    "to", life - damagePower,
    "time", UIConstants.GAGE_CHANGE_SPEED,
    "easetype", iTween.EaseType.linear,
    "onupdate", "downLifeRedGage",
    "onupdatetarget", gameUIMnaager.gameObject
));

「iTweenを実行するオブジェクト」の指定には注意が必要です。
gameUIMnaagerスクリプトが付与されたオブジェクトを指定します。
このあたりの指定を間違えても iTween からはエラーも何もでないので、間違えた場合に分かりにくいです。

合わせて GameUIManager クラスに以下の関数を追加します。
プレイヤーのダメージに合わせて、iTween の ValueTo で赤ゲージの fillAmount を変化させます。

public void downLifeRedGage(float damagePower) {
    lifeRedGage.fillAmount = damagePower / player.maxLife;
}

上手くいけば下のGIFアニメーションのような感じになると思われます。

20160508_1

背景とフレームに関しては特にやることはありません。
ゲージに合わせて位置を調節したり、リサイズしたりする程度でしょうか。

まとめ

そんなわけで、すごく質素ですが体力ゲージを作成しました!
画面に表示するゲージとしては体力ゲージの他にあと1~2つ予定していますが、それはまた追々実装します!

コメントを残す

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

*