Cocos2d-xにおけるspineのメッシュアタッチメント機能について

こんにちは。清水です。

近年、リッチなアニメーションを作成することができる spine が「最」注目されています。
ja.esotericsoftware.com
f:id:nobollel:20160910150106p:plain

すでにこの spine はボーンアニメーション（スケルタルアニメーション）を作成できるツールとして知られていましたが、近年新しい機能として「メッシュアタッチメント」が備わりました。これにより1枚のイラストから滑らかなアニメーションを作成することができるようになりました。
サンプル1 サンプル2

この spine は、Cocos2d-x, Unity, libGDX, Corona SDKなど18種類のゲームエンジンをサポートしており、それぞれのランタイムをGitHubで提供しています。 github.com

逆に、Cocos2d-xもこの spine を標準でサポートしているため、特別なインストール作業など必要なく、特にCocos2d-x v3.13では spine の全機能を利用することができます。
※ブラウザアプリの場合は、メッシュアタッチメントを除く
※Cocos2d-x v3.12以前の場合は、上記GitHubよりフレームワークの差し替えが必要

手順は非常に簡単です。以前に spine を利用したことがある方ならば、手順は何も変わっていないことが分かって頂けるでしょう。

1. アニメーション作成

spineを用い、メッシュアタッチメントを利用したアニメーションを作成します。（今回はエンジニア向け記事であるため、spineの利用方法については割愛します。）
f:id:nobollel:20160910151637p:plain

2. Xcodeでの設定

iOS向けにXcode上で、Header Search Pathsに下記を追加します。

$(SRCROOT)/../cocos2d/cocos/editor-support

f:id:nobollel:20160910151729p:plain

3. ヘッダー読み込み

利用したいクラスにおいて、spineのヘッダーを読み込みます。

#include <spine/spine-cocos2dx.h>

4. 実装

利用したい場所で、spineのファイルを読み込みます。

auto winSize = Director::getInstance()->getWinSize();

//spineで作成したキャラクターの表示
auto sumomo = spine::SkeletonAnimation::createWithFile("res/skeleton.json", "res/skeleton.atlas", 0.5f);
sumomo->setPosition(winSize / 2);
addChild(sumomo);

//spineで作成したアニメーションの実行
sumomo->setAnimation(0, "walk", true);