ゴマちゃんフロンティア

気まぐれと勢いで作るUnityゲーム開発日記です。

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

time 2016/05/08

※ 2016/10/29 記事を一部修正しました。
※ 2017/05/30 記事下部に追記を記載しました。

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

shot2ss20160508224101922

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

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

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

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

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

shot2ss20160508224136610

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

shot2ss20160508224232114

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

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

ImageコンポーネントのImage TypeFilledにします。
また、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つ予定していますが、それはまた追々実装します!

【2017/05/30 追記】
現在は「円状の体力ゲージ」を作成し、そちらを使用しております。本記事の内容がベースになっているので、興味のある方は合わせてご覧ください。

【Unity】円状の体力ゲージ作成と最大値の制御について

スポンサーリンク

down

コメントする



ツイッター