Adobe Animate で作成したSVG をUnity で表示してみる
こんにちは、ザ・ストリッパーズ株式会社 プログラマーの布浦です。
Unityでスマホ向けソーシャルゲームの開発をしています。
社内で研究開発の時間を作ろう！ということになりました。
そこで開発ブログを書きたいと提案したところ、快諾してもらえたので、noteで始めてみることにしました。
個人的にUnityで試してみたことなどを、ゆるく書いていけたらと思います。
自社開発ゲーム「ハッピーキャンディ」
「ハッピーキャンディ」は自社開発の謎解き・脱出ゲームです。
こちらはすでにリリースされているゲームなのですが、研究開発にあたり、ゲーム内の素材を使ってもよいと許可をいただけました。
そのためnote内ではハッピーキャンディのキャラクターが登場します。
気になった方はぜひDLして遊んでみてください。
開発の前段階で、ハッピーキャンディでSVG（ベクターグラフィック）は使えないか？という調査をしたのですが、
今回のnoteはそのときの調査を元に書いています。
スペック
• Unity2019.3
• Vector Graphics | 2.0.0-preview
調査当時から時間が経っているので、最新版で調べ直しました。
Unity Vector Graphics Package について
Vector Graphics Package はPackage Manager でインポートできるパッケージです。
SVG Importer が含まれていて、.svg 拡張子のファイルをUnityにインポートするとMesh に変換して、かつSprite として扱えるようにしてくれます。
ハッピーキャンディのキャラクターラフはAnimate のブラシツールで描かれており、ベクターグラフィックでした。
SVG形式でunity にインポートできれば、
• iPad Pro など画面の大きい端末できれいに見えるかも
• ファイルサイズの削減ができるかも
こんな期待があったため、試してみることにしました。
Animate からSVG を書き出す
Animate のメニュー「ファイル -> 書き出し -> イメージを書き出し（旧式）」からSVGを書き出せます。
表示しているフレーム内の要素が全て書き出されるので、キャラクター1体だけ書き出したい場合はMovieClip 化します。
あとは書き出した.svg をUnity に入れるだけです。
Vector Graphics Package を入れておけば、SVG Importer によってSprite としてインポートされます。
Importer の設定で「Pivot: SVG Origin」にするとSVGの基点、つまりAnimate 上でのMovieClip の基点が反映されるので便利だと思いました。
SVG の最適化について
Unity 上ではSVG はMesh に変換されるので、頂点数が少ないほど軽いということになると思います。
Animate で線と塗りに分けた素材と、塗りだけの素材をUnity に入れてみた結果、画像のようになりました。
元の.svg ファイルのサイズは 線＋塗り2KB、塗りのみ4KB なので、SVGの最適化 = Unity上での最適化になるというわけではないようです。
Importer の設定を変更することでMesh の細かさなどを調整できます。
（それぞれの設定値の説明はPackage のマニュアルに記載されています）
あまり荒くすると、頂点数は減るものの、カクカクしてしまいます。
Vector Graphics Package で出来ること
UIでもSVG Image が使えます。
試しに設定のUIをSVG Image で作成してみましたが、今までのUI Image と同じ要領で、Canvas に表示・レイアウトすることができました。
ただ、現状では9slice が使えなかったり、制限はありました。
Vector Graphics Package で出来ないこと
"また、現段階では SVG ファイルインポートを含む Unity の新しい Vector Graphics パッケージとの統合はされていません。こちらも対応に向け準備中です。"（上記記事より）
最近ではUnity 上で2D のスケルタルアニメーションも作成できるらしいのですが（私はまだ使ったことがないのですが）、SVGは対応されていないようです。
ハッピーキャンディで採用されなかった理由
ハッピーキャンディは謎解き・脱出ゲームで、多数のキャラクターが登場し、ステージごとにシチュエーションも違います。
またアニメーションもコマアニメで作られる予定でした。
SVGはSpriteとして扱えるので、コマアニメも出来るのですが、コマごとに別の絵としてファイルをインポートするとなると、Atlas化できるビットマップより逆にサイズが増えてしまう可能性がありました。
また、頂点数など最適化を意識してしまうと、キャラクターの絵作りに制限ができてしまうこともあり、ハッピーキャンディでは従来通りビットマップが採用されました。
やってみた感想
現状では、元の絵がすべてベクターグラフィックであっても、すべての素材をSVGにしてゲームを作るのはなかなか難しそうです。（もちろんゲームによると思いますが）
でももうUIとしても使えますし、今回は触れていませんがグラデーションなども使えるようなので、ベクターグラフィックに適した素材なら部分的に使っていけそうです。
私はIllustrator やAnimate などで簡単なベクターグラフィックを作成することはなんとか出来るものの、モデリングツールはほぼ使えないため、Meshデータを作るのはかなりハードルが高いと感じていました。
そのためベクターグラフィックからMeshデータが作成できるのは魅力的だと思っています。
拡大しても荒れない絵にはロマンがあります。
もし将来的にスケルタルアニメーションが対応されたら、2Dツールしか使えなくても、UnityでMesh +スケルタルアニメーションを使った絵作りなどできそうで、楽しみです。
宣伝
ゲームのリンクをもう一度貼っておきます！
LINEスタンプもあります！
この記事が気に入ったらサポートをしてみませんか？