UIパック
Sandbox HUDバー — 体力・マナ・スタミナ
温かい砂のnine-sliceバー枠。帯状の塗り3種と分割バリエーション、150×22、端は5 px。SVG+PNG。

このパックについて
十二分割の22px帯状バーで、複数が並走する建築ゲームのリソース帯に合わせた寸法です。本数を減らして高くすると帯がプレイ領域へはみ出します。物を置くゲームで、それだけはインターフェースがやってはいけないことです。
フレームは端5 pxのnine-sliceなので、どんな幅に伸ばしても両端は変形しません。画面幅いっぱいのボス用バーと40 pxの敵ネームプレート用バーが同じファイルで済みます。
塗りはフレームに焼き込まれておらず別のスプライトです。実際に効くのはそこで、塗りの幅をゼロから満杯まで動かしてもフレームは一切動きません。どの塗りも横三段の帯(上に明るい帯、中間色、下に暗い縁)で描かれているので、フラットな長方形が滲みに変わるような小さいサイズでもバーとして読めます。
色はリソースごとに一つずつ、計三つです。体力、マナ、スタミナ。色相だけでなく明度でも離してあり、グレースケールのスクリーンショットや代表的な色覚特性を生き延びるのはこの部分です。同じ明度に揃えた組み合わせは見本の列では整って見えても、画面上では一つの灰色の塊に潰れます。
分割バリエーションは同じフレームの上に11本の切り欠き線を足したもので、連続した割合ではなく個数(ハート、チャージ、弾数)を数えるゲーム向けです。オーバーレイではなく別ファイルなので、バーのウィジェットを変えずに差し込めます。すべて編集可能なSVGと、1x・2x・4xのフラットな透過PNGで収録。
使い方
- 先にフレームを描き、その上に塗りを重ね、左端を端の幅5 pxだけ内側へ。塗りの幅だけをアニメーションすれば、フレームの両端は完全に静止したままです。
- Unityでは塗りの画像をImage Type FilledとFill Method Horizontalにするか、Sliced画像にしてRectTransformの幅をアニメーションしてください。塗りに丸角がないのでどちらでも動きます。
- Godot 4なら、フレームをUnder Texture、塗りをProgress TextureにしたTextureProgressBarでコードなしに再現できます。Stretch ModeをTileにすれば端も保たれます。
- ピップ式のリソースには分割フレームを使い、塗りの幅を内側幅の12分の1の倍数にスナップさせてください。塗りの端が必ず切り欠きに乗ります。



