FIELD SYSTEMS — Retro SF Inventory UI Kit

Try the interactive demo / ブラウザーで操作見本を試す

Launch the free browser demo above to try item selection, equipment swapping, item details and reset. The demo interface is in Japanese and supports mouse, keyboard and touch.

ページ上部から無料の操作見本を起動できます。アイテムの選択・装備の入れ替え・説明表示・初期化を試せます。

The paid download is the SVG/PNG artwork pack described below. The browser demo is a preview; its interaction code is not included in the paid pack. For downloadable assets, use the free four-asset sample or purchase the full pack under their existing licenses.

販売データは下記のSVG/PNG素材集です。この操作見本の動作コードは販売ZIPに含まれません。素材を利用する場合は、4素材の無料サンプルまたは有料フルパックをダウンロードし、それぞれのライセンスに従ってください。

Build a cohesive retro sci-fi equipment screen.

Deep teal surfaces, ivory linework and amber selection accents. FIELD SYSTEMS is a focused collection of static UI artwork for equipment and inventory screens, from stretchable panels to individual item icons.

Full pack — USD 3.00

Regular price. Any applicable taxes are shown at checkout. This is a digital ZIP download, available from your purchase page after payment.

What's included

• 10 UI designs: panel, button, item slot, tab, checkbox, gauge, badge, divider, tooltip and scrollbar.
• 10 item icons: radio, power cell, medical kit, tool, chip, oxygen tank, key, compass, backpack and coil.
• 20 base designs / 32 state and part variants, supplied as editable SVG, transparent PNG at 1x and 2x, and white alpha masks.
• Japanese and English guides, an inventory list, size/slicing metadata, and an equipment-screen example with a JSON layout and embedded-image SVG.

States, resolutions and formats are not counted as additional designs. The asset exports comprise 32 SVG files and 96 PNG files: 32 at 1x, 32 at 2x and 32 white masks.

Made to assemble

Every image is a separate file; no sprite-sheet cutting is required. Documented nine-slice borders preserve frame corners. Keep labels on separate layers so their position stays consistent between button states. Tint an entire icon with its white mask, or edit individual SVG fill/stroke colors.

Try four assets for free

The sample contains the panel, normal button, normal item slot and power-cell icon, in the same formats as the full pack. Under the license below, those four sample assets can also be used in commercial projects.

License summary

Commercial and non-commercial projects, modifications and use in multiple projects are allowed. Credit is optional. One purchase covers one individual or one legal entity, including private collaboration with employees and contractors on its projects.

Do not resell or redistribute standalone or modified assets, include the files in public repositories, or distribute templates primarily intended to supply these assets to others. You may sell and distribute finished works incorporating them. See the included license for the complete terms.

Before you buy

This is an artwork pack. It does not contain a playable game, Unity/Godot project, input/scrolling code or font files. Game-engine integration has not been tested. You need a workflow that can use PNG or SVG artwork. Labels are separate, and substituting fonts can change text widths.

Creation process

Generative AI assisted the creation of the code, SVG geometry and written materials. The PNGs are rendered from geometric SVG shapes. No image-generation-model artwork or third-party stock images were used. Export dimensions, transparency, frame resizing and package contents were checked locally.

Support and refunds

For corrupted or missing files, or files that differ from the description, leave the filename and a description of the issue in this page's comments. Do not post private purchase or personal information. Custom artwork, engine integration and future additional assets are not included.

The publisher does not offer a separate change-of-mind return or refund program after download. Defective or misdescribed files will be addressed, and rights under applicable law and the store's refund policy remain unaffected. For purchase, payment or refund matters, you may use itch.io support.

---

日本語のご案内

装備・持ち物画面を、統一されたレトロSFの見た目に。

深い青緑、アイボリーの線、琥珀色の選択表示。パネルから小さなアイテムアイコンまで、同じ雰囲気で組み合わせられる静止画UI素材です。

フルセット：USD 3.00

通常価格です。ストアが表示する税等は決済画面で確認してください。お支払い後、購入ページからZIPをダウンロードするデジタル商品です。

含まれるもの

• UI部品10種類：パネル、ボタン、アイテム枠、タブ、チェックボックス、ゲージ、ラベル枠、区切り線、説明枠、スクロールバー。
• アイコン10種類：無線機、電源セル、医療キット、工具、チップ、酸素ボンベ、鍵、コンパス、バックパック、コイル。
• 基本20デザイン。状態違いと構成部品を含む32点に、SVG・透過PNG1x/2x・白マスクを用意。
• 日本語・英語の使い方、素材一覧、寸法と伸縮設定、完成画面の配置JSONと画像埋込SVG。

状態やサイズを増やしてデザイン数を数え直していません。SVG32ファイルと、PNG96ファイル（1x・2x・白マスク各32ファイル）を収録しています。

組み合わせやすい素材

画像は切り出し済みの個別ファイルです。角を保って枠を伸ばす設定を記載し、ボタンの状態を変えても文字の基準位置を揃えられます。アイコンの色は白マスクで一括変更でき、部分的な色変更はSVGから編集できます。

まずは無料サンプルで確認

パネル・通常ボタン・通常アイテム枠・セルアイコンの4種類を試せます。フル版と同じ形式を収録。下記の利用条件により、サンプルに含まれる4素材は商用作品にも使えます。

利用できる範囲

商用・非商用、改変、複数作品での利用が可能。クレジットは任意です。1購入で個人1名または法人1社が利用でき、その制作に必要な共同制作者・委託先との私的な共有もできます。

素材の単体再販売・再配布、公開リポジトリへの素材同梱、素材配布を主目的としたテンプレート化はできません。完成作品へ組み込んで販売・配布することは可能です。細部は同梱する利用条件に従ってください。

購入前に

これは画像素材です。操作できるゲーム、Unity/Godot用プロジェクト、入力・スクロール処理、フォントファイルは含みません。ゲームエンジンへの組込みは未検証です。PNGやSVGを扱える制作環境で使用してください。文字は別レイヤーで、見本のフォントを置き換えると幅が変わる場合があります。

制作方法

生成AIによるコード・SVG形状・説明文の作成補助を使い、幾何学的な図形からPNGを書き出しています。画像生成モデルによる絵や、他者のストック画像は使用していません。サイズ・透明度・枠の伸縮・ファイル構成はローカルで検証しています。

問い合わせと返金

破損・欠落・説明と異なるファイルがあれば、この商品ページのコメント欄へ、ファイル名と現象をお知らせください。注文情報や個人情報は公開コメントへ書かないでください。個別加工やゲームエンジンへの導入代行、将来の素材追加は購入内容に含みません。

ダウンロード後の購入者都合の返品・返金は、販売者独自の制度としては提供しません。ファイル不備や説明との相違には対応し、法令やストアの返金制度による権利を制限しません。購入・決済・返金についてはitch.ioサポートの手続きも利用できます。