UIパック
Paper パネルキット — 単枠パネルとボタン
淡い羊皮紙の単枠nine-sliceウィンドウパネル、沈んだリスト枠、ピル型ボタン4状態。SVGとPNG 1x/2x/4x。

このパックについて
夜を舞台にしないゲームのためのライトインターフェースです。パズル、経営シミュレーション、カードゲーム、画面より紙の上でよく読めるあらゆるもの。ふつうのゲーム用キットとはすべてが逆で、パネルの本体がいちばん明るい色調、縁がいちばん暗い色調になります。ボタンは完全なピル型で、それが明るい長方形をスタイル未適用のdivに見せない形です。
nine-sliceのパネル二枚 — 角20 pxの単枠のウィンドウ枠と、角14 pxの沈んだ内枠 — で、メニューに必要なほぼすべての箱をまかなえます。ダイアログ、インベントリのグリッド、リストの下地、ツールチップ、ステータスパネル。縁が一本続くだけなので、パネルは密度の高い文章の背後に置けるほど静かなままです。角は決して拡大されず中央はフラットな塗りなので、どちらもどんなサイズにもきれいに伸びます。
パネルの上にはピル型ボタンの4状態が載ります。通常、ホバー、押し込み、無効。いずれも同じ140×44の土台に角22 pxで描かれているので、ボタンのウィジェット一つでテクスチャを差し替えるだけで、矩形を動かさずに操作の一巡りがそろいます。押し込み状態は暗くするだけでなく面を2ピクセル下げて上のハイライトを外します。これが、ただ色が変わったのではなく押されたという手応えを作ります。
すべてが二通りで届きます。SVGソースはキットを実際に描いたファイルそのものです。開いて温かい紙色の六色か錆の赤のアクセント一色を変え、書き出し直してください。PNGの書き出しはフラットで透明、ビットマップを求めるエンジン向けに1x・2x・4xへあらかじめ拡大してあり、アルファの事前乗算もスプライト外にはみ出す焼き込みの影もありません。
使い方
- UnityではPNGをインポートし、Texture TypeをSprite(2D and UI)に、ボーダーをウィンドウパネルは20, 20, 20, 20、ボタンは22, 22, 22, 22に設定し、UIコンポーネント側でImage TypeをSlicedにしてください。
- Godot 4ではNinePatchRectを使い、パッチの余白に同じ数値を入れてください。あるいはSVGをそのまま入れ、インポート設定の倍率でGodotにラスタライズさせても構いません。
- UnrealではTexture2Dとしてインポートし、Draw AsをBoxにしたSlate Brushを作り、余白をテクスチャサイズに対する比で入力してください。104 pxのパネルは0.19231、140 pxのボタンは0.15714です。
- UI倍率が整数でない場合は、1xを拡大するのではなく2xか4xのPNGを使うか、エンジンにSVGソースを渡して最終サイズでラスタライズさせてください。
- これはカタログ唯一の明るいキットなので、上には暗い文字が要ります。SVGのインク値はコントラストを合わせた基準であり、純黒に置き換えると温かい紙色の調子の上ではかえって可読性が下がります。
ライセンス
"Paper パネルキット — 単枠パネルとボタン" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/paper-panel-ui-kit


