Unreal EngineでSVGをインポート：Motion Designの形状を確認

Unreal EngineのSVG Importerは、Motion Designで形状を作るワークフローを提供します。EpicのSVGインポーターのチュートリアルでは、2Dベクターファイルから3D形状を作成する方法を説明しています。まず使用するエンジンのバージョンに合うプラグインと資料を確認し、穴、色、離れた部品を見分けられる小さな元データをインポートします。

これはSVGを実行時のUI画像として表示する用途とは異なります。テクスチャのプレビュー、シーンのアクター、ウィジェットのレンダラーは、それぞれ異なる成果物です。本記事は、シーンの形状にするためのアートワークの準備と、生成されたオブジェクトがモーションデザインに適しているかの判断に焦点を当てます。

例は、中央が空いたバッジと離れたひし形を組み合わせた独自の図形です。プロジェクトで試すために資料に基づいて示した手順であり、Unrealでのインポートや押し出しテストの結果報告ではありません。

アートワークを変更する前に用途を選ぶ

グラフィックを何にする必要があるかを決めます。SVGという拡張子だけでは答えは決まりません。

EpicのMotion Designクイックスタートは、放送用グラフィックのエディタープラグインを説明しています。インターフェースはUMGに似ていますが、ウィジェットの範囲外の機能も含みます。似ているという理由で、通常のUMG Imageが任意のSVGファイルを読み込めるとは判断できません。

同じ元データを複数のエンジンで使う場合、UnityのSVGインポートガイドでは別のインポーターと出力先の判断を扱っています。一方のエンジンが受け付けても、もう一方のファイル対応を確認したことにはなりません。

エンジンのバージョンに合うプラグインを確認する

EpicのSVG Importerプラグインの一覧には、現在Betaの表示があり、カテゴリはExperimentalです。特に大きく依存する仕組みを構築する前に、納品するプロジェクトで機能を検証すべき理由として受け止めてください。

公式チュートリアルにはUnreal Engine 5.4と5.5のタグが付いています。現在のAPI資料は別の参照資料なので、古い動画のパネルやラベルが別のインストール済みバージョンと完全に一致するとは考えないでください。

Motion Designの設定では、対応するクイックスタートの手順に従い、Motion DesignとStorm Sync Motion Design Bridgeを有効にします。そのプロジェクトで対応するSVG Importerが利用可能で、有効になっていることも確認します。エディターから再起動を求められたら、アートワークを調べる前に従ってください。

まず小さなテストレベルを使います。クイックスタートでは、空のレベルまたはテンプレートを用意し、Motion Design > Create Defaults > Spawnを実行する流れを説明しています。複雑なシーケンスから切り離して試すと、アクターの不足、カメラの問題、プラグインの設定不備と、不正な元データを区別しやすくなります。

穴のあるバッジと離れた部品を一つ準備する

この独自の例をhollow-badge.svgとして保存します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 140">
  <path fill="#147D78" fill-rule="evenodd"
    d="M24 24H116V116H24Z M46 46H94V94H46Z"/>
  <path fill="#EF8067" d="M150 30L168 48L150 66L132 48Z"/>
</svg>

青緑色のパスは、中央が空いた正方形の枠を作ります。サンゴ色のひし形は別のパスで、枠との間に空間があります。ファイルには背景の長方形、ストローク、文字、フィルター、外部画像、アニメーションはありません。

これらを省いているのは意図的です。複雑なイラストを試す前に、中央が開いたままか、ひし形が離れたままか、両方の色が意図どおりに表現されるかという、有用な点を確認できます。

自身の元データもベクターエディターで確認します。写真をSVGコンテナーに包んだだけなら、埋め込みラスターの確認方法でその状態を特定できます。ビットマップの名前を変えたり包んだりしても、この形状の検証に必要な閉じた輪郭は得られません。

編集可能なマスターを保持し、受け渡し用のコピーを書き出します。まず単純な閉じた塗りの図形を基準にし、効果、グラデーション、複雑なクリッピングはプロジェクトで必要かつ処理結果を確認できる場合だけ追加します。APIリファレンスに似た名前のクラスが存在しても、その機能の完全な互換性が保証されるわけではありません。

一つのファイルをインポートし、生成されたアセットを特定する

実験用のプロジェクトコンテンツフォルダーを選びます。Epicの一般的なアセットインポートガイドでは、Content BrowserのImportボタンとドラッグ＆ドロップを説明しています。対応するSVGインポーターを有効にして小さなSVGを選び、インストール済みバージョンのインポーター固有の設定と診断情報を確認します。

ファイルが拒否されたり、想定したインポーターが現れなかったりする場合は、まずエンジンのバージョンとプラグインの設定を確認します。利用できないインポート機能は、アートワークを何度単純化しても修復できません。

インポート後は、配置前にアセットの種類を特定します。EpicのSVGImporter APIには、SVGデータ、SVGアクター、動的メッシュコンポーネントが含まれます。これらの区別は重要です。元データのアセットがあるだけでは、意図した形状がシーンに存在する証拠にはなりません。

使用するバージョンのSVGアクター配置手順で、アセットをテストシーンに入れます。Motion DesignのツールボックスにはSVGアクターがあります。配置結果を選択し、厚み、マテリアル、アニメーションを変更する前に正面から確認します。他のメンバーが再現できるよう、使ったアセットとアクターを記録します。

インポートしたアセットを保存し、元のSVGも保持します。Unrealの一般的なインポートガイドでは、インポートしたコンテンツがプロジェクトのアセットに保存されることを説明しています。後の編集や再インポートには元ファイルも重要です。

穴、塗り、別々のオブジェクトを確認する

まずバッジの正方形の穴を確認します。対照的な背景で見て、厚みがある場合は別の角度からも確認します。中央を覆う薄い色の面は、正面からだと穴に見えることがあります。合格とする基準は、空いているべき領域が本当に空いていることです。

中央が埋まった場合は、効果を追加する前に元データのサブパスと塗りの動作を調べます。SVGの穴が埋まる問題のガイドでは、塗った内側領域と本物の穴が平面プレビューでは似て見える理由を説明しています。

次にひし形の横の空間を確認します。意図しない橋、余分な面、背景領域がないか探します。その後、アニメーションに必要なオブジェクトを選択します。ひし形を独立して動かす必要があるなら、利用できるアクター／コンポーネントの構成で枠を変えずに動かせるか確かめます。見た目で離れたアクセントがあるだけでは、必要な選択構造を備えているとは限りません。

形状を確認した後に塗りを確認します。作品で使うマテリアルと照明の条件下で、青緑色の枠とサンゴ色のひし形を元データと比較します。陰影のある側面が正面より暗いという理由だけで、元の色の誤りと判断しないでください。

厚みに関する問題では、SVGの押し出しチェックリストに元の形状を調べるための問いがあります。Unreal固有のコマンドガイドではなく、このテストで外観が良好でも、製造用の水密なメッシュであるとは確認できません。

曲線のあるアートワークを確認し、意図を持って再インポートする

正方形の例には曲線がありませんが、ほとんどのロゴにはあります。EpicのSVGImporter APIは、スプラインをポリラインに変換する品質設定を説明しています。元の曲線と生成された表現は、それぞれ確認する必要があります。

丸みのあるロゴでは、ショットで使う最も近いカメラ距離で外側の曲線と最小の穴を確認します。輪郭が角張って見える場合は、エンジンのバージョンに合う変換設定を調べます。元データがベクターという理由だけで、任意の最大値に設定しないでください。

Epicのバージョン指定された5.4のSVGDataリファレンスでは、品質の上書き設定を変更すると再インポートと形状の再生成が起きると説明しています。後続の作業すべてが影響を受けないと考えるのではなく、基準状態を保存し、元データや変換設定の変更後にシーンを再確認する理由として扱ってください。その資料のプロパティ名が、以後すべてのエディターパネルに存在する保証はありません。

再インポート後に、穴、隙間、マテリアル、オブジェクト制御を再度確認します。アートワーク一式を整理する前に、実際の納品環境でシーンを試してください。このガイドは、パッケージ化した実行環境への対応、ブラウザー同等のSVG描画、プラグインのあらゆる用途での性能を保証しません。

ラスターの紋章を再構築する場合

ベクターマスターがなく、元データが単純なPNGやJPGの紋章なら、PerfectVectorの画像からベクターへのワークフローで静的SVGの候補を準備できます。デザインに合わせて切り抜き、プレビューで穴と離れたアクセントを確認し、元データと候補を比較します。採用したSVGをダウンロードし、Unrealで同じ形状チェックを行います。

ベクター化は、シーンの単位を選んだり、リグを作成したり、制作用マテリアルを割り当てたり、特定のメッシュ構造を保証したりしません。既存のベクターマスターがあればそれを使います。写真や複雑な描画効果は、外観を保ちやすいならラスターのままにします。単純な幾何学的バッジなら、ピクセルから再構築するより、必要な少数の図形を直接作る方が細かく制御できる場合があります。

引き継ぎ用に、元ファイル、エンジン／プラグインのバージョン、インポーター設定、空いているべき領域、独立して動く部品、確認時のカメラ距離を簡潔に記録します。ブログのアートワーク準備ガイドは、このエンジン固有の手順より前の元データの判断を扱います。

よくある質問

Unreal EngineはSVGをインポートできますか？ はい。EpicはMotion Designの形状に使うSVG Importerを提供しています。エンジンのバージョンに合う機能と資料を確認し、インポートされたアセットとシーンの結果を検証してください。

SVGをインポートできれば、UMGでも実行時に任意のSVGを表示できますか？ いいえ。Motion Designの形状ワークフローは、通常のUMGウィジェットでの任意の実行時SVG読み込みを保証しません。UIに必要な描画方法を選び、テストしてください。

インポート後にSVGの穴が埋まって見えるのはなぜですか？ 元データが本物の穴か、内側を塗った領域かを確認し、サブパスと塗りの動作を調べます。正面だけに頼らず、対照的な背景でインポートされた形状を確認してください。

PNGロゴをUnrealですぐ使える3Dオブジェクトにできますか？ ベクター化は静的な元の形を復元できますが、Unrealのシーンを完成させるものではありません。採用したSVGをインポートし、生成された形状とマテリアルを確認して、プロジェクトに必要なオブジェクト制御を検証します。

参考資料

1. Epic Games — インポートとSVGインポーター — Motion Designの形状経路とチュートリアルの対象バージョン。
2. Epic Games — SVG Importerプラグイン — プラグインの範囲、Beta表示、Experimentalカテゴリ。
3. Epic Games — Motion Designクイックスタートガイド — プロジェクト設定、エディターでの範囲、SVGアクターのツールボックス。
4. Epic Games — アセットの直接インポート — Content Browserでの一般的なインポートとアセットの保存。
5. Epic Games — SVGImporter API — データ、アクター、動的メッシュのクラス、スプライン変換の概念。
6. Epic Games — SVGData、Unreal Python 5.4 — バージョン指定された品質の上書き設定と再生成の動作。

一式をインポートする前に、一つのバッジの穴、離れた部品、シーンの動作を検証します。ラスターしか残っていなければ、SVGの候補を準備し、形状を確認して、採用したファイルをUnrealプロジェクトで検証してください。