2Dアニメーションソフトウェア「Spine」のデータをUnityのMecanimで動かす(20150319追記)


#はじめに…のその前に(追記：20150319)
2015/2/Mあたりで公式ランタイムがMecanimに対応したようです。
SpineでExportしたデータをUnityで取り込むとAnimator Controllerが生成されるので、それを右クリックすればMecanim対応のオブジェクトが生成されます。
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/56177/e5f51510-a71b-e66c-cd9c-abfff62fedcd.png)

但し、どうやら互換性のない修正点が発生している模様。
またキリのいいところでまとめたいですが、ヘレメンツ様のブログで解決策を記載されていましたので、紹介させて頂きます。
<B>
technostallion
【Unity】【Spine】UnityランタイムのMecanim対応に伴う変更点
[http://helementsof.hatenablog.com/entry/2015/02/20/231252](http://helementsof.hatenablog.com/entry/2015/02/20/231252)
</B>
旧ランタイムで作成したスクリプトと互換性がなくなるのはちょっと困りものですが、
公式が対応してくれたのはやっぱりうれしいですね！

#はじめに
<B>前回の記事「[Spineでプロ生ちゃんに動いてもらう](http://qiita.com/Mavoroshi_Oni/items/5317f83b23fd76ef9b6b)」で
Spineで作成したキャラクタをUnityのスクリプトを使って動かしてみましたが、
今回非公式ランタイム「unitySpineImporter」を使うことでMecanimを使用できるみたいでしたので試してみました。</B>

公式ランタイムと比較して使ってみた感想としては、良し悪しあるかなーという感じですが、
個人的な覚書も含めて記事にしておきたいと思います。
<B>■良い点</B>
・Mecanimが使える
・見た目2Dだけど表裏で見た目が変わる(単純な左右反転ではない)
<B>■悪い点</B>
・アニメーション中に画像差換えすると両方の画像が表示されてる。
　(個人的には致命的だと思う。作り方や修正方法があるかも？ですがわかりません。)
・画像の作りによっては裏側が悲惨な事になる。
 
#準備するもの
<B>1.2Dアニメーションソフトウェア「Spine」でエクスポートしたデータ</B>
　atlas,json,pngの3点セットです。
　今回はSpineでのアニメーション作成については説明を割愛します。
　
　今回使用するキャラクターは[RPGドット(略してRド)：http://www.geocities.co.jp/Milano-Cat/3319/](http://www.geocities.co.jp/Milano-Cat/3319/)さんの素材を使わせて頂く事にしました。
　
　元々の素材－－－＞![_mon_079_Master.png](https://qiita-image-store.s3.amazonaws.com/0/56177/57073ddb-014b-ee7a-0c14-8c6afb12a84d.png)

　バラした後↓
　![Spipne.png](https://qiita-image-store.s3.amazonaws.com/0/56177/32a14feb-5e31-5f54-76f8-6336c7079e1b.png)

　※盾は別のキャラクターから切り抜いてきました。
　
　
<B>2.unitySpineImporter</B>
　こちらから最新版をダウンロードしてUnityのプロジェクトにImportして下さい。
　2015/01/22時点の最新版はv0.4βです。
 　[https://github.com/nicloay/unity-spine-importer/releases](https://github.com/nicloay/unity-spine-importer/releases)
 
　※公式のランタイムは無くてもよいです。

#参考になりそうなもの
 ・<B>Unity spine import and mecanim (Youtube動画)</B>
　[https://www.youtube.com/watch?v=7MfUAelg9hQ](https://www.youtube.com/watch?v=7MfUAelg9hQ)
　
　unitySpineImporterの使用方法について解説した動画です。
　そもそも検索してもヒット数がめちゃ少ないんですが･･･(；´Д｀)
 
#使ってみる
　では使ってみたいと思います。
　
　**1.「準備するもの」で記載したものを準備する。**
　　多分Projectは下記のようになってると思います。
　　Spineデータの拡張子は見えてませんが、上からatlas,png,jsonです。
　　![111.png](https://qiita-image-store.s3.amazonaws.com/0/56177/71a31614-b3aa-13f4-61c3-f9c10bb702d2.png)

　**2.atlasファイルを右クリックして「Spine build prefab」を実行する**
　　![222.png](https://qiita-image-store.s3.amazonaws.com/0/56177/8b6ea8ce-6d57-d811-8e18-fe3379bf6ea9.png)

　**3.下記ダイアログが出てくるので、そのままGenerateボタンを押下する**
　　詳細はよくわかんないんだけどね(ぉぃ)
　　![333.png](https://qiita-image-store.s3.amazonaws.com/0/56177/297e266a-0ed8-fdff-9bd2-f7634514d06c.png)

　　成功したらPrefabが生成されます。AnimatorControllerも作ってくれてます。
　　![555.png](https://qiita-image-store.s3.amazonaws.com/0/56177/2a1765ba-d5c6-3962-bf45-7d2005a71d8a.png)

　
  **4.まずはアニメーションの動作確認をしよう**
　　これでAnimatorの設定変えたりして使うことができるのですが、
　　その前に各アニメーションの動作確認をしましょう。
　　
　　というのも、unitySpineImporterでPrefabを作成した場合は、
　　公式ランタイムと違ってパーツごとに奥行きがついています。
　　↓こんな感じ
　　![666.png](https://qiita-image-store.s3.amazonaws.com/0/56177/c2fbfceb-f0c3-bfd7-a42b-06b915ebf95b.png)

　　インポート直後でもSpineで作成した通りの見かけにはなっているのですが
　　ちょっとカメラアングルが変わると下記のように表示が崩れたりします。
　　　※盾より前に腕がでてきちゃってます。
　　![777.png](https://qiita-image-store.s3.amazonaws.com/0/56177/0562d4ad-d1cc-2a1b-fed9-5d64ed4892d5.png)

　　なので、各アニメーションごとにある程度カメラアングルを変えてみて
　　表示に問題がないように各パーツのZ値調整をしたほうがよいと思います。

　調整が済んだ後はMecanimでアニメーションを設定していけばOKです。
　このあたりについては他にいろいろと情報はあると思いますので、
　そちらを参照下さい。

#最後に
　「unitySpineImporter」のメリットはMecanimが使える点にあると思います。
　現状では公式ランタイムでは対応していないですし、フォーラム見てる分には
　Unity5に合わせて対応しようとしてるのか、対応する予定はないと言っているのか、
　自分の英語能力ではよく分かりませんでした(；´Д｀)=3
　
　下記の通りデメリットもありますので、よく考えたいところですね。

　**・見た目2Dだけど表裏で見た目が変わる(単純な左右反転ではない)**
　　キャラクタを180度回転させた場合、ちゃんと後ろから見てるっぽくなります。
　　表だと腕が盾に隠れてますが、後ろからみるとちゃんと腕が見えてますね。
　　でもこれは画像の作りによっては逆に悪い点にもなりうるかなと思います。
　　関節部分とか見えなさそうなところって適当につくっちゃったりしますしｗ
　　![456.png](https://qiita-image-store.s3.amazonaws.com/0/56177/4b05d19f-74fb-ff2c-ddde-a4a4e0be76e7.png)

　**・アニメーション中に画像差換えすると両方の画像が表示されてる。**
　　今回作成したアニメーションとして連続斬りがあります。
　　このアニメーションは１回目は振り下ろし、２回目は振り上げとしていて、
　　この振り上げの時に剣画像を上下逆になるように画像を差し替えているのですが、
　　困ったことに画像差し替え前後の画像が表示されてしまいます。
　　![zzzz.png](https://qiita-image-store.s3.amazonaws.com/0/56177/d2aa3b98-f150-99f3-1d8c-c69b6b99a2f9.png)

　　いろいろ試行錯誤してみたのですが、解決方法はわかりませんでした。
　　どなたか解決方法を知ってたら教えてください(´・ω・｀)
　　
　　今回作成したものを動かした動画を置いておきましたので、よければ見てみて下さい。
　　･･･アニメーションレイヤーの勉強中で下半身が変なのはご了承下さい。
　　[UnitySpine2Dtest(Youtube) : https://www.youtube.com/watch?v=CCrtdQHXog8](https://www.youtube.com/watch?v=CCrtdQHXog8)


この記事を読んで頂き、有難うございました。