はじめに

このエントリーはプロ生ちゃん Advent Calendar 2014 の第23日目の記事です。
プロ生ちゃんは現在配布されている2D素材だけでもかなり滑らかなアニメーションになっていますが、
いろいろ作っているうちにもっといろんなアニメーションがほしくなったりしてきますよね。ね？(；･`д･´)
かといって自分で絵を描くとなるとなかなか大変・・・。
そこで今回はゲーム用2Dアニメーションソフトウェア「Spine」を使って、ぬるぬるアニメーションを作成した後、Unity上で動いて頂こうと思います。

注：
書いてる本人も中途半端な知識で触ってますので不明点等が多々あるかもです(；･`д･´)ｽｲﾏｾﾝ…
こんなツールもありますよって事で、少しでも興味持って頂ければ幸いです。
　　

Spineとは

Spineとは2D アニメーション専用に開発されたソフトウェアで、ぬるぬるアニメーションを簡単に作成する事ができるツールです。
ライセンスの価格は10/23現在、下記となっていますが期間限定(?)で割引があったりするようなので、詳しくはSpineの公式HPで御確認下さい。

ライセンス	価格	割引期間中
Essential	$89 USD	$69 USD
Professional	$299 USD	$289 USD

無料のトライアル版もありますがこちらはファイル保存やエクスポートができません。
但し、サンプルもいくつか入っていますので操作感は掴めると思います。

Spineでアニメーション準備～作成～エクスポート

それでは早速アニメーション作成を見ていきましょう。
今回はプロ生ちゃんのdot_illustを使用します。

ここに可愛いプロ生ちゃんドット絵があるぢゃろ？
( ＾ω＾) ⊃

これを…こうぢゃ！！ U(＾ω＾)U ＜ハリケーンミキサーッ！DAAAN!!(ネタ古)

※実際にはdot_illust内の複数画像から各パーツを切り取って作成しています。

これらをSpineのSETUPモードで読み込ませて、ボーンを作成→対応するパーツ画像を子にしていくという感じで全て設定します。
完成したときのボーンと親子関係はこんな感じ。これがベースとなります。

腕や足は関節をそれぞれ子にしておくと親を動かしたときに一緒に付いてきてくれます。
また、ボーンには色設定ができますので、色分けしておくとわかりやすいです。

次に左上のSETUPをクリックしてANIMATEモードにします。
そうすると画面下側にDopesheet画面が開きますので、ここにフレームごとにキーを打ってアニメーションにしていきます。

アニメーションのキー間はだいたい勝手に補正してくれるので、この画像の場合は0フレームと30フレームに右足が前のポーズ、14フレームに左足が前のポーズを作成した後、各フレームで微調整を行っています。
MMDとか使ったことある人にはすぐ馴染めると思います。

今回は下記4点を準備しました。
・Run　　　　→　走り
・JumpUp　　→　ジャンプ上昇中アニメーション
・JumpDown　→　ジャンプ下降中アニメーション
・Throw　　　→　投げ

アニメーションができたところで、Unityで使えるようにエクスポートしましょう。
メニュー→Exportを選択し、下記画像のように設定してExportボタンを押すだけです。

するとOutput Folderに設定したフォルダに3つのファイルが作成されます。
・skeleton.atlas
・skeleton.json
・skeleton.png
Unityへインポートする為に.atlasファイルだけ拡張子を.txtに変更しておきましょう。

Unityでの利用準備～インポート

Unityでエクスポートしたデータを使用するにはSpineのランタイムをインポートする必要があります。
Spineの公式HPのランタイム→Unity – C#から
「spine-unity.unitypackage」をダウンロードして、インポートします。

次にSpineでエクスポートしたデータ3ファイルが入ったフォルダをProjectへD&Dします。
するとPrefabが自動的に作成されますので、それをHierarchyに置いてやるだけで利用できます。

アクションゲームを作ってみる(操作だけ)

せっかくアニメーションを作成したので、アクションゲームを作ってみます。
といってもプロ生ちゃんを操作するだけですが・・・。
まずよく使いそうなメソッドは下記あたりでしょうか(弱気)

SkeletonAnimation pronama2d = GetComponent<SkeletonAnimation>();　//オブジェクトの取得
Spine.AnimationState pronama2dstate = pronama2d.state;
pronama2dstate.SetAnimation(0, "Run", true);　　　//アニメーションの変更。引数：trackIndex, animationname, loop
pronama2dstate.Complete += (独自メソッド等); 　　　//アニメーション終了後処理

尚、SetAnimation()はSkeletonAnimationに対して下記のように個別に設定することもできます。

pronama2d.AnimationName = "Run";　//アニメーションの変更
pronama2d.TimeScale = 2;　　　　　 //タイムスケールの変更
pronama2d.loop = true;　　　　　　 //アニメーションループの設定

これらを使用してキャラクター操作部分のみ作成してみました。

using UnityEngine;
using System.Collections;

public class SpineController : MonoBehaviour {

    public GameObject Croquette = null;
    bool jumpflg = false;
    bool jumpdflg = false;
    float beforeH = 0.0f;
    SkeletonAnimation pronama2d = null;
    Spine.AnimationState pronama2dstate = null;

    void Start () {
        //オブジェクト取得
        pronama2d      = GetComponent<SkeletonAnimation>();
        pronama2dstate = pronama2d.state;
        //タイムスケール設定
        pronama2dstate.TimeScale = 2;
        //初期アニメーションを設定
        pronama2dstate.SetAnimation(0, "Run", true);
    }

    void Update () {
        if(Input.GetKeyDown(KeyCode.Space)){
            //ジャンプ
            jumpflg = true;
            pronama2dstate.SetAnimation(0, "JumpUp", false);
            pronama2d.rigidbody2D.AddForce(Vector2.up * 250);
        }else if(Input.GetKeyDown(KeyCode.RightArrow)){
            //コロッケ投げる
            if(!jumpflg){
                Instantiate(Croquette ,new Vector3(this.transform.position.x + 0.2f,
                                                   this.transform.position.y + 0.3f,
                                                   this.transform.position.z),
                                                   Quaternion.identity);

                pronama2dstate.SetAnimation(0, "Throw", false);
                //アニメーション終了後に実行させたいメソッドを登録
                pronama2dstate.Complete += throwComplete;
            }
        }

        if(jumpflg){
            if(pronama2d.transform.position.y < beforeH && !jumpdflg){
                pronama2dstate.SetAnimation(0, "JumpDown", false);
                jumpdflg = true;
            }
        }

        beforeH = pronama2d.transform.position.y;
    }

    void OnCollisionEnter2D(Collision2D collider){
        if(jumpflg){
            pronama2dstate.SetAnimation(0, "Run", true);
            beforeH = 0;
            jumpflg = false;
            jumpdflg = false;
        }
    }

    //「Throw」終了後の処理
    void throwComplete(Spine.AnimationState state, int trackIndex, int loopcount){
        //「Run」に戻して本メソッドを登録解除
        pronama2dstate.SetAnimation(0, "Run", true);
        pronama2dstate.Complete -= throwComplete;
    }
}

完成品

こんな感じでできました。

といっても動きは画像ではわからないですねｗ

実際に操作できるものをうに部屋様にアップさせて頂きましたので、是非見てみて下さい！
こちら→プロ生ちゃんとSpineアニメーションテスト

さいごに

駆け足での説明となってしまい不明確な部分も多かったかと思いますが、最後まで読んで頂き有難う御座いました。
今見返すともう少しぬるぬるアニメーションさせてもよかったかなとも思いましたので、過去にSpineを使ったものなども併せて見て頂けたら幸いです。
・プロ生ちゃんと水着でぬるぬる(Youtube)
・鳥獣戯画　餅つき大会(Web Player)

自分のSpineライセンスはまだEssentialなんですが、ProfessionalではMesh機能とかスキニングで腕とか足とかは画像をばらばらにしなくてもなめらかに自由変形させたりできるみたいですし、IKサポートしてるので段差に合わせて足曲げてくれたりするようなので、今後ライセンスをバージョンアップさせる予定です。
他のぬるぬるアニメーションとしては「Live2D」もかなり魅力的で、こちらも機会をみて触っていこうと思っています。
プロ生ちゃんも3Dモデルがスパッツ着用対応してニッチなニーズにも答えてくれているあたり、今後も目が離せませんね！
プロ生ちゃん可愛い！(*´Д`)=3

Spineでプロ生ちゃんに動いてもらう