Help us understand the problem. What is going on with this article?

【uGUI】SliderでHPバーを作る

More than 5 years have passed since last update.

はじめに

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

参考

2dgames_jp
ゲーム作ってます。 ■サイト: http://2dgames.jp ■Twitter: https://twitter.com/2dgames_jp
http://2dgames.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした