GodotのSVG読み込み：Texture2DとDPITextureで鮮明に表示
Texture2DとDPITextureを選んで、ぼやけるGodotのSVG表示を改善します。ラスターサイズ、オーバーサンプリング、対応図案、実際に使う縮尺でのアイコンを確認します。
目次
GodotのSVG読み込みは、通常、アセット読み込み時にSVGをピクセルへ変換します。そのため、元データに整ったベクターパスがあっても、テクスチャを拡大するとぼやける場合があります。ビューポートの拡大縮小に適応させたいSVGアイコンには、現在の読み込み機能のDPITextureも使えます。異なるオーバーサンプリング倍率で元データを再びラスター化できます。画像読み込みガイドが両方を説明しています。
まず読み込んだリソースと、プロジェクトでの拡大縮小方法を確認します。すでに有効なSVGを再トレースしても、低解像度テクスチャを大きな画面へ引き伸ばす問題は直りません。
表示動作に合うSVG読み込み形式を選ぶ
次の2つは、Importドックのリソース形式です。DPITexture自体はTexture2Dを継承するので、無関係なクラス群ではありません。DPITextureリファレンスは実験的なクラスとも示しています。採用前に、プロジェクトのGodotバージョンに合う説明を確認してください。
| アセットに必要なこと | 最初の選択 | 検証すること |
|---|---|---|
| 表示サイズが分かっているスプライトやアイコン | 既定のTexture2D読み込み | 生成ラスターに最大の用途に足りるピクセルがあるか |
| ビューポートのオーバーサンプリングへ適応するSVG UIアイコン | DPITexture読み込み | ビューポートと縮尺設定に合って再ラスター化するか |
| Node2DやControlの縮尺が変わるアイコン | DPITexture。ノード縮尺のオーバーサンプリングは別に検討する | ノードの設定と、繰り返す縮尺変更の負荷 |
| 写真、描いた質感、意図的なピクセルアート | 適切なラスター元画像を保つ | フィルターと表示縮尺で目的の見た目が保たれるか |
| シーン内で編集可能なパスや衝突形状 | 別の形状作成手順 | シーンに必要な実際の形状があるか |
テクスチャ読み込みが与えるのはテクスチャリソースです。パス編集、衝突形状、性能は別の要件として扱います。SVGのファイル名は、それらが処理される証拠ではありません。ブラウザーのシーンでは、PixiJSの形状とテクスチャの方法を比較すると、同じSVGが描画へ違う経路で進むことを確認できます。
まず通常のTexture2D読み込みを確認する
アイコンフォルダー全体を変える前に代表アセットを1つ使います。曲線、細い隙間、UIで重要な小さな細部のある図形を選びます。
- SVGをプロジェクトに置き、FileSystemドックで選びます。
- Importドックを開き、形式がTexture2Dか確認します。
- SVG > ScaleとProcess > Size Limitを調べ、設定変更後に再読み込みします。
- テクスチャを目的のスプライトやUIコンポーネントへ配置し、表示サイズを確認します。
SVG > Scaleはラスター化サイズを変え、値を上げると画像が大きくなります。2Dでのテクスチャサイズにも影響するので、変更後にノードやレイアウトの寸法を確認します。Process > Size Limitは読み込み寸法を制限できます。テクスチャ読み込みリファレンスが両方を説明しています。
簡単なサイズの例として、幅32ピクセルのラスターを画面上の幅128ピクセルで表示すると、拡大されます。元のベクター曲線は、読み込み済みのラスターへピクセルを足しません。用途に合うテクスチャを作るか、UIにオーバーサンプリングが合う場合にDPITextureを試します。
すべてのSVGの縮尺へ任意の大倍率を使わないでください。まず実際の最大用途を決め、最小用途も確認します。大きな持ち物一覧のプレビューで良いリソースでも、小さなボタンでは細い隙間を失う場合があります。
DPITextureを適切なオーバーサンプリング設定で使う
適応する方法を試すには、FileSystemでSVGを選び、形式をDPITextureへ変えて再読み込みします。同じUI配置を使い、ラスター化方法の変更が目的の縮尺での不一致を直すか、という1つの問いを比較します。
DPITextureはSVGの元データを保持し、オーバーサンプリングに合うラスターを作れます。base_scaleは元テクスチャの縮尺を制御するもので、編集可能なシーンのパスへ変えるものではありません。DPITextureクラスの説明をご覧ください。
2つの縮尺変更を確認します。
- **ビューポートの拡大縮小：**画像のオーバーサンプリングは、ビューポートの倍率が変わるとベクター元データを再描画できます。SVGをDPITextureとして読み込むことで有効にします。
- ノードの拡大縮小：Node2DやControlのScaleに基づくオーバーサンプリングは既定で無効です。必要な動作なら、対象ノードのOversampling with Scaleを有効にします。
Godotのオーバーサンプリングガイドが、この区別を説明しています。縮尺を頻繁に変えると、テクスチャの再描画でCPU処理が必要になることも述べています。広く適用する前に、出荷するシーンで拡大縮小のアニメーションを試します。
2Dエディターはズーム中に自動再サンプリングでき、便利なプレビューです。プロジェクトを実行し、実際のビューポート動作も試してください。Viewportのストレッチモードでは、基準のビューポートサイズでシーンを描いてからウィンドウへ拡大縮小するため、最後の拡大縮小もUIの見た目を左右します。ストレッチモードの説明がCanvas Itemsとの違いを説明しています。
Godotが再現できる図案を準備する
読み込み機能の変更は描画サイズの問題を解決します。オブジェクトの欠落やシルエットの変化には、元図案の確認が必要です。
実際のパスを探す
ベクターエディターでSVGを開き、見える図案を選びます。アイコン全体が配置された1枚のビットマップなら、Godotを調整する前に調べます。SVGの<image>はラスターを含められ、MDNの要素リファレンスが説明しています。囲みを再ラスター化しても、小さな埋め込みPNGになかった整った曲線は復元できません。
埋め込みラスターのチェックリストで、配置されたピクセルと編集可能な図形を区別します。ベクター原版があれば、そこから書き出します。セットを準備するなら、UIキットのSVGガイドでキャンバスと余白を統一します。
装飾の文字をパスにする
GodotのSVG読み込みは、編集可能なSVGテキストを描画しません。編集可能なテキスト原版を残し、納品コピーで装飾文字をパスへ変換します。InkscapeではPath > Object to Pathです。Godotの文字付きSVGの読み込みに手順があります。
翻訳や頻繁な編集が必要なボタンラベルは、UIのテキストとして残し、アイコンを別に読み込みます。UI全体のアウトライン化は後の変更を難しくします。
複雑な効果を別に試す
GodotはSVG描画にThorVGを使います。ThorVGのSVG解釈には対応範囲があり、SVGの概要はアニメーション、インタラクティブな動作、マルチメディアを非対応に挙げています。エンジン全体の機能は、特定のSVG機能がGodotの読み込みで使える保証ではありません。
バッジが細部を失ったら、書き出したSVGを、簡単な塗り図形のコピーと比較します。必要な効果を1つずつ戻します。複雑な図案をより確実に保ち、拡大縮小できる元図形が不要なら、ラスター書き出しを残します。
複雑さを減らすためだけに細い開口部を簡略化で消さないでください。合格の基準は、穴や隙間を含む目的のシルエットです。
最初に見える不一致を診断する
元ファイル、読み込み形式、SVG縮尺、ノード縮尺、ビューポート設定、期待する表示サイズを記録します。その後、症状に関係する設定を変えます。
| 症状 | 最初の確認 | 次に役立つ試験 |
|---|---|---|
| エディターでは鮮明だがゲームではぼやける | 既定の読み込み寸法と実際の表示サイズ | 十分なラスター寸法を生成するかDPITextureを試す |
| DPITextureでビューポートのサイズ変更は改善するが、ノード拡大は改善しない | ノード縮尺のオーバーサンプリング | そのノードのOversampling with Scaleを確認する |
| UI全体がぼやける | ビューポート描画と最終ウィンドウの拡大縮小 | 個別アイコンを編集する前にストレッチ動作を比較する |
| 文字が消える | SVG内の編集可能なテキスト | アウトライン化した納品コピーを読み込む |
| 発光、動き、複雑な細部が変わる | SVG機能の互換性 | 単純な図形のみの書き出しやラスターを比較する |
| 画像の一部だけギザギザになる | 埋め込みラスター | 元のオブジェクトを調べ、配置された画像を探す |
| フィルターで輪郭が変わる | CanvasItemのテクスチャフィルター | 実際のサイズで図案に合うフィルターを比較する |
Godot 4の2Dテクスチャフィルターは、プロジェクトの既定値とCanvasItemのプロパティで設定します。古いチュートリアルは、現在はそこにない読み込み設定を案内する場合があります。画像読み込みマニュアルが変更を説明しています。フィルターは既存ピクセルの見た目を変えられますが、不足する元の細部は修復しません。
Godot以外でもぼやけるなら、より広いSVGのギザギザ表示の診断に従います。エンジンへ渡す前から粗い縁があるかを特定できます。
実際のUIでアイコンを採用判断する
明るい背景と暗い背景で、目的の最小・最大配置を試します。曲線、最も細い隙間、縁の透明度を確認します。実行ウィンドウのサイズを変え、ユーザー向けのUI倍率設定を操作し、使う場合はノード拡大縮小のアニメーションも試します。
対象ビルドで繰り返します。別の担当者が再現できるよう、選んだ読み込み設定を元アセットとともに保管します。セットでは最も簡単なシルエットだけでなく、最も密なアイコンと、重要な細部が最も細いものも試します。
小さなSVG元ファイルは、GPUメモリー使用量が少ない証拠ではありません。ここで扱う両方の方法は、表示用のラスターテクスチャを作ります。メモリーやフレーム時間で選ぶなら、読み込んだリソースと実際のシーンを計測します。
PerfectVectorではどう進めるか
フラットなPNGやJPGしかなく編集可能なSVG図形が必要なら、Godot読み込み前にPerfectVectorが適しています。代表アイコン1つをPerfectVectorの変換ツールへアップロードし、トレースした輪郭と内部の隙間を原画と比べ、ダウンロードしたSVGを調べてから読み込み形式を選びます。
形が正しい場合だけトレースを採用します。不要な背景を削除し、目的の領域が編集可能で、小さい穴が修正後も残ることを確認します。その後、既存のSVGと同じGodotのサイズとオーバーサンプリング確認を行います。
写真、柔らかな描画効果、意図的なピクセルアートは、それが望む結果ならラスターを保ちます。単純な幾何学的アイコンは直接描くほうが簡単かもしれません。トレースは元の図形の再構築に役立つもので、Godotの読み込み設定や最終ゲームの検証を行いません。
よくある質問
GodotでSVGファイルを読み込めますか？ はい。既定のTexture2Dは読み込み時にSVGをラスター化します。現在の読み込み機能には、オーバーサンプリングで再ラスター化するSVG用のDPITextureもあります。プロジェクトのバージョンに合う説明を確認してください。DPITextureは実験的とされています。
GodotでSVGがぼやけるのはなぜですか？ 固定の読み込みラスターを、そのピクセル寸法より大きく表示していないか確認します。ビューポートのストレッチ、フィルター、ノード縮尺のオーバーサンプリング、埋め込みラスターも調べます。再トレースや置き換えの前に原因を直します。
DPITextureはシーンで編集可能なSVGパスを保ちますか？ 再ラスター化用のSVG元データは保ちますが、テクスチャリソースです。読み込みは、シーンのパス編集やゲームに必要な衝突形状の自動作成を提供しません。
参考資料
- Godot — 画像の読み込み — SVG読み込み形式、文字の準備、描画機能の制限、フィルター設定。
- Godot — DPITexture — 継承、保持するSVG、拡大縮小、実験的な位置付け。
- Godot — 複数の解像度 — ビューポートのストレッチ、画像のオーバーサンプリング、ノード縮尺、再ラスター化の負荷。
- Godot — ResourceImporterTexture — 通常の読み込み機能のラスター倍率とサイズ制限。
- ThorVG — ThorVGについて — SVG解釈機能の対応範囲。
- MDN — SVGのimage要素 — SVGがラスター図案を含める仕組み。
GodotのアイコンがフラットなPNGやJPGから始まり、編集可能な図形が必要なら、PerfectVectorで変換します。シルエット、小さな隙間、不要な背景パスを確認し、プロジェクトの表示サイズと縮尺設定でSVGを試してください。
