【uGUI】SliderでHPバーを作る

  • 63
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

はじめに

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

手順

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

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

1. Sliderを作成する

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

01.png

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

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

02.png

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

2. つまみを削除する

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

03.png

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

04.png

3. バーの色を変える

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

05.png

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

06.png

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

07.png

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

08.png

4. バーのサイズを調整する

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

09.png

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

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

10.png

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

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

11.png

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

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

12.png

5. スクリプトからバーの値を変更する

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

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

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

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

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

013.png

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

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

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

おまけ

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

014.png

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

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

jq0pt.gif

参考