Unity
Spine
spriteUV2

SpriteUV2からUnityへスプライトを書き出す

More than 1 year has passed since last update.

SpriteUV2というソフトがとても良いです。前から知ってはおりましたが、CGWorld誌に紹介されていたので試しに買ってみたところこれが大当たり。 https://www.spriteuv.com/

画像から透明部分を削除した綺麗なメッシュデータを自動で作成し、各種メッシュ系フォーマット(fbx,ob)でエクスポートしてくれ、そのデータは3DソフトやUnityで3Dメッシュとして取り込む事ができます。複数のメッシュ(UVつき画像)データを読み込んで1つに統合することもできます。扱う画像が1024x1024までなら無料で使えます。有料版でもお安いです。たったの$20。

さて、ここで3Dデータとしてでなく、Unityにスプライトとして書き出しメッシュデータを読み込ませる手順に、わかりづらい部分があったので解説をしておこうと思います。(今後のバージョンアップでわかりやすくなる可能性は大いにあり。)


 2017-04-28 1.22.31.png
まず適当に画像にメッシュ分割を作ります。これで73トライアングルです。ここでは全自動でなく手動でメッシュを調整しましたが、全自動でも十分に実用的なメッシュ分割になります。メッシュ分割のやり方は上記の動画をみているとなんとなくわかります。

 2017-04-28 1.36.28.png
書き出し設定を UNITY_SPRITE にします。

 2017-04-28 1.47.37.png
画面下部のBuildボタンを押すと、アトラス画像と asset ファイルが書き出されます。

 2017-04-28 1.37.38.png
書き出されたファイル2つをUnityのProjectウィンドウにドロップします。

 2017-04-28 1.37.59.png
右側のスプライトと思われるオブジェクトのインスペクタをデバッグ表示にしてみると、Texture設定が missing になっているので、

 2017-04-28 1.38.11.png
書き出された画像を紐づけてやります。

 2017-04-28 2.00.57.png
これでProjectウィンドウ側のスプライトの表示が変わります。(ちょっとその表示がはみ出ていておかしいですが、これで正しい状態のようです。)

 2017-04-28 1.38.52.png
ステージにスプライトをドラッグすると、綺麗なメッシュ形状で分割された画像を確認する事ができました。

 2017-04-28 1.43.59.png
比較として、Unityで自動メッシュ分割したスプライトは右のようになります。

そのうち、Unity側でももっと綺麗なメッシュを作る機能が搭載されるかもしれませんが、現在はUnityの自動分割より綺麗なメッシュをエクスポートする事ができるようです。

 2017-04-28 1.36.17.png
なお、本当の手順は、この書き出し設定ダイアログで説明されているように、"ダミーの画像をUnityに配置して、その metaファイル内に記述のあるGUIDをこのダイアログのGUID欄にコピーしてからファイルを書き出して、ダミー画像を書き出された画像で置き換えて使う"、です。SpriteUV2からUnityのプロジェクトフィルダ内に直接ファイルを書き出すと良いのかと思います。この通りやるのが若干面倒だったので、上で解説した方法(インスペクタから紐付け)をやってみたところ全く同じ状態になったので、楽な方法として紹介しました。が、もし何か問題あれば正しい手順に乗っ取ってください。

以上です。

さて、SpriteUV2公式の説明をみていると、ツールではSpineのデータも扱う事ができそうに見えます。が、実際にはSpriteUV2にSpineのメッシュデータを複数取り込んで1つにまとめる事は出来ますが、そこから書き出したデータをSpineで取り込むことは現状出来ませんでした。(しかし、ゴニョゴニョっと裏技的作業をするとできるみたいです。)