【uGUI】SliderでHPバーを作る

More than 3 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


参考