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する
<img width="594" alt="coco.png" src="https://qiita-image-store.s3.amazonaws.com/0/218003/71f9126a-b1c7-0809-4143-922acc4c598f.png">

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

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

## 2.2 Unity
1. json、png、atlasファイルをセットでExportする
<img width="500" alt="unity.png" src="https://qiita-image-store.s3.amazonaws.com/0/218003/a42402c7-5322-6dd1-ec5e-312f94ee3bdb.png">

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

3. exportしたSpineのファイルをUnityのプロジェクトに入れると、自動的に下記のファイルが生成される
<img width="204" alt="unity2.png" src="https://qiita-image-store.s3.amazonaws.com/0/218003/2b68ab56-fe71-42a9-b4d3-66afa533955a.png">

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

# 3.Mesh
公式サイトの紹介によると、
```メッシュはイメージの内側でポリゴンの定義を可能にし、イメージを曲げたり変形するにはポリゴンの頂点を操作します。
```
この機能は個人的に一番気に入りの機能で、画像一枚で頂点を操作するだけで、豊かな表現を作れます。
もちろん頂点は自分で設定する必要があります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/218003/7a39c5bf-cf96-277e-b22f-d34a45387541.png" width="250">
<img src="https://qiita-image-store.s3.amazonaws.com/0/218003/9026b665-4852-68d0-8fab-95b59c7620b6.png" width="250">

柔らかい表現や3Dっぽい表現もできます。
![b1.gif](https://qiita-image-store.s3.amazonaws.com/0/218003/b914396c-74d0-d5c5-a668-766d52e9dfa6.gif)
![2_.gif](https://qiita-image-store.s3.amazonaws.com/0/218003/25177197-23a2-773d-ce86-450cf781cff0.gif)

# 4.Slot画像変更
Slotは画像を格納するもので、Slot内の画像を切り替えすることで、武器、装備などの見た目変更が実現可能です。
ただし、現状は、事前に複数の画像をSlotに入れる必要があります。
<img width="250" alt="slot.png" src="https://qiita-image-store.s3.amazonaws.com/0/218003/10673566-0f5a-06e2-8eb5-341036a8b106.png">

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

```cpp: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で同時に違うアニメーションを再生すると、表示がおかしくなる場合があります。）

<img width="350" src="https://qiita-image-store.s3.amazonaws.com/0/218003/3177d90c-1060-fa50-8b90-d3b29191aa65.gif">

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

```cpp: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の再生タイミングの制御もできます。

<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/218003/33f677bf-a071-2aa6-4a66-bf515d229ba1.gif">

# 7.Skin
Skin機能で同じボーンと異なる画像セットでアニメーションを量産することができます。
見た目装備にも使えそうな機能です。
下記はSpineのアプリにあるサンプルです。
<img width="499" alt="skin.png" src="https://qiita-image-store.s3.amazonaws.com/0/218003/84d0146c-73e8-2e02-dd00-5531bee19d25.png">

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

```cpp:Channel.cpp
_spine->setSkin("gobilin");
_spine->setSkin("goblingirl");
```

# 8.Clip (3.6新機能)
指定の範囲を非表示にする機能です。
特殊な演出などに使えそうです。

<img width="100" alt="skin.png" src="https://qiita-image-store.s3.amazonaws.com/0/218003/35059a64-f5f7-0316-fa14-4c9c7b1e8dda.gif">

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

<img width="277" alt="スクリーンショット 2017-10-10 1.01.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/218003/9805a526-63a8-face-c5f9-7e9753234721.png">

# 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初心者ですので、
もっと色々作ってみて、また何か気づきや学びがあったら記事にしたいと思います。