UnityにSpineのデータを読み込んで操作する(Script編)

# はじめに

Spineには様々なランタイムが存在します。（ランタイム一覧 http://ja.esotericsoftware.com/spine-runtimes ）一度作ったデータが別の場所で再利用しやすいという事で、Spineの優れた特徴の一つと言えます。ここでのサンプルは、世の流行りに乗っかりUnityで（自分はFlasherですのでas3+starlingで頑張りたいところですが）作っていこうと思います。

なお、記事を書いて時点で使用しているSpineのバージョンはSpine2.1.27 Essential、Unityのバージョンは5.2.1.f1 Personalです。

# ランタイムを入手
上記ランタイム一覧ページで、Official runtimesのUnity( https://github.com/EsotericSoftware/spine-runtimes/tree/master/spine-unity )を選択します。githubのページが開くので、Quick installationというセクションからspine-unity.unitypackageファイルをダウンロードします。

# Unityにランタイムを読み込む
適当にUnityの2Dプロジェクトを作成し、メニュー -> Assets -> Import Package -> Custom Packageとたどり、先ほどダウンロードしunity packageファイルをインポートします。ファイルの選択ダイアログで特に操作をしないと、下記のようにファイルが取り込まれます。
![スクリーンショット 2015-10-23 3.05.56.png](https://qiita-image-store.s3.amazonaws.com/0/8302/45c53075-b3c1-a467-4e6b-caf0f59f9ebb.png)
Exampleフォルダ以下のファイルは捨ててしまっても構いませんが、Example/Spine以下には楽しげなサンプルがたくさん入っているので、後述する手順でシーンに配置してみると楽しいです。

# Spineからデータをエクスポートする
適当なデータを用意します。今回はロボットのパッ平君を用意しました。ええ、オリジナルキャラです。

![スクリーンショット 2015-10-23 3.19.40.png](https://qiita-image-store.s3.amazonaws.com/0/8302/71599461-03bc-0c59-57e2-09ff264abf0b.png)

アニメーションの設定まで終わったら、Spineの左上のロゴ -> Export でExportダイアログを開いて、JSONを選択します。このままExportボタンを押してエクスポートすれば良いのですが、Create atlasのダイアログを開いて、Optionsのアトラス拡張子設定を.atlasから.atlas.txtに変更しておくと何度かやり直す際などに便利です。これは拡張子がatlasのままだとUNITYにSpineのデータが自動的に取り込まれないからなのですが、出力後に.atlasを.atalas.txtに書き換えても大丈夫です。エクスポートすると指定フォルダ内に３つのデータ(png、json、atlas.txt)が確認できると思います。

![drg.png](https://qiita-image-store.s3.amazonaws.com/0/8302/47b09bfd-1db7-0fa9-4641-8b5440601136.png)
_赤い印の部分を編集する_

# UNITYにSpineからエクスポートしたデータを取り込む

AssetesフォルダーにSpineでデータを書き出したフォルダごとドラッグ＆ドロップします。
![スクリーンショット 2015-10-23 3.26.45.png](https://qiita-image-store.s3.amazonaws.com/0/8302/e250474d-737e-a618-a053-1001ec93f1df.png)
数秒時間がかかりますが、これだけで、上記のように6つのファイルが読み込まれた状態になります。(自動的に作成されたファイルも追加される。)

このうちアイコン付きのSkeketonDataを選択するとInspector表示が下記のようになりますが、とりあえず内容は編集しません。黒い三角の再生ボタンを押すと設定したアニメーションをここでプレビューする事もできます。
![スクリーンショット 2015-10-23 3.37.47.png](https://qiita-image-store.s3.amazonaws.com/0/8302/b374b488-2e00-f295-04b8-1ee70c004d90.png)

# シーンにSkeletonを配置する

![スクリーンショット 2015-10-23 3.39.36.png](https://qiita-image-store.s3.amazonaws.com/0/8302/f2c70f8f-9d13-0fff-8cf2-eadd12195033.png)
SkeketonDataを右クリックしたメニュー -> Spine -> Instantiate (Skeleton Animation)を選択します。これだけでシーンにSkeletonが配置されるので、大きさや位置を適当に編集します。なお、Instantiate (Mecanim) という項目についてはいずれ？ですが、解説します。

:warning: ＜2017/3/28追記＞
2016の秋頃のアップデートで、スケルトンデータを直接ステージにドロップしてSkeletonを配置する形式に変わっていました。ドロップ時にどのような形式で配置するのかが選べます。
こちらに動画付きのわかりやすい解説があります。
http://ja.esotericsoftware.com/forum/New-Feature-Drag-and-Drop-to-instantiate-6789

![スクリーンショット 2015-10-23 3.45.38.png](https://qiita-image-store.s3.amazonaws.com/0/8302/ce75b728-fda7-f301-dc17-afdc51dd230c.png)
さて、これでシーンにキャラクターを配置できたわけですが、ここで実行をしてもキャラクターは止まったままでまだ動いてくれません。

# scriptを設定する
今回は（Mecanimを使っていないので）プログラムでアニメーションを制御してやらなくてはいけません。

```lang:pappey.cs
using UnityEngine;
using System.Collections;
using System;

public class Pappey : MonoBehaviour {
		void Start () {
		GetComponent<SkeletonAnimation> ().state.SetAnimation (0, "animation", true);
	}
}
```
このようなC#スクリプトを記述し、シーン上のキャラクターに設定しました。詳しくは解説しませんが、SetAnimationメソッドの第二引数に設定したアニメーション名を指定しています。特に指定しない場合"animation"という名前にデフォルトでなっています。

![スクリーンショット 2015-10-23 4.05.11.png](https://qiita-image-store.s3.amazonaws.com/0/8302/2034cf62-7a11-6fe0-5e3d-ad89912917b5.png)
ここまでやってやっと、再生ボタンを押す事でUnity上でキャラクターをアニメーションさせる事ができます。"やっと"と書きましたが、慣れればかなり早くここまでの作業を終える事はできそうです。

動画サンプル
https://twitter.com/harayoki/status/657272515312513024

# 終わりに
本当に基本的な事だけで有益な情報はあまりないですが、丁寧にまとめてみました。バージョンが変わるとまた詳細は変わってしまうと思いますが、誰かの役に立てば幸いです。しばらく作業が空いてしまった後の自分の役には立ちそうです。