C++ ときどき ごはん、わりとてぃーぶれいく☆

USAGI.NETWORKのなかのひとのブログ。主にC++。

UE4 Plugin: SVG Importer Plugin

概要

UE4SVG をテクスチャーで扱いたかったけれど、 svgpp など使ってちまちま実装するよりも $19.99 で SVG Importer Plugin を買った方が楽そうだし、マーケットプレイスでも ☆5 が幾つもついているので試してみようかな、と思い試してみた記録。

SVG Importer Plugin

試した

SVG Importer Plugin はエンジンプラグインなので、 Epic Game Launcher からエンジンにプラグインを install し、プロジェクトのプラグイン設定で有効化すると使用可能になる。

プラグインが有効なプロジェクトで UE4Editor が動作中に .svg をプロジェクトの Content ディレクトリーへ放り込む、或いは UE4Editor の UI から明示的に Import 操作を行うと SVG Import Options が出現する

f:id:USAGI-WRP:20180510161355p:plain

ここで重要なのは "Import Type" (RGBAの絵として読み込むか、ディスタンスフィールドとして読み込むか)と、 "Import Resolution"(後から変えられない取り込み時の解像度)の2つ。大きく拡大して表示されるRGBAテクスチャーにしたい場合は "Import Resolution" を 4096x4096 にしておくとよい。

↓インポートに成功するとSVGテクスチャーのアセットが生成される

f:id:USAGI-WRP:20180510162042p:plain

↓適当なマテリアルアセットを作成し、テクスチャーにインポートしたSVGテクスチャーアセットを設定

f:id:USAGI-WRP:20180510162140p:plain

↓プレビュー等も問題なく動作

f:id:USAGI-WRP:20180510162335p:plain

↓4096x4096でインポートしておけばRGBAテクスチャーで拡大されても綺麗(アタリマエじゃが😅)

f:id:USAGI-WRP:20180510162407p:plain

↓32x32など小さい解像度でインポートしてしまうとそれ以上にはどうにもならなくなる

f:id:USAGI-WRP:20180510162532p:plain

↓32x32はアライ

f:id:USAGI-WRP:20180510162613p:plain

解像度は 4096x4096 でインポートしておけば、SVGテクスチャーアセットの設定で任意に小さく書き出す事もできるので、インポート時は特に理由が無ければ最大解像度でインポートしておくと良さそう。テクスチャーの書き出しも各種圧縮形式も簡単に選択するだけで対応できて便利も好い。

SVGテクスチャーアセットの設定からフィルターを変更すればドット感の高い低解像度テクスチャーにもできる

f:id:USAGI-WRP:20180510163622p:plain

↓同じSVGを無理やりディスタンスフィールドとしてインポートしてディスプレイスメントマップしてみたもの(無理やりだけどたぶんインポート機能そのものは問題なく扱える。)

f:id:USAGI-WRP:20180510165705p:plain

黄色のクルマのSVGの出典