UnityにSVGを読み込む：UI Toolkitとスプライト用の準備
エディターのバージョンと使用先からUnityのSVG読み込み方法を選びます。パスを準備し、非対応の効果を扱い、実際のUI Toolkit画像やスプライトを確認します。
目次
UnityのSVG読み込みは、使うエディターのバージョンと、図案の表示場所を決めることから始まります。Unity 6.3にはUI ToolkitとTexture2D用のSVG読み込みが組み込まれています。SpriteやuGUIアセットとしての直接読み込みにはVector Graphicsパッケージを使い、それ以前のエディターでは古い系列のパッケージを使います。UnityのVector Graphicsバージョンガイドが、この区分を説明しています。
編集可能なSVGがすでにあれば、読み込み機能用に準備します。PNGやJPGしかない場合、ベクター図形が必要なときだけトレースします。テクスチャやピクセルアートのスプライトはラスターのまま使えます。
セット全体を処理する前に代表的なアイコン1つを試し、元図案の問題とUnityの読み込み・表示の問題を分けます。
別のエンジンでシーン形状を扱うなら、Unreal EngineのSVG読み込みチェックで、Motion Designの元図形、穴、個別の部分を確認します。
図案を編集する前に読み込み方法を選ぶ
使用先のコンポーネントから方法を選びます。UI Toolkitのレイアウトで使えるアセットが、必ずSprite Rendererのフィールドに入るとは限りません。
| Unityエディター | 使用先 | 最初に使う方法 |
|---|---|---|
| 6.3以降 | UI Toolkit | 標準のSVG読み込みでUI Toolkitのベクター画像にする |
| 6.3以降 | Texture2Dを使う場所 | 標準のSVG読み込みでテクスチャにする |
| 6.3以降 | Sprite RendererまたはuGUI SVGImage | Vector Graphics 3.0プレビューパッケージ |
| 6.3より前 | パッケージによるSVGの手順 | 互換性のあるVector Graphics 2.0プレビューパッケージ |
表はUnityのパッケージ要件に従っています。プロジェクトで使うエディターとパッケージのバージョンを固定します。Unity 2018や2.0のプレビュー読み込み機能の説明は、現行の6.3プロジェクトとは異なる選択肢を説明する場合があります。
図案の横に小さな読み込み試験を残す
曲線、内側の穴、セットに必要な塗り効果を含むアイコンを選びます。元のSVGと、ベタの図形で作ったシンプルな版を並べて残します。シンプルな版が正しく読み込めたら、プロジェクト全体を変える前に複雑な図案を調べてください。
読み込み機能が再現できるSVGを準備する
ベクターエディターで元ファイルを開き、実際のオブジェクトを調べます。原版を残し、Unityへ渡す別の書き出しを作ります。
図案にパスがあることを確認する
SVGは<image>要素でビットマップを含められます。拡張子だけでは図案がベクター形状とはいえません。W3Cの埋め込み内容の仕様が、この違いを説明しています。エディターで部分を選び、オブジェクトやマークアップを調べます。1つの画像の長方形なら、埋め込みラスターの診断を使います。
元のベクターファイルがあれば、再書き出しします。その原版から書き出したPNGをトレースすると、再構築の手間が増え、シルエットが変わる可能性があります。アイコン群では、まずキャンバス、余白、見た目の太さをそろえます。UIキットのSVG準備ガイドがセット単位の判断を扱っています。
非対応の機能を意図的に置き換える
Unityの標準読み込みはSVG 1.1の一部に対応します。除外されるものには、編集可能なテキスト、ピクセルマスク、フィルター、インタラクション、アニメーションがあります。ブラウザーでは正しくてもUnityの結果が違う場合があります。UnityのSVGの制限をご覧ください。
図案の要件に合わせて納品用コピーを準備します。
- 装飾用の文字をアウトラインにします。編集や翻訳が必要なUIラベルは、UIのテキストとして残します。
- 必要な影や発光を使用先の対応する効果で作り直すか、その図案をラスターに保ちます。
- マスクとクリッピングパスを別に調べます。柔らかなピクセルマスクと幾何学的なクリップは構成が異なります。
- SVG内のアニメーションに頼らず、Unityで動きを計画します。
フィルターが非対応だからといって、すべてのグラデーションを一律に単純化しないでください。実際の効果を試します。複雑なバッジが失敗するなら、ベタ塗り版を書き出し、効果を1つずつ戻します。見た目を変える機能を切り分けられます。
意図しない複雑さを除く
アイコンに属さない斑点、隠れた重複、背景長方形を削除します。明らかにノイズのある曲線だけを、元と比べながら簡略化します。修正で小さい穴が閉じたら、ファイルが短くなっても失敗です。
すべてのゲーム図案に有用な共通の目標ノード数はありません。幾何学的な矢印と手描きキャラクターでは必要な細部が異なります。SVGのノード修正ガイドは、形の情報を持つ点を判断するのに役立ちます。
Unity 6.3以降でUI Toolkitへ読み込む
シルエットと効果を確認した納品用SVGから始めます。
- SVGをプロジェクトのAssetsフォルダーへ加え、選びます。
- InspectorでGenerated Asset TypeをUI Toolkit Vector Imageにします。
- 読み込み設定を適用し、生成したベクター画像を目的のUI Toolkit要素で使います。
- 目的の最小・最大表示サイズで実際のレイアウトをプレビューします。
標準のアセット選択はベクター画像の操作にあります。使用先がTexture2Dを要求するなら、その出力を選び、目的のサイズで生成されたテクスチャを確認します。
UI Toolkitでは、推奨される基本のテッセレーション設定から始めます。Target ResolutionとZoom Factorで、目的の表示条件に合う曲線の分割を設定できます。Unityは十分な結果を得られる最低のターゲット解像度を推奨しています。画像読み込み設定が操作を説明しています。
SVGが正しい形を表すかと、読み込んだアセットがその形をよく表示するかは、別に確認します。テッセレーションを増やしても、元の書き出しで消えた穴は戻りません。
Sprite RendererやuGUI用に読み込む
使用先にSpriteやuGUI対応が必要なら、Package Managerで互換性のあるcom.unity.vectorgraphicsを入れます。コンポーネントに合う生成アセットを選び、受け付けることを確認します。現在のパッケージドキュメントは、これらを標準のUI Toolkit方式と区別しています。
Sprite Rendererでは、プレハブへコピーする前にシーン内のサイズと回転中心を確認します。uGUIでは、プロジェクトのSVGImageの手順を確認します。必要な寸法ですでに図案が正しく見えるなら、通常のラスタースプライトも選択肢です。
古い2.0パッケージは、シーン単位当たりのSVG単位、スプライトの回転中心、テッセレーション設定を説明しています。また実験的なパッケージとされ、本番利用を勧めていません。その方法を維持するチームは、追加前にプロジェクトの制約とともに2.0のマニュアルを確認してください。
既存プロジェクトを更新するなら、コピーかバージョン管理したブランチで読み込みを試します。実際のプレハブとシーンで、生成アセットの種類と参照を比較します。サムネイルの表示成功だけを移行試験にせず、古いフォーラムの一括.meta編集を、その具体的な問題を再現せずに適用しないでください。
最初に見える違いを診断する
各代表アセットについて、元ファイル、エディターとパッケージのバージョン、使用先コンポーネント、期待する表示サイズ、最初の違いを短く記録します。
| 見える症状 | 最初に確認するもの | 次に役立つ試験 |
|---|---|---|
| コンポーネントのフィールドに入らない | 生成アセットの種類と使用先 | 実際のコンポーネント用に読み込む |
| 文字、影、動きが欠ける | 非対応の元の機能 | アウトライン化やベタ図形の書き出しを試す |
| 余白が多い、または縁で切れる | 元のキャンバスと要素サイズ | 元の境界範囲と使用先の長方形を比べる |
| 拡大時に曲線が角ばる | テッセレーションと表示縮尺 | 目的の解像度やズームを徐々に増やす |
| 拡大したテクスチャがぼやける | ラスター寸法と表示サイズ | 生成時に想定したサイズで比べる |
| 正しく見えるが既存シーンが壊れる | 参照、マテリアル、読み込み変更 | 一括再読み込み前に影響を受けるプレハブ1つを試す |
たとえば星のバッジが読み込めても、中央の穴が消えたとします。まず納品SVGを開き、穴があるか確認します。あるなら、Unityで簡略化したバッジを比較します。その版で穴が残るなら、元の重なり、塗りの構成、マスクを調べます。再トレースが役立つのは、パス形状自体が誤っている場合だけです。
採用したアセットはエディターだけでなく対象ビルドでも試します。最小サイズでの見やすさ、色と透明度、再読み込み後のシーンやプレハブ参照を記録します。性能の判断には、自分のシーンの計測が必要です。SVGの拡張子は性能の測定ではありません。
PerfectVectorではどう進めるか
適した元データがラスターだけで、編集可能な図形が必要なら、Unity読み込み前にPerfectVectorが適しています。ベタ色のPNGやJPGを1つPerfectVectorの変換ツールへアップロードし、トレースしたシルエットと穴を原画と比べ、ダウンロードしたSVGをベクターエディターで調べてからUnityへ読み込みます。
受け渡し全体で同じ代表アイコンを使います。目的の領域を編集でき、穴や隙間が開いたままで、修正で形がゆがんでいない場合だけ採用します。その後、上のUnityの使用先試験を適用します。
写真、質感、柔らかな発光、意図的なピクセルアートは、ラスターのほうが目的の外観を保てるなら、そのまま使います。シンプルな幾何学的記号は手描きのほうが制御しやすい場合があります。PerfectVectorは元のSVG形状を準備するもので、Unityの対応機能を変えたり実行時描画を検証したりしません。形式の違いになじみがなければ、SVGファイルの内容から始めます。
よくある質問
Unity 6にはVector Graphicsパッケージが必要ですか？ マイナーバージョンと使用先で決まります。Unity 6.3にはUI ToolkitとTexture2DのSVG読み込みが組み込まれています。SpriteとuGUIは3.0プレビューパッケージを使います。それ以前は互換性のある2.0プレビューパッケージを使います。
PNGの拡張子をSVGにするとベクタースプライトになりますか？ いいえ。改名ではピクセルをトレースしません。元のベクターを使う、図形を描く、適したラスターをトレースする方法でパスを確認してからUnityへ読み込みます。
Unityが正しく読み込めないSVGはトレースで直りますか？ 元の形状の再構築が必要な場合だけです。正しいパスがあり、生成アセットの種類や非対応の効果が原因なら、まず読み込みか書き出しの判断を直します。
参考資料
- Unity — Vector Graphics 3.0パッケージガイド — エディターバージョンの区分と、標準・Sprite・uGUIの方法。
- Unity — ベクター画像の操作 — 標準アセットの選択肢と非対応SVG機能。
- Unity — 画像読み込み設定 — UI Toolkitのベクター画像設定とテッセレーション。
- Unity — Vector Graphics 2.0パッケージマニュアル — 古い読み込み機能、シーン単位と回転中心、実験的な位置付け。
- W3C — SVGの埋め込み内容 — SVGがラスター画像を含められることの説明。
UnityのアセットがフラットなPNGやJPGから始まり、編集可能なパスが必要なら、PerfectVectorで変換します。シルエット、穴、不要な背景を調べ、実際に出荷するUnityコンポーネントと表示サイズでSVGを試してください。
