UIパック
Carbon パネルキット — コーナー金具パネルとボタン
カーボンファイバーのUIスプライト18点。コーナー金具nine-sliceパネル、ツールチップ、見出し、区切り、チップ、面取りボタン12状態。

このパックについて
中立な鋼のファミリーと同じ五段のスペキュラなグラデーションとヘアラインのパターンを、はるかに暗いパレットの上で、本体を四隅の金具へ開いて使っています。最後の変更こそがパネルを計器のベゼルに変えます。閉じた縁は窓として読まれ、四つの金具はダッシュボードにボルト留めされた何かとして読まれます。リベットは残します。どこにも固定されていないコックピットのパネルは、ただのレンダリングだからです。
Nine-sliceのパネル二枚 — 角10 pxの四隅に金具を置いたウィンドウ枠と、角8 pxの沈んだ内枠 — で、メニューに必要なほぼすべての箱をまかなえます。ダイアログ、インベントリのグリッド、リストの下地、ツールチップ、ステータスパネル。続く縁はまったくありません。四隅の金具が範囲を示し、残りは開いたままなので、パネルは中身を箱に閉じ込めずに縁取ります。角は決して拡大されず中央はフラットな塗りなので、どちらもどんなサイズにもきれいに伸びます。
パネルの上には面取りボタンのスプライトが12点。通常、ホバー、押下、無効の各状態を三通りに描いてあります——標準の152×44バー、正方形の角ばったアイコンボタン、そしてツールバーや行内アクション用のコンパクトボタン。3つのサイズを1枚の拡大縮小ではなく別ファイルにしたのは、描画がサイズに依存するからです。44pxで計算した面取りは、小さい方では縮小ではなく再計算されます。押下状態は面を2ピクセル下げて上のハイライトを外します。単に暗くするのではないからこそ、ボタンが色替えではなく押されたと感じられます。
小さな4点が、パネルとパネルのあいだでメニューに要るものを埋めます。しっぽ付きのツールチップ、パネルの上端に乗る見出しバー、中央に印のあるセクション区切り、そして数値やステータス用のラベルチップ。どれもウィンドウパネルの別サイズではありません——nine-sliceはもともと任意の大きさに伸びるので、幅違いの二枚目はコンポーネントではなく水増しになります。
すべてが二通りで届きます。SVGソースはキットを実際に描いたファイルそのものです。開いてほぼ黒の六色か注意アンバーのアクセント一色を変え、書き出し直してください。PNGの書き出しはフラットで透明、ビットマップを求めるエンジン向けに1x・2x・4xへあらかじめ拡大してあり、アルファの事前乗算もスプライト外にはみ出す焼き込みの影もありません。
使い方
- UnityではPNGをインポートし、Texture TypeをSprite(2D and UI)に、ボーダーをウィンドウパネルは10, 10, 10, 10、ボタンは4, 4, 4, 4に設定し、UIコンポーネント側でImage TypeをSlicedにしてください。
- Godot 4ではNinePatchRectを使い、パッチの余白に同じ数値を入れてください。あるいはSVGをそのまま入れ、インポート設定の倍率でGodotにラスタライズさせても構いません。
- UnrealではTexture2Dとしてインポートし、Draw AsをBoxにしたSlate Brushを作り、余白をテクスチャサイズに対する比で入力してください。128 pxのパネルは0.07813、152 pxのボタンは0.02632です。
- UI倍率が整数でない場合は、1xを拡大するのではなく2xか4xのPNGを使うか、エンジンにSVGソースを渡して最終サイズでラスタライズさせてください。
ライセンス
"Carbon パネルキット — コーナー金具パネルとボタン" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/carbon-panel-ui-kit


