UIパック

Dusk HUDバー — HP・MP・XP

薄暮のパープルのnine-sliceバー枠。目盛り付きの塗り3種と分割バリエーション、128×16、端は4 px。SVG+PNG。

  • ui
  • svg
  • 透過png
  • hud
  • 体力バー
  • 進捗バー
  • nine-slice
  • ピクセルアート
  • レトロ
  • 2d
チェッカー背景に重ねた3本の横向きステータスバー。HP、MP、XPがそれぞれ異なる量まで満ち、下に6目盛りの分割バーと小さめのバー3本
プレビュー 1600×880透明部分は市松模様で表示

このパックについて

六つの切り欠きを持つ128x16のバーで、すでに大きい画面ではなく引き伸ばされる画面に合わせた寸法です。どの縁も4pxのグリッドに乗り、切り欠きは線を重ねたものではなく塗りの抜けなので、整数倍に拡大しても幅は正確に1ピクセルのままで、バーの中で滲みません。

フレームは端4 pxのnine-sliceなので、どんな幅に伸ばしても両端は変形しません。画面幅いっぱいのボス用バーと40 pxの敵ネームプレート用バーが同じファイルで済みます。

塗りはフレームに焼き込まれておらず別のスプライトです。実際に効くのはそこで、塗りの幅をゼロから満杯まで動かしてもフレームは一切動きません。どの塗りも全長にわたって等間隔の目盛りを持つので、分割フレームなしでも割合を一目で数えられます。

色はリソースごとに一つずつ、計三つです。HP、MP、XP。色相だけでなく明度でも離してあり、グレースケールのスクリーンショットや代表的な色覚特性を生き延びるのはこの部分です。同じ明度に揃えた組み合わせは見本の列では整って見えても、画面上では一つの灰色の塊に潰れます。

分割バリエーションは同じフレームの上に5本の切り欠き線を足したもので、連続した割合ではなく個数(ハート、チャージ、弾数)を数えるゲーム向けです。オーバーレイではなく別ファイルなので、バーのウィジェットを変えずに差し込めます。すべて編集可能なSVGと、1x・2x・4xのフラットな透過PNGで収録。

ダウンロード

直リンク · 登録不要 · 待機ページなし
ZIPをダウンロード9.8 kB

フルキット — SVGソース、1x/2x/4xのPNG書き出し、ライセンス、readme

このパックに含まれるファイル
ファイル形式容量ダウンロード
フルキット — SVGソース、1x/2x/4xのPNG書き出し、ライセンス、readmeZIP9.8 kB 入手 →
バーのフレーム、編集可能なSVGSVG683 B 入手 →

使い方

  1. 先にフレームを描き、その上に塗りを重ね、左端を端の幅4 pxだけ内側へ。塗りの幅だけをアニメーションすれば、フレームの両端は完全に静止したままです。
  2. Unityでは塗りの画像をImage Type FilledとFill Method Horizontalにするか、Sliced画像にしてRectTransformの幅をアニメーションしてください。塗りに丸角がないのでどちらでも動きます。
  3. Godot 4なら、フレームをUnder Texture、塗りをProgress TextureにしたTextureProgressBarでコードなしに再現できます。Stretch ModeをTileにすれば端も保たれます。
  4. ピップ式のリソースには分割フレームを使い、塗りの幅を内側幅の6分の1の倍数にスナップさせてください。塗りの端が必ず切り欠きに乗ります。

ライセンス

クリエイティブ・コモンズ 表示 4.0 — 商用利用も無料。クレジット表記が必要です。 全文 · 実際どういう意味か

コピー用のクレジット表記
"Dusk HUDバー — HP・MP・XP" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-hud-bars