Unity / We Are GRIPHONE

UnityのuGUIでPNGの代わりにSVGを使ってみる

AvatarPosted by

本記事は GRIPHONE Advent Calendar 2022 6日目の記事です。

こんにちは、新規プロジェクトでUnityエンジニアをしているkuroitaです。

デザイナーさんに「ゲーム内の素材としてSVGファイルを使いたい」と言われたので、導入を検討してみました！理由としては、すでにゲーム外で使用しているSVGファイルに手を加えずそのままUnity側で流用できると運用が楽になるためだそうです。

確認環境

・Unity2020.3.25f1
・Vector Graphics2.0.0-preview.20

準備

UnityでSVGファイルをインポートして使用するためにはVector Graphicsというパッケージが必要なので、Package Managerから検索してインストールします。Unityの公式マニュアルはこちら。現在はまだプレビュー版となっているため、注意してください。パッケージにはSVG importerとVector Graphics APIが含まれています。インストールが終わったら、適当なSVGファイルを用意します。今回は仮のアイコン画像を作成後、比較のためにPNGとSVGそれぞれの形式で書き出しました。これで準備は完了です！

インポートしてサイズ比較

用意したSVGファイルをプロジェクトビューにドラッグ&ドロップするだけで、importerが勝手にインポートしてくれます。シーンへの配置は以下のどちらかの方法で行うことができます。

① 生成されたImportSettingsオブジェクトのGeneratedAssetTypeを
　 UI SVGImageに変更後、Hierarchyにドロップする
② 配置済みのオブジェクトにSVG Imageコンポーネントを追加し、
　 Source SVG ImageにSpriteを割り当てる

SVGファイルインポート後に生成されたSettings

PNGファイルは256*256サイズと一部64*64サイズを用意し、Unityにインポート後にSpriteAtlasにまとめてCrunch圧縮をかけました。

SpriteAtlasのサンプル

シンプルなデザインで作成したため頂点数が少なく、SVGファイルひとつあたりのデータサイズは1KB-10KBほどでした。SpriteAtlasのデータサイズが17.7KBとなったため、シンプルなデザインでもPNGをSVGに置き換えることによる容量削減はあまり期待できないかもしれません。SVGファイルは頂点数に比例してデータサイズも増加するため、複雑なデザインの場合、圧縮後のPNGファイルと比べて容量が増えてしまう可能性もあります。

見た目の比較

Canvas内にグレーの板を置き、その上に配置してみました。

配置後の状態
ゲームビュー

白い円の説明をします。
左：256サイズで書き出したPNGを256*256で表示しています
中央：SVGファイルをSVG Imageで256にサイズを合わせて表示しています
右：64サイズで書き出したPNGを256*256で表示しています

黒いアイコンの方はどれも上が256サイズで書き出したPNGで、下がSVGです。

64サイズを引き伸ばした右上の円は少しぼやけてしまっていますが、それ以外はPNG、SVGともにくっきりと表示されており、問題はなさそうです。
次に、全体を4倍に拡大して比較してみます。

右の円はかなり画質が荒れてしまっていますが、256サイズのPNGは気になるほど劣化していません。SVGはもちろん拡大の影響を受けず、くっきり表示されています。大きめのサイズを用意しておくことで、SVGを使用せずともPNGで複数サイズ表示の品質劣化に耐えることができるため、あまりメリットは感じられませんでした。

気になった点

  1. SVG Imageでは、Imageコンポーネントで設定可能なSlicedやTiledの設定ができません。これは正式版がリリースされるタイミングで解消されるかもしれませんが、大きな違いの一つと言えるでしょう。
  2. Hierarchyでのオブジェクト選択時に、割り当てられたSpriteのプレビューがInspectorでみれません。個人的には結構不便だと感じました。
  3. SVG ImageはImageクラスを継承していないため、併用する場合には注意して拡張やアクセスをしなければならないため面倒です。

今回は特殊なケースとして、ゲーム外で使用しているSVG形式の素材を流用したいという話でした。その素材が黒塗りで書き出されており、動的に色変更をしたいという要望がありました。それを実現するためにSVG Imageを拡張して黒塗りを白塗りに（color情報を無視するように）変更してから使用する、ということをしました。アセットバンドルからの読み込みや詳しい負荷計測などはしていませんが、他にも不便なケースが発生することが考えられます。

まとめ

本記事では、Vector Graphics2.0.0-preview.20を導入してUnityのuGUIでSVGを表示してみました。検証前はSVGを使用することで容量の削減や品質向上が見込めるかと考えていましたが、どちらの面でもあまりメリットを感じられませんでした。現時点ではプレビュー版であることと、導入コストを考えるとuGUIでのSVG Image使用は見送る方が良さそうだと思います。今回触れなかったVector Graphics APIは、動的メッシュ生成などを簡潔に行うためのAPIとなっているため、今後Shaderを使わずにリッチな演出を簡単につくれるようになるときがくるかもしれません。

今回の記事が、私と同じような境遇の方やSVG in Unityを調べたいと思っていた方のお役に少しでも立てれば幸いです。

明日以降も記事が更新されていくので、是非引き続きチェックしてみてください！最後までお付き合いいただきありがとうございました！

このエントリーをはてなブックマークに追加