#7.Procedural UI Image で角丸のHPゲージを作る

今回からUI編です。
下図のような角丸（カドマル）なHPゲージを作っていきます。
角丸のHPゲージ

UIとは

UIとはユーザーインターフェース。
ボタンとかバーとかです。
ユーザーにゲームの情報を伝えたり、ゲームに情報を橋渡しするのがUIです。

このUIですが、非デザイナーにとっては画像を用意するのが大変だと思います。
画像ファイルの準備や管理、それに画風を合わせたり・・・
プログラム的にロードも煩雑になるので、画像のことだけでも考えたくない。

そんなときに役立つのが、Procedural UI Image というアセットです。

Procedural UI Image は画像無しで以下のようなUIを作れるアセットです。

サンプルの中に、角丸のバーがありますが、これを2つ重ねてHPゲージを作ります。

なお、ゲージは、Unity 標準の Slider を改造して作る方法もあるのですが、
それだと表現に限界があり、例えば角が丸いものは作れないです。

また、このアセットなしに正攻法で角丸のUIを作るには９スライスに対応した画像を用意する必要があります。
画像を使うと、調整したいときに Illasutlator と、Unity を行ったり来たりで少し煩わしいです。
外注している場合だと、リテイク費用もかさんでしまいますよね。

その手間を考えると、Procedural UI Image は Unity だけで完結。
値を入れるだけで自動的（≒プロシージャル）に絵を表示してくれるので
とても私好みのアセットです。

対費用効果を考えると買うしかない！と思いました。（時間をお金で買う自己投資です）

早速、この Procedural UI Image で HPゲージを作っていきます。
下図のように、MainCanvas という名前の UI > Canvas があるとして。

その子に新たに Canvas を作って名前を UIHpGauge とします。
ここをHPゲージのルートとします。
UIHpGaugeを作る

そして、その UIHpGauge の子オブジェクトに、UI > Procedural Image を作って
HPゲージの下地となる赤いバーを作ります。

・名前を BgImage （Backgroundの略）
・色を赤に
・Modifier を Round にして４つの角を丸く
・Rect Transform の Width と Height を調整して横長のバーになるよう

ここまで設定したのが下図です。
赤のHPゲージ

これは、HPが0のときの画像です。

さらに、BgImage の子オブジェクトに、
2つ目の、UI > Procedural Image を作って
HPゲージの手前の緑のバーを作ります。

・名前を FgImage (Foregroundの略)
・色を緑に
・Modifier を Round にして４つの角を丸く
・サイズや位置は親と同じになるように

（ちなみに、この FgImage は Hierarchy の BgImage をコピペして背景色を緑にするという作り方でもOKです）

ここまで設定したのが下図です。

最後に、緑の画像の Fill Amount を０～１に動かして
緑の部分を小さくして後ろの赤い画像が見えてくるか確認しましょう。
Fill Amount が 0 の時、赤、
Fill Amount が 1 の時、緑のHP満タンの画像となります。

今回は、Procedural UI Image アセットを導入し
角丸のHPゲージを作ってみました。

次回は、ドラゴンの残りHPに応じてこのゲージをスクリプトから操作する方法を解説していきます。
つづきます。