Unityで楽して体力バーHPバー、ゲージを作る

#細かいことはいい、ゲージが作りたい

##経緯

• ゲームジャムなどに参加して、ミニゲームをお手軽実装で完成させたいらしい
• 考えていると、体力ゲージや進捗といった「過程」を作るのに時間がかかりそう、とのこと

→とにかく楽に作りたいと依頼があった

##この記事内での仕様

• UIのImageを使用
• 説明のために「実質ゼロ円スクリプト」で書いている
• 新しく作成した2Dのプロジェクトから開始なので、Canvasやカメラの設定変えていたら調整が必要
• Sliderでやってもいいし楽さはそこまで変わらない。クリックで動かせちゃったりはする

##目次

• 画像の追加とキャンバスの設定
• 実際に伸び縮みさせる
• スクリプトで動かす

##キャンバスの設定と画像の追加

1. Hierarchyを右クリック、UIからImageを選択

1. Hierarchyに出てきたCanvasを選択、InspectorのCanvasScalerにある項目をScaleWithScreenSizeにする
   他にも手段はあるが今回はこれ。画面のサイズに対していい感じになってくれる、的な項目

1. ついでに四角の画像を確保する
   フォルダのどこかを右クリック、Create→Sprites→Squareを選ぶ

なくてもいいけど、同じようにフォルダに画像を持ってこれば、大体の場合で他の画像にもできる、という例として。

1. Canvasの子になっているImageをクリック、SourceImageから四角を選んで、ついでにサイズを調整する

そして、PosXやWidthをこのような感じにする 

##実際に伸び縮みさせる

1. Image(Script)のなかに出てきたImageTypeから、Filledを選択

1. FillMethodからHorizontalを選択

1. 伸び縮みする
   

これだけで、とりあえずエディタ上にて伸び縮みするものができた。

##スクリプトで動かす

簡単のために、

1. Imageに直接Scriptをくっつけ、
2. 左右の矢印でHPが増減するようにする。
3. Time.deltaTimeも気にしない無敵加減

初期

using UnityEngine;
//Image系はUIなので追加
using UnityEngine.UI;

public class GageGager : MonoBehaviour
{
    private float _myHp = 500.0f;
    //Image型の変数_imageを宣言しておく
    private Image _image;
}

ImageはUnityEngine.UIをusingすることで使うことができるようになる型(ということでここはひとつ)。

追加

    private void Start()
    {
        //thisいらないけど、自分のだよ、ということで説明のために
        _image = this.GetComponent<Image>();
    }

このScript自身がImageを持っているので、Startで取得、格納しておく。

もう一つ追加

    private void Update()
    {
        //左右の矢印で増減するようにする(いろいろ良くない)
        if (Input.GetKey(KeyCode.LeftArrow))
        {
            _myHp--;
        }
        else if (Input.GetKey(KeyCode.RightArrow))
        {
            _myHp++;
        }
        //最大が500なので、割り算して比率で突っ込む
        _image.fillAmount = _myHp / 500.0f;
    }

ツッコミどころ満載だが、正直各人のケースで差がありすぎると思うので、極端に。
fillAmountは0から1の数値なので、割り算でいい感じにする。

左右の矢印で動く

一応の最終Scriptはこちら

using UnityEngine;
using UnityEngine.UI;

public class GageGager : MonoBehaviour
{
    private float _myHp = 500.0f;
    private Image _image;

    private void Start()
    {
        _image = this.GetComponent<Image>();
    }

    private void Update()
    {
        if (Input.GetKey(KeyCode.LeftArrow))
        {
            _myHp--;
        }
        else if (Input.GetKey(KeyCode.RightArrow))
        {
            _myHp++;
        }

        _image.fillAmount = _myHp / 500.0f;
    }
}

##最後に

Sliderでも良いんだけども、このやり方で横着できる部分がたまーーーーにあるのと、Qiitaで見つけづらかったので書きました。
Sliderで良いんだけども。
ただ、Radialなどをすると、円でできるので、楽をするなら意外と使いようはあると思っている。

ちなみにこの場合は、Materialを作り、UnlitのColor以外のどれかにして目的の画像を設定、ImageにMaterialとして選択する、という操作が必要。