10
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-01-22

#はじめに…のその前に(追記:20150319)
2015/2/Mあたりで公式ランタイムがMecanimに対応したようです。
SpineでExportしたデータをUnityで取り込むとAnimator Controllerが生成されるので、それを右クリックすればMecanim対応のオブジェクトが生成されます。
無題.png

但し、どうやら互換性のない修正点が発生している模様。
またキリのいいところでまとめたいですが、ヘレメンツ様のブログで解決策を記載されていましたので、紹介させて頂きます。

technostallion
【Unity】【Spine】UnityランタイムのMecanim対応に伴う変更点
http://helementsof.hatenablog.com/entry/2015/02/20/231252

旧ランタイムで作成したスクリプトと互換性がなくなるのはちょっと困りものですが、
公式が対応してくれたのはやっぱりうれしいですね!

#はじめに
前回の記事「Spineでプロ生ちゃんに動いてもらう」で
Spineで作成したキャラクタをUnityのスクリプトを使って動かしてみましたが、
今回非公式ランタイム「unitySpineImporter」を使うことでMecanimを使用できるみたいでしたので試してみました。

公式ランタイムと比較して使ってみた感想としては、良し悪しあるかなーという感じですが、
個人的な覚書も含めて記事にしておきたいと思います。
■良い点
・Mecanimが使える
・見た目2Dだけど表裏で見た目が変わる(単純な左右反転ではない)
■悪い点
・アニメーション中に画像差換えすると両方の画像が表示されてる。
 (個人的には致命的だと思う。作り方や修正方法があるかも?ですがわかりません。)
・画像の作りによっては裏側が悲惨な事になる。

#準備するもの
1.2Dアニメーションソフトウェア「Spine」でエクスポートしたデータ
 atlas,json,pngの3点セットです。
 今回はSpineでのアニメーション作成については説明を割愛します。
 
 今回使用するキャラクターはRPGドット(略してRド):http://www.geocities.co.jp/Milano-Cat/3319/さんの素材を使わせて頂く事にしました。
 
 元々の素材--->_mon_079_Master.png

 バラした後↓
 Spipne.png

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

 ※公式のランタイムは無くてもよいです。

#参考になりそうなもの
Unity spine import and mecanim (Youtube動画)
 https://www.youtube.com/watch?v=7MfUAelg9hQ
 
 unitySpineImporterの使用方法について解説した動画です。
 そもそも検索してもヒット数がめちゃ少ないんですが・・・(;´Д`)

#使ってみる
 では使ってみたいと思います。
 
 1.「準備するもの」で記載したものを準備する。
  多分Projectは下記のようになってると思います。
  Spineデータの拡張子は見えてませんが、上からatlas,png,jsonです。
  111.png

 2.atlasファイルを右クリックして「Spine build prefab」を実行する
  222.png

 3.下記ダイアログが出てくるので、そのままGenerateボタンを押下する
  詳細はよくわかんないんだけどね(ぉぃ)
  333.png

  成功したらPrefabが生成されます。AnimatorControllerも作ってくれてます。
  555.png

 
4.まずはアニメーションの動作確認をしよう
  これでAnimatorの設定変えたりして使うことができるのですが、
  その前に各アニメーションの動作確認をしましょう。
  
  というのも、unitySpineImporterでPrefabを作成した場合は、
  公式ランタイムと違ってパーツごとに奥行きがついています。
  ↓こんな感じ
  666.png

  インポート直後でもSpineで作成した通りの見かけにはなっているのですが
  ちょっとカメラアングルが変わると下記のように表示が崩れたりします。
   ※盾より前に腕がでてきちゃってます。
  777.png

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

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

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

 ・見た目2Dだけど表裏で見た目が変わる(単純な左右反転ではない)
  キャラクタを180度回転させた場合、ちゃんと後ろから見てるっぽくなります。
  表だと腕が盾に隠れてますが、後ろからみるとちゃんと腕が見えてますね。
  でもこれは画像の作りによっては逆に悪い点にもなりうるかなと思います。
  関節部分とか見えなさそうなところって適当につくっちゃったりしますしw
  456.png

 ・アニメーション中に画像差換えすると両方の画像が表示されてる。
  今回作成したアニメーションとして連続斬りがあります。
  このアニメーションは1回目は振り下ろし、2回目は振り上げとしていて、
  この振り上げの時に剣画像を上下逆になるように画像を差し替えているのですが、
  困ったことに画像差し替え前後の画像が表示されてしまいます。
  zzzz.png

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

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

10
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?