UIパック
Dusk パネルキット — タイトルバー付きパネルとボタン
薄暮のパープルのタイトルバー付きnine-sliceパネル、沈んだリスト枠、角ばったボタン4状態。SVGとPNG 1x/2x/4x。

このパックについて
それでも本物のメニューが欲しいピクセルゲームのための、硬い縁のキットです。タイトルバーは後付けではなくパネルに組み込まれています。丸い角もアンチエイリアスもどこにもなく、どの縁も一列のフラットなピクセルです。4Kのモニタで3x表示されたときにパネルが形を保つ方法はそれだけです。紫は十分に冷たいので、赤を使わなくてもアンバーが警告として読めます。
nine-sliceのパネル二枚 — 角16 pxのタイトルバー付きのウィンドウ枠と、角12 pxの沈んだ内枠 — で、メニューに必要なほぼすべての箱をまかなえます。ダイアログ、インベントリのグリッド、リストの下地、ツールチップ、ステータスパネル。タイトル帯がパネル上部に組み込まれているので、ダイアログの見出しに二枚目のスプライトも手作業の位置合わせも要りません。角は決して拡大されず中央はフラットな塗りなので、どちらもどんなサイズにもきれいに伸びます。
パネルの上には角の立ったボタンの4状態が載ります。通常、ホバー、押し込み、無効。いずれも同じ96×32の土台に角8 pxで描かれているので、ボタンのウィジェット一つでテクスチャを差し替えるだけで、矩形を動かさずに操作の一巡りがそろいます。押し込み状態は暗くするだけでなく面を2ピクセル下げて上のハイライトを外します。これが、ただ色が変わったのではなく押されたという手応えを作ります。
すべてが二通りで届きます。SVGソースはキットを実際に描いたファイルそのものです。開いて夜のバイオレットの六色かアンバーのアクセント一色を変え、書き出し直してください。PNGの書き出しはフラットで透明、ビットマップを求めるエンジン向けに1x・2x・4xへあらかじめ拡大してあり、アルファの事前乗算もスプライト外にはみ出す焼き込みの影もありません。
使い方
- UnityではPNGをインポートし、Texture TypeをSprite(2D and UI)に、ボーダーをウィンドウパネルは16, 16, 16, 16、ボタンは8, 8, 8, 8に設定し、UIコンポーネント側でImage TypeをSlicedにしてください。
- Godot 4ではNinePatchRectを使い、パッチの余白に同じ数値を入れてください。あるいはSVGをそのまま入れ、インポート設定の倍率でGodotにラスタライズさせても構いません。
- UnrealではTexture2Dとしてインポートし、Draw AsをBoxにしたSlate Brushを作り、余白をテクスチャサイズに対する比で入力してください。80 pxのパネルは0.2、96 pxのボタンは0.08333です。
- UI倍率が整数でない場合は、1xを拡大するのではなく2xか4xのPNGを使うか、エンジンにSVGソースを渡して最終サイズでラスタライズさせてください。
- すべての縁が整数ピクセルに乗り、どこもアンチエイリアスされていません。1xのPNGをPoint(Unity)、Nearest(Godot)、Nearest-Neighbour(Unreal)のフィルタでインポートし、整数倍だけで拡大縮小してください。
ライセンス
"Dusk パネルキット — タイトルバー付きパネルとボタン" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-panel-ui-kit


