Easy UI Assets Boxの使い方

1. はじめに

EasyUIAssetsBox は、無料 UI 素材配信サービス Free Game UI Assets が公開する 2000 点以上の UI 素材を、Unity Editor 内のタイルブラウザから検索・ダウンロード・インポートできる Editor 拡張機能です。

主な特徴

アセットカタログのブラウジング
asset_type / category / tags / 名前による絞り込みとライブ検索
単体クリックでダウンロード、複数選択で一括ダウンロード
TextureImporter 設定の自動適用
UI シェーダー（UI_Outline / UI_Gradient）と、シェーダー設定を保存できる Shader Preset

一般的なアセットと異なり、本パッケージの中に最初から画像素材は入っていません。
本パッケージが提供している内容は、サーバからアセットを取得する拡張ブラウザ機能とUIシェーダーになっています。
AssetBrowserから、アセットを選択することで、必要な素材だけがダウンロードされます。
また、収録素材は非定期で追加されていきます。

2. 動作環境

項目	必要要件
Unity	2022.3 LTS 以上（開発・検証は `2022.3.62f2`）
レンダーパイプライン	Built-In RP / URP/HDRP
インターネット接続	必須。カタログとアセットバイナリを外部 CDN から取得します
認証 / API キー	不要

【機能説明】 Asset Browser

メインウィンドウ。Tools > EasyUIAssetsBox > Asset Browser から開きます。

Assetsタブ

アイコン、パネル、装飾・パターン、ノイズ、基本図形のアセットが表示されます。

グラデーションタブ

グラデーションアセットが表示されます。

フィルターと検索

アセットをフィルターして検索し、取得することが出来ます。

フィルター	UI	動作
`asset_type`	ドロップダウン	`icon` / `button` / `panel` / `decoration` / `noise` / `shape` / `gauge` から選択。初期値は `icon`
`category`	ドロップダウン	選択中の `asset_type` に紐づくカテゴリを動的に表示
`tags`	テキスト	部分一致検索
名前検索	テキスト	部分一致検索

絞り込み条件を変えると即座にグリッドが更新され、ページは 1 ページ目に戻ります。

アセットのダウンロード失敗時

ネットワークエラーなどでカタログ取得に失敗した場合、エラーメッセージと Retry ボタンが表示されます。回線を確認してから Retry を押してください。

また、サーバ側で障害が発生している場合は、コンソールにログが表示されます。
その場合、時間を置いてからリトライください。

アセットダウンロード

タイルクリックで Download Dialog が開きます。

Assetsの場合

ダウンロード先のパスやファイル名を設定出来ます。

項目	内容
Destination Path	既定: `Assets/EasyUIAssetsBox/Downloads` ですが、デフォルトのパスは変更可能です。
File Name	既定:`{name}.{ext}`）
Fomat	`PNG` / `SVG`（設定から変更が必要）
Trim transparent edges	チェックを入れると、アセットに設定されている余白をカットした状態でダウンロードされます

OK を押すと、指定のパスにアセットがダウンロードされます。

Gradationの場合

ダウンロード先のパスやファイル名を設定出来ます。また、グラデーションの方向を指定出来ます。
また、グラデーションマテリアルを作成することが出来ます。

種別	内容	使い分け
PNG	PNG でアセットをダウンロード	軽量、画像として扱いたい用途
Material	`UI_Gradient` シェーダーを割り当てた `.mat` を保存	スケール非依存・後から角度などを調整したい場合

一括ダウンロード

フィルターバーの 複数選択 を ON にすると、各タイルにチェックボックスが表示されます。複数アセットを選択し、Download Selected でまとめてダウンロードできます。選択状態はフィルターを変更しても保持されます。

ファイル名テンプレート設定の `FileNameTemplate` で使えるトークン：

{name} — アセット名
{asset_type} — icon / button 等
{category} — カテゴリ名
{ext} — png / svg

例：{asset_type}_{name}.{ext} → icon_warning.png

設定

Tools > EasyUIAssetsBox > Open Settings を選ぶと設定アセットが Inspector に開きます。

以下のスクリーンショットの赤枠からも設定が可能です。

プロパティ	役割	既定値
`Default Dest Dir`	ダウンロード保存先のデフォルトパス	`Assets/EasyUIAssetsBox/Downloads`
`Use Asset Type Sub Folders`	`asset_type` ごとのサブフォルダを自動生成するか	`true`
`File Name Template`	ファイル名テンプレート（章 6.2）	`{name}.{ext}`
`Allow Svg Download`	SVG ダウンロードを有効化するか	`false`
`Auto Apply Nine Slice`	`button` / `panel` で 9-slice を自動適用するか	`true`
`Import Preset`	`TextureImporter` に適用する一括設定（後述）	デフォルトプリセット
`Page Size`	タイルグリッドの 1 ページ件数	`20`

Import Preset

TextureImporter に対する自動適用値です。プロジェクトの方針に合わせて変更してください。

Texture Type（既定: Sprite (2D and UI)）
Read/Write 有効化
Mipmap 有効化
Max Size
Compression
Filter Mode
Wrap Mode

uGUIでは、SVG を直接描画できません。
SVGを使用するには UI Toolkit または com.unity.vectorgraphics を別途導入してください。

UI シェーダー（UI_Outline / UI_Gradient）

uGUIのGameObjectに、「UI Gradient Effect」、「UI OutlineEffect」コンポーネントをアタッチするだけで、アウトライン、グラデーションの加工が出来ます。

UI_Outline プロパティ

シェーダー名: EasyUIAssetsBox/UI_Outline

Outer Outline（Stroke Outside、形状の外側）

プロパティ（Inspector 表記）	内部名	範囲	既定値	効果
Outer Color	`_OutlineOuterColor`	Color (HDR)	(0,0,0,1)	Outer の色
Outer Width (px)	`_OutlineOuterWidth`	0–32	4	Outer の太さ（形状の外側に張り出す幅。テクセル単位）
Outer Alpha	`_OutlineOuterAlpha`	0–1	1	Outer の不透明度
Outer Offset X (px)	`_OutlineOuterOffsetX`	-32–32	0	横方向オフセット（drop-shadow 風。テクセル単位）
Outer Offset Y (px)	`_OutlineOuterOffsetY`	-32–32	0	縦方向オフセット（drop-shadow 風。テクセル単位）
Use Outer Texture	`_UseOuterTex`	0/1	0	Outer にテクスチャを乗算する
Outer Texture	`_OutlineOuterTex`	—	white	Outer のテクスチャ
Outer Tex Scroll (uv/sec)	`_OutlineOuterTexScroll`	Vector2	(0, 0)	テクスチャの時間スクロール量（u/秒, v/秒）

Inner Outline（Stroke Inside、形状の内側）

プロパティ（Inspector 表記）	内部名	範囲	既定値	効果
Enable Inner Outline	`_OUTLINE_INNER_ON`	0/1	0	Inner を有効化（OFF なら fill のみ）
Inner Color	`_OutlineInnerColor`	Color (HDR)	(0,0,0,1)	Inner の色
Inner Width (px)	`_OutlineInnerWidth`	0–32	2	Inner の太さ（形状の内縁から内側に塗りつぶす幅。テクセル単位）
Inner Alpha	`_OutlineInnerAlpha`	0–1	1	Inner の不透明度（fill とのブレンド比）
Use Inner Texture	`_UseInnerTex`	0/1	0	Inner にテクスチャを乗算する
Inner Texture	`_OutlineInnerTex`	—	white	Inner のテクスチャ
Inner Tex Scroll (uv/sec)	`_OutlineInnerTexScroll`	Vector2	(0, 0)	Inner のテクスチャ時間スクロール量

Outer と Inner は完全に独立です。

Outer の Width / Offset / Color は形状の外側にだけ作用し、Inner の Width / Color は形状の内側にだけ作用します。
両方有効にすれば、外周と内縁の両方に別色のストロークが乗ります。

UI_Gradient プロパティ

シェーダー名: EasyUIAssetsBox/UI_Gradient

項目（Inspector 表記）	説明
Color Stops	グラデーションの色と位置のペア。最低 2 個必要。左の `＝` ハンドルでドラッグ並べ替え可（内部は位置順に自動ソートされるため結果は同じ）。色欄右のスポイトは Unity 標準で、画面上の色を吸い取れます
Gradient Type	`Linear`（直線）／ `Radial`（放射）。これで下の Angle / Center のどちらが効くかが切り替わります
Angle	グラデーションの向き（度、0–360）。Linear のときのみ有効。目安：`0°`＝左→右 / `90°`＝下→上 / `180°`＝右→左 / `270°`＝上→下
Center	放射の中心座標 X / Y（スプライトローカル 0–1）。Radial のときのみ有効。既定 (0.5, 0.5) ＝中央
Paste stops JSON	Asset Browser の Gradation タイルを右クリック →「Copy stops JSON」でコピーした JSON を貼り付け、Color Stops を一括置換します

OutlineとGradientの同時適用について

同じ Image に UIOutlineEffect と UIGradientEffect を両方付けると、両 Effect は内部で 同じ Material を共有 します。

形状の内側は Gradient で塗られ、外側に Outline が描かれます。片方の Effect を後から無効化・削除しても、もう片方の表現はそのまま残ります。

シェーダープリセット

シェーダーのパラメータをプリセット化するための Shader Preset (ScriptableObject) が用意されています。

色と位置（0〜1）のペアを自由な数だけ追加できます。Inspector 上で値を変えるとリアルタイムにプレビューが反映されます。

Shader Preset を設定する

シェーダーパラメータを複数のオブジェクトで共通化したい場合は Shader Preset (ScriptableObject) に保存します。
プリセットは、Assets > EasyUIAssetsBox > Settings　に格納されています。

Outline Shader Preset

プロパティ	範囲	既定値
`Outline Color`	Color	Black
`Outline Width`	0–32	1
`Outline Alpha`	0–1	1
`Outline Offset X`	-32–32	0
`Outline Offset Y`	-32–32	0

Gradient Shader Preset

プロパティ	内容	既定値
`Gradient Stops`	カラーストップのリスト（色 + 位置 0–1）	空
`Gradient Type`	`Linear` / `Radial`	`Linear`
`Gradient Angle`	0–360 度（Linear のみ）	0
`Gradient Center`	Vector2 (0–1, 0–1)（Radial のみ）	(0.5, 0.5)

8.3 Preset を適用する／保存する

UIOutlineEffect または UIGradientEffect の Inspector 上部に Preset スロット と 2 つのボタンが並びます。

Preset フィールドに作成した Preset SO をドラッグ
Apply を押す → Preset の値が Effect の各プロパティに上書きされる
逆に Effect 側で値を調整したあと Save を押すと、現在の値が Preset SO に書き戻される

ネットワークとプライバシー

EasyUIAssetsBox は次の通信のみを行います。

通信先	内容	タイミング
Free Game UI Assets API	カタログ JSON の取得	Asset Browser 起動時
Free Game UI Assets CDN	個別アセット PNG / SVG / サムネイル	タイルクリック時 / サムネイルスクロール時

これらの通信は Cloudflare 経由で行われます。それ以外の第三者にデータが送信されることはありません。

認証は不要（API キー不要）
ユーザーの Unity プロジェクトのファイル内容は外部送信されません

プライバシー方針：https://freegameui.net/?view=privacy

生成AIの利用

本パッケージに含まれるアセットは、ゲームのUIアイコンやインターフェース要素を作成するために独自に開発されたカスタムAIワークフローおよび専用プロンプトを使用して生成されました。

生成プロセスを経て、すべてのアセットに対し手作業によるレビュー、修正、調整を行い、視覚的な一貫性、操作性、そして全体的な品質の向上を図っています。
これには形状の修正、ディテールの強化、不要なノイズ（アーティファクト）の除去、およびゲームプロジェクト内で実用的に使用するための最適化が含まれます。

収録されているすべてのスプライトはUnity上でテストを行い、適切なインポート、透過処理、スケーリング、および互換性が確保されていることを確認済みです。

本パッケージに含まれるアセットは、汎用的なゲーム開発用途のために独自に制作されたものであり、既存の著作物、キャラクター、ブランド、ゲーム、商標、その他の保護された知的財産に基づくもの、派生したもの、あるいはそれらを模倣することを意図したものではありません。

制作過程においてAI支援ツールを使用しておりますが、すべてのアセットは品質、操作性、そして商用および個人プロジェクトへの適合性を確保するため、リリース前にレビューと修正を行っています。

トラブルシューティング / FAQ

Q. Asset Browser を開いてもタイルが表示されない

カタログ取得に失敗している可能性があります。

Editor Console に出ているエラーメッセージを確認
社内プロキシやファイアウォールで free-ui-assets.yurinchi2525.com へのアクセスがブロックされていないか確認
ウィンドウ内の Retry ボタンを押す

Q. SVG 形式のダウンロード出来ない

設定の Allow Svg Download が false のままになっています。Tools > EasyUIAssetsBox > Open Settings で true に変更してください。なお、uGUI Image は SVG をネイティブ描画できないため、表示には UI Toolkit か com.unity.vectorgraphics の追加導入が必要です。

Q. ダウンロードするアセットのダウンロード先を別フォルダに変えたい

Tools > EasyUIAssetsBox > Open Settings の Default Dest Dir を Assets/ 配下の任意のパスに変更してください（Assets/ 配下に限定されます）。

Q. プロジェクトから完全にアンインストールしたい

Assets/EasyUIAssetsBox/ フォルダごと削除してください。設定アセット（Settings/EasyUIAssetsBoxSettings.asset）も同フォルダ配下にあります。

サポート・ライセンス

サポート

Discord: https://discord.gg/CM6N36MyKw
mail: inquiry@yurinchi2525.com

サービス可用性

カタログ API および CDN は Free Game UI Assets 運営による best-effort 提供です。
重大な変更は事前告知が行われますが、永続的な可用性は保証されません。