UIパック

Dusk インベントリ枠 — 48pxグリッド

薄暮のパープルのインベントリ枠48×48。空・ホバー・選択・ロックの4状態とレアリティ枠3種。SVG+透過PNG。

  • ui
  • svg
  • 透過png
  • インベントリ
  • インベントリ枠
  • アイテム枠
  • レアリティ
  • グリッド
  • ピクセルアート
  • レトロ
  • 2d
チェッカー背景に並んだ正方形のインベントリ枠。空、ホバー、角マーク付きの選択、斜線のロックという各状態に続いて、色付きのレアリティ枠と8枠のグリッド
プレビュー 1600×619透明部分は市松模様で表示

このパックについて

二の累乗の間隔で並ぶ48ピクセルのインベントリグリッドです。ロック状態は薄くした色ではなく斜線です。暗いパレットで枠を薄くすると、空の状態とほとんど見分けがつかなくなるからです。

インベントリのグリッドに要るのはパネルではなく、繰り返せる正方形です。48×48のファイル7点、外形はすべて同じなので、並べても隙間の計算が要りません。52 px空けて置けば、縁は別々の箱の列ではなく一枚のグリッドとして読めます。

状態は色ではなく構造で描かれています。選択中の枠には四隅のマーク、ロックされた枠には斜線、ホバー中の枠は縁が一段持ち上がります。これは意図的です。インベントリ画面は多くのゲームでいちばん騒がしい面で、あらゆる色相のアイテム絵の下に敷かれます。縁の色だけの状態は、赤い剣が一本入った瞬間に見えなくなります。

三つのレアリティ枠は、ファミリーの他の部分からHP・MP・XPの色をそのまま使い、色の縁に加えて角のマークも持ちます。だからレアリティで並べ替える人は二つの合図を読んでおり、そのどちらも枠の中央にあるアイテムの絵と競合しません。

すべて編集可能なSVGと、1x・2x・4xのフラットな透過PNGで収録。枠の内側は透明なので、焼き込まれた背景色ではなく、グリッドの後ろに描いたものがそのまま透けます。

ダウンロード

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

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

このパックに含まれるファイル
ファイル形式容量ダウンロード
フルセット — SVGソース、1x/2x/4xのPNG書き出し、ライセンス、readmeZIP17 kB 入手 →
空の枠、編集可能なSVGSVG990 B 入手 →
角マーク付きの選択枠、編集可能なSVGSVG1.4 kB 入手 →

使い方

  1. 枠は52 px間隔で並べてください。48 pxのスプライトに4 pxの隙間という配分で、縁は二重にならず1ピクセル分だけ離れて見えます。
  2. アイテムのアイコンは枠の中央に約34 pxで描いてください。内側のくぼみは42 pxなので、それより大きいと縁に触れて枠を潰します。
  3. 選択とロックの状態は色を重ねるのではなく、枠のスプライトごと差し替えてください。角のマークと斜線はスプライトの一部です。
  4. レアリティ枠は空の枠とそのまま置き換えられます。外形もくぼみも同じなので、レアリティの変更はレイアウトを触らないテクスチャ差し替え一回で済みます。
  5. 48 pxの枠は32 pxのアイテムスプライトを8 pxの余白付きで収めます。これは16ビット時代の多くのインベントリが使った間隔であり、ここの数値がすべて2の累乗である理由でもあります。

ライセンス

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

コピー用のクレジット表記
"Dusk インベントリ枠 — 48pxグリッド" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-inventory-slots