Spineの最新版を使ってみた

グレンジ Advent Calendar 2017 7日担当の raitome です。
グレンジでクライアントエンジニアをしています。

趣味で絵を描いたりアニメーションを作ったりしています。
ボーンアニメーションツールのSpineに興味がありまして、
最新版を触ってみましたので、触った内容を記事にまとました。

1.最新版のSpine

正式版：3.6
Beta版:3.7
http://ja.esotericsoftware.com/blog/spine-3-7-beta-released

今回は3.6を使って色々作ってみました。

2.Cocos2d-xとUnityに導入する方法

各プラットフォームでの使い方はよく忘れますので、ここでメモとして残しておきます。

2.1 Cocos2d-x

1. json、png、atlasファイルをセットでExportする

1. Cocos2d-xでファイルを使う

SpineSample.cpp

auto _spine = spine::SkeletonAnimation::createWithJsonFile(skeletonJsonFile, atlasFile, scale);
_spine->setAnimation(0, "idle", true);

2.2 Unity

1. json、png、atlasファイルをセットでExportする

1. 最新のUnity用Runtimeをインストール
   https://github.com/EsotericSoftware/spine-runtimes/tree/3.6/spine-unity

2. exportしたSpineのファイルをUnityのプロジェクトに入れると、自動的に下記のファイルが生成される

1. SkeletonDataをSceneにドラッグすると使えるようになる

3.Mesh

公式サイトの紹介によると、

この機能は個人的に一番気に入りの機能で、画像一枚で頂点を操作するだけで、豊かな表現を作れます。
もちろん頂点は自分で設定する必要があります。

柔らかい表現や3Dっぽい表現もできます。

4.Slot画像変更

Slotは画像を格納するもので、Slot内の画像を切り替えすることで、武器、装備などの見た目変更が実現可能です。
ただし、現状は、事前に複数の画像をSlotに入れる必要があります。

Cocos2d-xのコードでSlot画像を変更する方法が下記通りです。

SlotSample.cpp

    std::string weapon = "weapon"+ id
    auto attachment = spineSprite->getAttachment("weapon", weapon);
    spSlot_setAttachment(spineSprite->findSlot("weapon"), attachment);

5.Channelによるアニメーションの融合

アニメーションは、Channelを分けて再生することができますので、複数のChannelを同時に再生することで、アニメーションの融合ができます。
（ただ、パーツをChannelで分けて再生した方がいいです。同じパーツを複数Channelで同時に違うアニメーションを再生すると、表示がおかしくなる場合があります。）

Cocos2d-xでの使い方は下記通りです。

Channel.cpp

_spine->setAnimation(0, "idle", true);
_spine->addAnimation(1, "wink", false);

6.Event

アニメーション再生の特定のタイミングでEventを送ることができます。
Cocos2d-xでEventを受け取って、必要な処理を行います。(setAnimationListener)
下記の例では、RunStepのEventを設定して、Cocos2d-x側でEventを受け取ったタイミングで、足音のサウンドを再生することができます。
また、Particle Effectの再生タイミングの制御もできます。

7.Skin

Skin機能で同じボーンと異なる画像セットでアニメーションを量産することができます。
見た目装備にも使えそうな機能です。
下記はSpineのアプリにあるサンプルです。

Cocos2d-xでの使い方は下記通りです。

Channel.cpp

_spine->setSkin("gobilin");
_spine->setSkin("goblingirl");

8.Clip (3.6新機能)

指定の範囲を非表示にする機能です。
特殊な演出などに使えそうです。

実際な設定は下の画像通りで、赤い範囲は非表示範囲です。

9. Tint (3.6新機能)

Tint機能は実際、Cocos2d-xのTinttoと同じ効果が得られるので、ここで割愛させていただきます。
興味ある方は公式サイトで確認してみてください。
http://ja.esotericsoftware.com/blog/Spine-3.6-tint-black-clipping-weight-painting-and-more

最後に

以上は今回触った内容です。
ちなみにBeta版の3.7では、サウンドを直接入れることもできるらしいので、正式リリース版が来たら使ってみる予定です。

まだSpine初心者ですので、
もっと色々作ってみて、また何か気づきや学びがあったら記事にしたいと思います。