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

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

![Barbababab.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366532/876faf40-458f-ec83-f5d6-8f365776bd58.gif)
##経緯
- ゲームジャムなどに参加して、ミニゲームをお手軽実装で完成させたいらしい
- 考えていると、体力ゲージや進捗といった「過程」を作るのに時間がかかりそう、とのこと

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

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


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


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

1. Hierarchyを右クリック、UIからImageを選択
<img width="777" alt="CreateImage.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366532/a36109f8-f931-cf3d-357b-61f1d166a11e.png">

2. Hierarchyに出てきたCanvasを選択、InspectorのCanvasScalerにある項目をScaleWithScreenSizeにする
他にも手段はあるが今回はこれ。画面のサイズに対していい感じになってくれる、的な項目
<img width="481" alt="CanvasChomechome.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366532/3f2994c2-64ef-094e-9d87-ef8cb4a14c17.png">

3. ついでに四角の画像を確保する
フォルダのどこかを右クリック、Create→Sprites→Squareを選ぶ
<img width="647" alt="AddSquare.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366532/5b539aec-bf23-2cfc-6d5c-d7055a18a8ee.png">
なくてもいいけど、同じようにフォルダに画像を持ってこれば、大体の場合で他の画像にもできる、という例として。

4. Canvasの子になっているImageをクリック、SourceImageから四角を選んで、ついでにサイズを調整する
<img width="1425" alt="SelectSprite.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366532/f4375bca-f08f-f3ca-8599-c3415d41e04a.png">
そして、PosXやWidthをこのような感じにする
![IIII.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366532/da1b15d2-6134-4d32-57cf-cc3807cf6d83.png)

##実際に伸び縮みさせる
1. Image(Script)のなかに出てきたImageTypeから、Filledを選択
<img width="478" alt="Fillll.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366532/1bc08a46-3ce1-a173-953d-855f5e5d5f49.png">

2. FillMethodからHorizontalを選択
<img width="461" alt="HoriHori.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366532/1ddda231-f53c-9433-9200-dd634f2a6b95.png">

3. 伸び縮みする
![nobi-rustop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366532/4152c2a2-f7a7-7dd6-ff56-41f244708d00.gif)

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

##スクリプトで動かす

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

```Csharp:初期
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することで使うことができるようになる型(ということでここはひとつ)。

```Csharp:追加

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

```

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

```csharp:もう一つ追加
    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の数値なので、割り算でいい感じにする。

左右の矢印で動く
![muromuro.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366532/9c36afd1-2e08-4646-443f-d706c9f5da88.gif)


一応の最終Scriptはこちら

```csharp
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などをすると、円でできるので、楽をするなら意外と使いようはあると思っている。
![marumori.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366532/127a2fc5-d27d-a5f4-d006-5124d443dbbd.gif)

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