spineとは

Skeleton Animationという言葉があるのかどうかは知らないけど、画像に「bone（骨）」を通して、 モーションデータを付与できるツールです。

今回使用するspineのデータは、弊社デザイナーのジュンさんに用意してもらったよ！

あらかじめ

• animation「a」
• animation「b」

というモーションをつけてもらっています。

jsonで出力

cocos2d-xから使用するには、「json」形式で出力すればおｋらしい。
ここは迷わずexportだ！

atlasファイルが必要らしい

atlasファイルは「Texture Packer」というソフトを用いて作成します。

exportする際にSpineから直接Texture Packerを利用できるようなので、これで作成しよう。

今回は、

• miku.atlas（パーツ画像の切り抜き情報）
• miku.png（パーツがまとめられた画像）
• miku.json（bone情報）

という3つのファイルが生成されました。これらをcocos2d-xのプロジェクトに投げ込みます。

cocos2d-x側で動かしてみる

基本＋animation「a」の再生

#include "spine/CCSkeletonAnimation.h"
 
// spine
auto animation = extension::CCSkeletonAnimation::createWithFile("miku.json", "miku.atlas");
animation->setPosition(Point(visibleSize.width/2 + origin.x, origin.y));
// animation「a」を再生
animation->setAnimation("a", true);
this->addChild(animation, 0);

かわいい！

animation「b」を再生してみる

animation->setAnimation("b", true);

きゅーと！

まとめ

懸念点

今回、本当にさっくりと画像のモーションを再生することができました。
ただ、fpsの値が若干気になりますね。。 60fps程度が理想だと思うんですが、30〜50fpsあたりでブレが激しいというか、このあたりの許容範囲ってどんなものなんでしょうか？

参考文献

• Cocos2d-xとSpineの連携 - アニメーションを作る(2)

感謝です！

ソースコード

https://github.com/8823-scholar/cocos2d-x-study/commit/e44c0b27d012aad8fcda4f8902d79c398c5dea14