はじめに
みなさんこんにちは成田です。
本記事ではHPなどで使うゲージのUIの作り方を解説していきます。
スライダーは使わないです
実際のゲーム会社でも使わない(らしい)ので、スライダーを使っている人はこの記事を機にスライダーを忘れましょう。1..2の...ポカン! これで忘れましたね。
※Unityのバージョンは6000.0.34f1を使用しています
事前準備
まずはUIを表示できるようにしましょう
Hierarchyウィンドウを右クリック -> UI -> Image でImageを作成。
Imageを作成したらImageComponentのSourceImageに四角い画像をアサインします。
画像は色を変更できるように白い画像にしましょう。
いい感じの画像がなかったらPackage manaagerから2D Spriteをインストールしましょう。
こんな感じで2Dで使うSpriteがPackagesに追加されます。
今回はSquareを使います。SourceImageにアサインしましょう。
次に、ImageTypeをFilledに変更し、Fill MethodをHorizontalに変更します。
いいかんじに色や形を変えればHPゲージっぽくなりました。
ゲージの作成
おまたせしました。いよいよゲージを作っていきます。
Projectウィンドウを右クリック -> Create -> MonoBehaviour Script でScript を作成。
名前はHPGaugeとします。
作成したScriptに以下のコードを記述します。
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
public class HPGauge : MonoBehaviour
{
[SerializeField] Image _image;
[SerializeField] float _maxHP = 100;
[SerializeField] float _currentHP = 100;
[SerializeField] float _changeValue = 20;
// Start is called once before the first execution of Update after the MonoBehaviour is created
void Start()
{
//HPの初期化
_currentHP = _maxHP;
}
// Update is called once per frame
void Update()
{
//Qを押すとダメージ
if (Input.GetKeyDown(KeyCode.Q))
{
Damage();
}
//Eを押すと回復
if (Input.GetKeyDown(KeyCode.E))
{
Heal();
}
}
void Damage()
{
//0を下回らないようにする
_currentHP = Mathf.Max(_currentHP - _changeValue, 0);
//fillAmountに代入
_image.fillAmount = _currentHP / _maxHP;
Debug.Log($"HPの割合:{_currentHP / _maxHP}");
}
void Heal()
{
//_maxHPを上回らないようにする
_currentHP = Mathf.Min(_currentHP + _changeValue, _maxHP);
//fillAmountに代入
_image.fillAmount = _currentHP / _maxHP;
Debug.Log($"HPの割合:{_currentHP / _maxHP}");
}
}
このコードを先ほど作ったImageにアタッチしましょう。
Qを押すとHPが減り、Eを押すとHPが回復します。
このように、ゲージが変動します。
この際にConsoleのHPの割合とImageのFill Amountに注目すると同じ値になっていることがわかると思います。
Fill Amount は、Image コンポーネントの画像を 0〜1 の割合で表示するためのプロパティです。
たとえば
最大体力が100、現在のHPが50のとき
50 / 100 = 0.5
画像を半分まで表示する
といった感じで設定することができます。
ゲージUIはこのように作成することができます。
スライダーでもよくない？
よくないです
たとえば、
円形ゲージでつくりたい！
三角形のゲージをつくりたい！
などの要望がプランナーからおりてきたときに対応ができません。
Fill Amountなら対応ができます。
Fill MethodをRadial 360に変更してSource Imageに円の画像をアサインすると簡単にできます。
Source Imageの画像をどの方向・形で塗り進めるかを決める方式、これがFill Methodです。
Fill Amountをつかえば、画像素材さえあればだいたいのゲージは作れます。
最高ですね。
応用(DOTween)
はい、皆さん大好きDOTweenです。
DOTweenのインポート方法や詳細などは以下の記事を参考にしてください。
セットアップ方法や何ができるかがわかりやすく書いていると思います。
さて、先ほどまでのゲージは安っぽい感じがしたと思います。
理由としては 1 -> 0.8 などの変動が一瞬で行われていたからですね。
DOTweenはこの安っぽさを改善してくれます
早速コードを書いていきます。
void Damage()
{
//0を下回らないようにする
_currentHP = Mathf.Max(_currentHP - _changeValue, 0);
//fillAmountに代入
_image.DOFillAmount(_currentHP / _maxHP, 0.5f);
Debug.Log($"HPの割合:{_currentHP / _maxHP}");
}
void Heal()
{
//_maxHPを上回らないようにする
_currentHP = Mathf.Min(_currentHP + _changeValue, _maxHP);
//fillAmountに代入
_image.DOFillAmount(_currentHP / _maxHP, 0.5f);
Debug.Log($"HPの割合:{_currentHP / _maxHP}");
}
DOFillAmountはFill Amountの値を 現在値 から 指定した値(第一引数) に 指定した時間(第二引数) で補間して移動する、ということができるメソッドです。
今回は現在のHPの割合に0.5秒で移動するというコードですね。
※gifだとすこしわかりづらいので自分のプロジェクトで実行してみてほしいです
DOTweenをつかうと演出が少しリッチになります。
どんどん使っていきましょう。
さいごに
ということで、今回はスライダーを使わずにHPゲージを作る方法を紹介しました。
「スライダー＝なんでもゲージに使える便利UI」と思われがちですが、柔軟性と拡張性の面ではImage + Fill Amountの方が圧倒的に強いです。
また、DOTweenを使えば、ちょっとした演出も簡単に追加できるので、UI全体のクオリティもグッと上がります。
ちなみに、スライダーがダメなわけではありません。
音量調整など、ユーザーが値を操作するインターフェースとしてはスライダーが適しています。要は適材適所ですね。