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

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

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">SpriteUV2はおすすめ<a href="https://t.co/4jiY4HmBJe">https://t.co/4jiY4HmBJe</a></p>&mdash; harayoki (@harayoki) <a href="https://twitter.com/harayoki/status/857620136399745024">2017年4月27日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

----

![ 2017-04-28 1.22.31.png](https://qiita-image-store.s3.amazonaws.com/0/8302/9d501419-c41e-63fe-9d79-c9e88fd29fbf.png)
まず適当に画像にメッシュ分割を作ります。これで７３トライアングルです。ここでは全自動でなく手動でメッシュを調整しましたが、全自動でも十分に実用的なメッシュ分割になります。メッシュ分割のやり方は上記の動画をみているとなんとなくわかります。

<img width="409" alt=" 2017-04-28 1.36.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/8302/ddb94a8f-58f7-ed43-1165-95c77d42c03e.png">
書き出し設定を `UNITY_SPRITE` にします。

<img width="570" alt=" 2017-04-28 1.47.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/8302/cc570740-be3a-6d28-57a4-58996db8f251.png">
画面下部のBuildボタンを押すと、アトラス画像と `asset` ファイルが書き出されます。

<img width="388" alt=" 2017-04-28 1.37.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/8302/e75044b3-6f99-00cd-471c-34fd81c4254b.png">
書き出されたファイル２つをUnityのProjectウィンドウにドロップします。

<img width="354" alt=" 2017-04-28 1.37.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/8302/a6ae2e43-eb40-5ed6-f4d9-72e9f16f3c34.png">
右側のスプライトと思われるオブジェクトのインスペクタをデバッグ表示にしてみると、Texture設定が `missing` になっているので、

<img width="371" alt=" 2017-04-28 1.38.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/8302/6ea47b03-0e3a-9f48-12b9-f54dc03c6eb0.png">
書き出された画像を紐づけてやります。

<img width="310" alt=" 2017-04-28 2.00.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/8302/9c60d2a4-2b80-5edf-f661-2c5d1167bccf.png">
これでProjectウィンドウ側のスプライトの表示が変わります。（ちょっとその表示がはみ出ていておかしいですが、これで正しい状態のようです。）

<img width="474" alt=" 2017-04-28 1.38.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/8302/5924bb90-cdc2-fbf4-dae8-bd3df7b26f1f.png">
ステージにスプライトをドラッグすると、綺麗なメッシュ形状で分割された画像を確認する事ができました。

<img width="795" alt=" 2017-04-28 1.43.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/8302/687d125b-708a-4d02-dddb-a2e73ef39075.png">
比較として、Unityで自動メッシュ分割したスプライトは右のようになります。

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

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

以上です。

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