近年、リッチなアニメーションを作成するためにSpineが利用されるようになってきています。このSpineではボーンアニメーションを作成できるほか、メッシュアタッチメントによる自由なアニメーションを生成することが可能です。これらのSpineの機能とCocos2d-xからの読み込み方法などについて紹介しました。

1. Cocos2d-x(JS) ハンズオン #12
Spine
Nobollel株式会社 清水友晶

2. 清水 友晶
 Nobollel株式会社 CTO
チームビルディング
スマホアプリ開発
Cocos2d-xサポート
TECH.C.非常勤講師
 プライベートでも
Cocos2d-xに関するゲーム開発
講演活動
執筆活動
 マイブーム: Ingress
 チラ裏開発メモ: http://tks2.net/memo
 SlideShare: http://www.slideshare.net/doraemonsss
 Facebook: http://www.facebook.com/doraemonsss

4. http://line.me/S/sticker/1085672

5. Spine
 spineとは
 spineのデモ
 spineの画面構成の説明
 spineにふれてみる
 画像の配置
 boneの設定
 アニメーションの設定
 Cocos2d-x上で動かしてみる
 Cocos2d-x上で動かすための準備
 spineで作成したアニメーションの呼び出し

6. spineとは
 2Dスケルトンアニメーション作成ツール
 http://esotericsoftware.com/
 Windows, Mac, Linux
 Cocos2d-x, Unity, Corona SDK, …（多数）
 Essential: $69
Pro: $299（トライアル版あり）
 ドキュメント
http://esotericsoftware.com/spine-documentation/
 ランタイムはGitHubで公開
 Cocos2d-xにも含まれている

7. spineのデモ
 spine – examples
 /Spine/examples
 dragon
 goblins
 powerup
 spineboy
 spinosaurus
 Cocos2d-x
 TestCPP
 SpineTest

8. spineの画面構成の説明
 モード（SETUP, ANIMATE）
 Setup Mode
 イメージ
 描画順序
 ボーン
 スキン
 Animate Mode
 複数アニメーション
 タイムライン
 キーフレーム

9. spineにふれてみる
spine v3.4.02
http://tks2.net/handson/20160901/handson
.zip

10. spineにふれてみる
 spineプロジェクトの作成
 プロジェクトを保存するためのディレクトリを作成
 spineファイルの保存
 画像の配置
 画像はimagesに表示される
 緑: 使用している画像
 赤: 使用していない画像

11. spineにふれてみる
 画像はSlotに格納される
 基本的には1つのスロットに1つの画像
 画像表示順の設定
 表示順序にて設定を行う
 上にある画像が手前に表示される

12. 現在のすもも

13. spineにふれてみる
 Boneの作成
 rootを選択
 Tools – 作成 を選択
 配置したい箇所にboneを作成
 BoneにSlotを割り当てる

14. 現在のすもも

15. アニメーションの設定
 キーフレームの設定
 緑: キーフレームなし（値の変更なし）
 橙: キーフレームなし（値の変更あり）
 赤: キーフレームあり（値の変更あり）

16. アニメーションの設定
 全てのboneに対してアニメーションを設定する

17. Cocos2d-x上で動かしてみる
Cocos2d-x 3.13
spine v3.4.02

18. Cocos2d-x上で動かすための準備
 jsonファイルの書き出し
 エクスポート
 データ: JSON
 アトラス作成: ON
 ファイル生成
 skeleton.atlas
 skeleton.json
 skeleton.png

19. Cocos2d-x上で動かすための準備
 spineのフレームワークを読み込む
 project.json
 modulesにspineを追加する

20. spineで作成した
アニメーションの呼び出し

21. メッシュアタッチメント
 イメージにポリゴンを定義し
変形させることができる
http://ja.esotericsoftware.c
om/spine-meshes
 ウェイトを設定することによ
り滑らかな変形が可能になる
http://ja.esotericsoftware.c
om/spine-weights

22. Cocos2d-xにおけるメッシュ
 Cocos2d-x v3.13より対応
 Cocos2d-x v3.13以前のバージョンを利用する場合は、
開発元が公開しているランタイムを利用することで対
応可能
https://github.com/EsotericSoftware/spine-
runtimes
 ブラウザアプリは非対応

23. 作業はここまで

24. 参考になるサイト
 Cocos公式Wiki
http://www.cocos2d-
x.org/wiki/Cocos2d-JS
 Cocos2d-JS APIリファレンス
http://cocos2d-x.org/wiki/Reference
 Qiita
（tag: cocos2d-js）
https://qiita.com

25. おわり
 ありがとうございました