【uGUI】SliderでHPバーを作る

# はじめに
uGUIのSliderを使って、素早くHPバーを作る方法を紹介します。

# 手順
以下の手順で作っていきます。

1. Sliderを作成する
2. つまみを削除する
3. バーの色を変える
4. バーのサイズを調整する
5. スクリプトからバーの値を変更する

## 1. Sliderを作成する
メインメニューから `GameObject > UI > Slider` を選び、Sliderオブジェクトを作成します。すると以下のゲームオブジェクトが追加されます。

![01.png](https://qiita-image-store.s3.amazonaws.com/0/43772/82f00cea-0325-debb-62e5-8416873c1465.png "01.png")

```
Canvas: UIを配置する領域
  Slider: スライダー
    Background: 背景
    Fill Area: 前景の領域
      Fill: 前景の描画情報
    Handle Slide Area: スライダーのつまみの領域
      Handle: スライダーのつまみの情報
EventSystem: UIイベントシステム
```

実行して、丸いつまみをドラッグすると左右に移動できます。そして、`Sliderオブジェクト > Slider (Script)コンポーネント > Value パラメータ`も一緒に変化することが確認できます。

![02.png](https://qiita-image-store.s3.amazonaws.com/0/43772/fedc2e5e-1118-0fa0-6dbc-59a07212d1df.png "02.png")

ただ、HPバーにつまみは不要なので削除します。

## 2. つまみを削除する
Hierarchyビューから`Handle Slide Area`を削除します。これでつまみが消えます。

![03.png](https://qiita-image-store.s3.amazonaws.com/0/43772/547031ab-3f48-da40-6901-6af54b7ac2b6.png "03.png")

ただ、実行するとわかるのですが、つまみがあった位置をドラッグするとバーの操作ができてしまいます。
この操作を無効にするには、`Sliderオブジェクト > Slide (Script)コンポーネント > Interactable`のチェックを外します。

![04.png](https://qiita-image-store.s3.amazonaws.com/0/43772/4bb3563e-eafd-7d1c-94d7-fdcfb9e69919.png "04.png")

## 3. バーの色を変える
まずば背景の色を変えます。Hierarchyビューから`Backgroundオブジェクト`を選択します。

![05.png](https://qiita-image-store.s3.amazonaws.com/0/43772/f8228b15-79c3-d7de-63be-1e12cc482387.png "05.png")

そして、`Image (Script)コンポーネント > Color`を赤色にします。するとバーの背景色が赤色になります。

![06.png](https://qiita-image-store.s3.amazonaws.com/0/43772/e2e541a6-d2cb-8e9f-1289-be4de347f690.png "06.png")

前景色も変えます。Hierarchyビューから`Fillオブジェクト`を選択し、`Image (Script)コンポーネント > Color`を緑色にします。

![07.png](https://qiita-image-store.s3.amazonaws.com/0/43772/5407cb0c-b338-1c2c-a4da-1d451683d182.png "07.png")

すると、バーが緑色になりました。

![08.png](https://qiita-image-store.s3.amazonaws.com/0/43772/be3c0d08-c470-0908-c54d-9255b5ce7e34.png "08.png")

## 4. バーのサイズを調整する
バーの前景のサイズですが、100%になっても右の端まで進みません。また0%になっても左の端へ進みません。

![09.png](https://qiita-image-store.s3.amazonaws.com/0/43772/caa07dd4-d04b-48a0-1945-e411ea3a6655.png "09.png")

（値の変更は、`Sliderオブジェクト > Slider (Script)コンポーネント > Value`から変更できます）

これはスライダーのつまみに合わせたサイズとなっているためです。これを修正するには、`Fill Areaオブジェクト`・`Fillオブジェクト` の`Rect Transform`の値を修正します。
まずは`Fill Areaオブジェクト`の`Rect Transform`は以下のようにします。

![10.png](https://qiita-image-store.s3.amazonaws.com/0/43772/29b36ffe-f181-868a-5388-5435da9fd179.png "10.png")


Left / Top / Pos Z / Right / Button のすべての値を「0」にします。

続けて`Fillオブジェクト > Rect Transform`の値を修正します。

![11.png](https://qiita-image-store.s3.amazonaws.com/0/43772/ed2a5aeb-8ec9-4c2a-36dd-c183dbc9db58.png "11.png")

これも、Left / Top / Pos Z / Right / Button のすべての値を「0」にしています。

修正して実行すると、HPバーが端まで移動するようになります。

![12.png](https://qiita-image-store.s3.amazonaws.com/0/43772/ef15eb7d-df3e-c04c-cfce-ed884165d278.png "12.png")

## 5. スクリプトからバーの値を変更する
これでHPバーが作れたので、スクリプトからバーの値を変更できるようにします。
以下の手順でゲームオブジェクトとスクリプトを作成します。

1. メインメニューから`GameObject > Create Empty`を選び、空のゲームオブジェクトを作成します
2. ゲームオブジェクトの名前は`HpBarCtrl`に修正しておきます
3. 次にメインメニューから`Assets > Create > C# Script`を選びスクリプトを作成します
4. スクリプトの名前は`HpBarCtrl`に変更しておきます
5. `HpBarCtrlスクリプト`を、`HpBarCtrlオブジェクト`にドラッグ＆ドロップして、スクリプトをアタッチします

スクリプトは以下のように記述します。

```csharp:HpBarCtrl.cs
using UnityEngine;
using System.Collections;
using UnityEngine.UI; // ←※これを忘れずに入れる

public class HpBarCtrl: MonoBehaviour {

  Slider _slider;
  void Start () {
    // スライダーを取得する
    _slider = GameObject.Find("Slider").GetComponent<Slider>();
  }

  float _hp = 0;
  void Update () {
    // HP上昇
    _hp += 0.01f;
    if(_hp > 1) {
      // 最大を超えたら0に戻す
      _hp = 0;
    }

    // HPゲージに値を設定
    _slider.value = _hp;
  }
}

```

実行するとバーが上昇するアニメーションが再生されます。

![jpzq3.gif](https://qiita-image-store.s3.amazonaws.com/0/43772/b546f11f-1c17-7cdf-a0d6-db8fb774e361.gif "jpzq3.gif")

なお、初期状態では最小値は「0.0」最大値は「1.0」となっていますが、`Slider (Script)`コンポーネントの`Min Value`や`Max Value`を変更することで最小値・最大値を変更することができます。

![013.png](https://qiita-image-store.s3.amazonaws.com/0/43772/a02dddd7-baa1-d2ac-6926-a30b0d751af9.png "013.png")

これは最大HPが「60」になったときの設定です。最小値・最大値はスクリプトからもアクセスできるので、HPの更新処理は以下のように書くこともできます。

```csharp:HpBarCtrl.cs
  float _hp = 0;
  void Update () {
    // HP上昇
    _hp += 1;
    if(_hp > _slider.maxValue) {
      // 最大を超えたら0に戻す
      _hp = _slider.minValue;
    }

    // HPゲージに値を設定
    _slider.value = _hp;
  }
```

## おまけ
バーは横方向だけでなく縦方向にすることもできます。

![014.png](https://qiita-image-store.s3.amazonaws.com/0/43772/689e6046-95fe-6f09-2e62-8d5021ee86a4.png "014.png")

`Slider (Script)コンポーネント`の`Direction`パラメータを`Bottom To Top`に変更します。

すると縦方向のHPバーを作ることができます。

![jq0pt.gif](https://qiita-image-store.s3.amazonaws.com/0/43772/06bd1843-3a62-cef4-9597-1141eb7b4c5d.gif "jq0pt.gif")


# 参考

* [【Unity】uGUIをちょっと触ってみたよ？Slider使ってHPバーみたいなの作ってみようか。 ](http://halcyonsystemblog.blog.fc2.com/blog-entry-134.html "【Unity】uGUIをちょっと触ってみたよ？Slider使ってHPバーみたいなの作ってみようか。 ")