UIパック

Reliquary パネルキット — タイトルバー付きパネルとボタン

冷えた石のUIスプライト18点。タイトルバー付きnine-sliceパネル、ツールチップ、見出し、区切り、チップ、面取りボタン12状態。

  • ui
  • svg
  • 透過png
  • nine-slice
  • パネル
  • ボタン
  • メニュー
  • リボン
  • ファンタジー
  • 様式化
  • 神殿
  • ダークUI
淡いシルバーのタイトル帯と沈んだリスト領域を持つ冷えた石のメニューパネル。隣の列に同じ面取りボタンの通常・線画ホバー・押し込み状態
プレビュー 1600×1115透明部分は市松模様で表示

このパックについて

温かさを抜いた彫り込みのフレームです。オークは酒場として読まれますが、これは地下墓所として読まれます。違いはパレットだけではありません。ヘッダー帯が二本目の同心フレームの代わりを務め、面取りボタンが丸めたタブの代わりを務めます。角の飾り頭とそこに嵌まった宝石はどちらでも同じ形で、それが二つを無関係なファンタジーのキットではなく同じスタイルに留めています。

Nine-sliceのパネル二枚 — 角12 pxのタイトルバー付きのウィンドウ枠と、角10 pxの沈んだ内枠 — で、メニューに必要なほぼすべての箱をまかなえます。ダイアログ、インベントリのグリッド、リストの下地、ツールチップ、ステータスパネル。タイトル帯がパネル上部に組み込まれているので、ダイアログの見出しに二枚目のスプライトも手作業の位置合わせも要りません。角は決して拡大されず中央はフラットな塗りなので、どちらもどんなサイズにもきれいに伸びます。

パネルの上には面取りボタンのスプライトが12点。通常、ホバー、押下、無効の各状態を三通りに描いてあります——標準の128×56バー、正方形の角ばったアイコンボタン、そしてツールバーや行内アクション用のコンパクトボタン。3つのサイズを1枚の拡大縮小ではなく別ファイルにしたのは、描画がサイズに依存するからです。56pxで計算した面取りは、小さい方では縮小ではなく再計算されます。押下状態は面を2ピクセル下げて上のハイライトを外します。単に暗くするのではないからこそ、ボタンが色替えではなく押されたと感じられます。

小さな4点が、パネルとパネルのあいだでメニューに要るものを埋めます。しっぽ付きのツールチップ、パネルの上端に乗る見出しバー、中央に印のあるセクション区切り、そして数値やステータス用のラベルチップ。どれもウィンドウパネルの別サイズではありません——nine-sliceはもともと任意の大きさに伸びるので、幅違いの二枚目はコンポーネントではなく水増しになります。

すべてが二通りで届きます。SVGソースはキットを実際に描いたファイルそのものです。開いて深いインディゴの六色か淡いシルバーのアクセント一色を変え、書き出し直してください。PNGの書き出しはフラットで透明、ビットマップを求めるエンジン向けに1x・2x・4xへあらかじめ拡大してあり、アルファの事前乗算もスプライト外にはみ出す焼き込みの影もありません。

ダウンロード

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

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

このパックに含まれるファイル
ファイル形式容量ダウンロード
フルキット — SVGソース、1x/2x/4xのPNG書き出し、ライセンス、readmeZIP80 kB 入手 →
ウィンドウパネル、編集可能なSVGSVG2.2 kB 入手 →
ボタン(通常状態)、編集可能なSVGSVG1.1 kB 入手 →

使い方

  1. UnityではPNGをインポートし、Texture TypeをSprite(2D and UI)に、ボーダーをウィンドウパネルは12, 12, 12, 12、ボタンは6, 6, 6, 6に設定し、UIコンポーネント側でImage TypeをSlicedにしてください。
  2. Godot 4ではNinePatchRectを使い、パッチの余白に同じ数値を入れてください。あるいはSVGをそのまま入れ、インポート設定の倍率でGodotにラスタライズさせても構いません。
  3. UnrealではTexture2Dとしてインポートし、Draw AsをBoxにしたSlate Brushを作り、余白をテクスチャサイズに対する比で入力してください。104 pxのパネルは0.11538、128 pxのボタンは0.04688です。
  4. UI倍率が整数でない場合は、1xを拡大するのではなく2xか4xのPNGを使うか、エンジンにSVGソースを渡して最終サイズでラスタライズさせてください。

ライセンス

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

コピー用のクレジット表記
"Reliquary パネルキット — タイトルバー付きパネルとボタン" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/reliquary-panel-ui-kit