UIパック

Oak パネルキット — 二重枠パネルとボタン

温かいオークの二重枠nine-sliceウィンドウパネル、沈んだリスト枠、タブ型ボタン4状態。SVGとPNG 1x/2x/4x。

  • ui
  • svg
  • 透過png
  • nine-slice
  • パネル
  • ボタン
  • メニュー
  • 二重
  • ファンタジー
  • rpg
磨いた真鍮のタイトル帯と沈んだリスト領域を持つ温かいオークのメニューパネル。隣の列に同じタブ型ボタンの通常・線画ホバー・押し込み状態
プレビュー 1600×800透明部分は市松模様で表示

このパックについて

インベントリのグリッドとクエストログを持つ種類のゲームのための、温かい木のフレームです。間に隙間を置いた二重の縁が、平らな茶色い長方形ではなく彫り込まれた見え方を与えます。タブ形のボタンは真鍮のベースラインに載るので、並べるとばらばらのコントロールの列ではなくページの一組として読めます。ここにあるものはすべて標準的なキットより一回り大きめです。ファンタジーのメニューはたいてい流し見ではなく眺められるものだからです。

nine-sliceのパネル二枚 — 角32 pxの二重枠のウィンドウ枠と、角20 pxの沈んだ内枠 — で、メニューに必要なほぼすべての箱をまかなえます。ダイアログ、インベントリのグリッド、リストの下地、ツールチップ、ステータスパネル。間に隙間を置いた二重の縁は、描かれたというより彫られたように読めます。それが、作り込まれたインターフェースと線を引いただけの矩形を分ける違いです。角は決して拡大されず中央はフラットな塗りなので、どちらもどんなサイズにもきれいに伸びます。

パネルの上にはタブ形ボタンの4状態が載ります。通常、ホバー、押し込み、無効。いずれも同じ160×48の土台に角16 pxで描かれているので、ボタンのウィジェット一つでテクスチャを差し替えるだけで、矩形を動かさずに操作の一巡りがそろいます。押し込み状態は暗くするだけでなく面を2ピクセル下げて上のハイライトを外します。これが、ただ色が変わったのではなく押されたという手応えを作ります。

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

ダウンロード

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

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

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

使い方

  1. UnityではPNGをインポートし、Texture TypeをSprite(2D and UI)に、ボーダーをウィンドウパネルは32, 32, 32, 32、ボタンは16, 16, 16, 16に設定し、UIコンポーネント側でImage TypeをSlicedにしてください。
  2. Godot 4ではNinePatchRectを使い、パッチの余白に同じ数値を入れてください。あるいはSVGをそのまま入れ、インポート設定の倍率でGodotにラスタライズさせても構いません。
  3. UnrealではTexture2Dとしてインポートし、Draw AsをBoxにしたSlate Brushを作り、余白をテクスチャサイズに対する比で入力してください。128 pxのパネルは0.25、160 pxのボタンは0.1です。
  4. UI倍率が整数でない場合は、1xを拡大するのではなく2xか4xのPNGを使うか、エンジンにSVGソースを渡して最終サイズでラスタライズさせてください。
  5. 真鍮のアクセントはSVG内の単一の値です。銀や緑青に置き換えれば、木の色調に触れずにキット全体を別勢力向けに着せ替えられます。

ライセンス

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

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