UIパック
Oak インベントリ枠 — 72pxグリッド
温かいオークのインベントリ枠72×72。空・ホバー・選択・ロックの4状態とレアリティ枠3種。SVG+透過PNG。

このパックについて
ファンタジーのインベントリに本当に必要な部品、繰り返せる正方形です。七十二ピクセルあれば二重枠の縁を持たせてもアイテムの場所が残ります。多くのインベントリキットが機能しなくなるのは、ちょうどそのサイズです。
インベントリのグリッドに要るのはパネルではなく、繰り返せる正方形です。72×72のファイル7点、外形はすべて同じなので、並べても隙間の計算が要りません。76 px空けて置けば、縁は別々の箱の列ではなく一枚のグリッドとして読めます。
状態は色ではなく構造で描かれています。選択中の枠には四隅のマーク、ロックされた枠には斜線、ホバー中の枠は縁が一段持ち上がります。これは意図的です。インベントリ画面は多くのゲームでいちばん騒がしい面で、あらゆる色相のアイテム絵の下に敷かれます。縁の色だけの状態は、赤い剣が一本入った瞬間に見えなくなります。
三つのレアリティ枠は、ファミリーの他の部分から体力・マナ・スタミナの色をそのまま使い、色の縁に加えて角のマークも持ちます。だからレアリティで並べ替える人は二つの合図を読んでおり、そのどちらも枠の中央にあるアイテムの絵と競合しません。
すべて編集可能なSVGと、1x・2x・4xのフラットな透過PNGで収録。枠の内側は透明なので、焼き込まれた背景色ではなく、グリッドの後ろに描いたものがそのまま透けます。
使い方
- 枠は76 px間隔で並べてください。72 pxのスプライトに4 pxの隙間という配分で、縁は二重にならず1ピクセル分だけ離れて見えます。
- アイテムのアイコンは枠の中央に約50 pxで描いてください。内側のくぼみは66 pxなので、それより大きいと縁に触れて枠を潰します。
- 選択とロックの状態は色を重ねるのではなく、枠のスプライトごと差し替えてください。角のマークと斜線はスプライトの一部です。
- レアリティ枠は空の枠とそのまま置き換えられます。外形もくぼみも同じなので、レアリティの変更はレイアウトを触らないテクスチャ差し替え一回で済みます。
- 72 pxの枠は48 pxのアイテムアイコンに余白を添える寸法です。64 pxでは二重枠がアイテムを圧迫し始め、レアリティの縁が読めなくなります。
ライセンス
コピー用のクレジット表記
"Oak インベントリ枠 — 72pxグリッド" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/oak-inventory-slots


