Spineでアニメーションを作ってみる



## 概要

cocos2d-xのアニメーションをSpineで作成してみる。
Spineの公式サイトは[こちら](http://ja.esotericsoftware.com/)。
トライアル版では使いごごちは見れるが、プロジェクトを保存・エクスポートできない。
今回はEssential版（$69）を使ってみる。

### バージョン

- Cocos2d-x 3.4
- Spine 2.1.13

### サンプル

cocos2d-xのsdkに含まれている[サンプル](https://github.com/cocos2d/cocos2d-x/tree/v3/tests/cpp-tests/Classes/SpineTest)が参考になる。

```bash
tests/cpp-tests/Classes/SpineTest
├── SpineTest.cpp
└── SpineTest.h
```


## フロー

### 素材を準備（パーツ画像とパーツの結合画像）

今回は試用期間の[Adobe Illustrator CC](http://www.adobe.com/jp/products/illustrator.html)を使って素材を作成。

- レイヤーごとにPNG形式で出力する
- アニメーションで動かしたい単位でレイヤーを切る
- レイヤー名はファイル名になるのでわかりやすい名前をつける
- レイヤーを結合した画像もPNG形式で出力する（土台用）

レイヤーごとにわけて出力するスクリプトは[こちら](https://gist.github.com/kiarina/7abf6c67ab27aea13bad)。

![](https://www.evernote.com/shard/s138/sh/9807702a-07a8-45d5-8d38-9b97fd7dd279/0a61435edf541868c22a740ba710f151/deep/0/mii-hime.ai-@-266--(RGB-プレビュー).png)

### Spineで新規プロジェクトを作成

![](https://www.evernote.com/shard/s138/sh/c610dcd8-93c1-48b6-bb01-300e8db99009/b92ad77eb666a5672cef83440bec36b6/deep/0/Spine---mq.png)

新規プロジェクトを作成し、適当な名前で保存する。

### 新しいスケルトンを作成

最初から１つスケルトンが用意されているのでそれをリネームしてもいい。

![](https://www.evernote.com/shard/s138/sh/63f9e9cf-4099-4c31-a3f6-4df887ab3e38/27da4690abb059952c2b258326b79d3a/deep/0/Spine---Untitled.png)

Hierarchyの見方。

![](https://www.evernote.com/shard/s138/sh/1e715252-1003-49ec-9229-7ad331b1042f/2ecddadfba5e0021fc42bd2878f69b5b/deep/0/Spine---*Untitled.png)


### Imagesのパスを用意した素材のディレクトリに設定

Imagesを選択し、Browseで素材ディレクトリを指定する。

![](https://www.evernote.com/shard/s138/sh/e7364f46-47b3-4f26-9288-26f932faaa96/71313d47bcb5467d001899379bc1aa7e/deep/0/Spine---*Untitled.png)

指定ディレクトリ以下の画像が利用可能になる。

![](https://www.evernote.com/shard/s138/sh/6c6c60e7-4c4f-4024-a104-7032d38a91ae/935bfc41d54b309b7b05ae909f597b9f/deep/0/Spine---mq.png)

### スロットを作成

スロットとボーンの作成はSETUPモードで行います。

![](https://www.evernote.com/shard/s138/sh/9166f3e3-bdda-448a-979d-77c1ab894e6d/00d2f799235f0d1c89728f2496a016f1/deep/0/Spine---*Untitled.png)

スロットは画像を画面上にドラッグすることで作成できる。
スロットは画像のパーツとしての単位みたいなものっぽい。

#### 結合画像のスロット

パーツを配置する場所をわかりやすくするために、結合画像のスロットを作成する。
結合画像の透明度を下げる。

![](https://www.evernote.com/shard/s138/sh/1d373434-60bd-4027-a322-1e04b810db87/9b332403b4884e20936cfca7c441db65/deep/0/Spine---*Untitled.png)

![](https://www.evernote.com/shard/s138/sh/927da185-2765-4035-80fa-1d66a6739a2a/56fc6b84fb8df7658150934fa7a07ddb/deep/0/Spine---*Untitled.png)

#### 全てのパーツ画像のスロット

![](https://www.evernote.com/shard/s138/sh/a6c974ef-610f-4b17-87b0-45a64d270b3e/e400117bbdb8425ebf49b9a7cd237af6/deep/0/Spine---*Untitled.png)

配置に邪魔なパーツは非表示にする。

![](https://www.evernote.com/shard/s138/sh/5d7ee2eb-7090-46dd-83db-1488f54f8fe9/99314e8edb41d36c8d98e4c0342d85f2/deep/0/Spine---*Untitled.png)

配置が終わったら、結合画像のスロットは削除する。

### 描画順を設定

Draw Orderでスロットの重なり順を指定する。

![](https://www.evernote.com/shard/s138/sh/ac76578b-48f7-4caa-b7cd-92ba8506d7e8/0309edc916e8e918d20e3f92d6e90df7/deep/0/Spine---*Untitled.png)

### ボーンを作成

スロットとボーンの作成はSETUPモードで行います。

![](https://www.evernote.com/shard/s138/sh/9166f3e3-bdda-448a-979d-77c1ab894e6d/00d2f799235f0d1c89728f2496a016f1/deep/0/Spine---*Untitled.png)

#### 全てのスロット用のボーンをルートに作成

![](https://www.evernote.com/shard/s138/sh/302351e9-c021-4aa5-be3f-33f59463c5b0/cd96729a14df044a9c03939954683a8a/deep/0/Spine---*Untitled.png)

- 2.でrootを選択するのは、選択されているルートかボーンを自動で親にしてしまうからです
	- スロットは親になりません
	- この仕様を利用して、ボーン間の親子関係を追加時につけていくことも可能です
- リネームは、ボーンをダブルクリックすることでできます
	- ここではわかりやすいように、スロットと同じ名前をつけています

#### スロットの親を対応するボーンに設定

![](https://www.evernote.com/shard/s138/sh/0951c3d4-0f45-439b-95df-3f989151dc50/54ec20885479306e81ceca7422910e58/deep/0/Spine---*Untitled.png)

こんな感じになる。

![](https://www.evernote.com/shard/s138/sh/570aa52d-437a-496d-ae68-b9df00c234a8/ff8c19bfaadf040a1f00bd0d7a238708/deep/0/Spine---*Untitled.png)

#### ボーン間の親子関係を設定

今回は、全てのボーンをbodyの子にした。
親子を正しく設定することで、アニメーションを作りやすくなる。

- bodyを動かすと全てのパーツがbodyと同時に移動するようになる
- 右手と左手などは、お互い影響を受けないのでバラバラに動かせる

![](https://www.evernote.com/shard/s138/sh/d2ba7b69-4985-4035-86d9-29ee6fc418a4/69ced1f9212721c6ab9d4dec93ca5475/deep/0/Spine---*Untitled.png)

### アニメーションを作成

アニメーションの作成はANIMATEモードで行います。

![](https://www.evernote.com/shard/s138/sh/cef77f0e-4bbe-4d48-84d3-13ebe1b5c6dc/2c346f21de35a1b6f34db9ccd1861e38/deep/0/Spine---*Untitled.png)

#### アニメーションを追加

一つのスケルトンに複数アニメーションを作成できます。
Cocos2d-xでは、アニメーション名を指定することで複数のアニメーションを再生させることができます。

![](https://www.evernote.com/shard/s138/sh/7f322729-a662-4b6b-85c8-f1145e9917dc/f400521a4e6c9dedfa958b0c479376cf/deep/0/Spine---*Untitled.png)

ヒエラルキーのAnimationsを選択し、New Animationを選択してアニメーションを追加します。

#### キーフレームを追加

Spineではドープシート上にキーフレームを設定することでアニメーションを作成する。
キーフレームを追加できるのは以下の3つ。

- ルート
- ボーン
- スロット

キーフレームでは対象ごとに以下の値を設定できる。

- ルート・ボーン
	- 回転（Rotate）
	- 位置（Translate）
	- 拡大・縮小（Scale）
	- リフレクト（Flip）
- スロット
	- 色（Color）

ドープシート上で一つのオブジェクトに対し、同じ種類のキーフレームが2フレーム以上設定する。
そうすることで、キーフレーム間で設定した値が滑らかに変化するよう補完される。

![](https://www.evernote.com/shard/s138/sh/f1150991-338b-4605-9db6-3a6f5f7f6e2e/8ef0699511ddb715991be0fa71ab1cd7/deep/0/Spineを使ってみる.png)

尻尾フリフリアニメーションを作成。

![](https://www.evernote.com/shard/s138/sh/6176d573-cedd-4179-96f6-0739675501e0/8f8ca148fc401c4f3a20fc9f5c0473f1/deep/0/Spine---*Untitled.png)

Auto Key機能を有効にすれば、キャンバスやプロパティ画面で値を変更した際に、自動でキーフレームが設定されるようになる。

![](https://www.evernote.com/shard/s138/sh/41d87c6a-606b-429c-98b0-eb60f257b58c/dde4d9f9ce52bf77b45e91c8a41b0631/deep/0/Spine---*Untitled.png)

### エクスポート

![](https://www.evernote.com/shard/s138/sh/9a7a395c-f93c-4bea-aec4-59e3c607c5cb/919ccf9a6eebc6225a8c8ccfe7f79c72/deep/0/Spine---*Untitled.png)

以下のような感じで出力する。

![](https://www.evernote.com/shard/s138/sh/964119ad-a147-4044-ae89-06d5cacd246e/32cb8e7e270fc00d771034811cc093a4/deep/0/Spine---*Untitled.png)

出力されるファイル。

```bash
test.atlas
test.json
test.png
```

これらをCocos2d-xで使用してみる。
Cocos2d-xでの使用方法はドキュメントを分ける。


## 参考

- [【Spine】2Dアニメーションツール Spine の使い方](http://qiita.com/2dgames_jp/items/bcaff315023412e039d0)
- [Spineを使ってみた Part1](http://befool.co.jp/blog/jun-nakada/spine-part1/)