Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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
Exampleフォルダ以下のファイルは捨ててしまっても構いませんが、Example/Spine以下には楽しげなサンプルがたくさん入っているので、後述する手順でシーンに配置してみると楽しいです。

Spineからデータをエクスポートする

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

スクリーンショット 2015-10-23 3.19.40.png

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

drg.png
赤い印の部分を編集する

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

AssetesフォルダーにSpineでデータを書き出したフォルダごとドラッグ&ドロップします。
スクリーンショット 2015-10-23 3.26.45.png
数秒時間がかかりますが、これだけで、上記のように6つのファイルが読み込まれた状態になります。(自動的に作成されたファイルも追加される。)

このうちアイコン付きのSkeketonDataを選択するとInspector表示が下記のようになりますが、とりあえず内容は編集しません。黒い三角の再生ボタンを押すと設定したアニメーションをここでプレビューする事もできます。
スクリーンショット 2015-10-23 3.37.47.png

シーンにSkeletonを配置する

スクリーンショット 2015-10-23 3.39.36.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
さて、これでシーンにキャラクターを配置できたわけですが、ここで実行をしてもキャラクターは止まったままでまだ動いてくれません。

scriptを設定する

今回は(Mecanimを使っていないので)プログラムでアニメーションを制御してやらなくてはいけません。

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
ここまでやってやっと、再生ボタンを押す事でUnity上でキャラクターをアニメーションさせる事ができます。"やっと"と書きましたが、慣れればかなり早くここまでの作業を終える事はできそうです。

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

終わりに

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away