Cocos2d-x 勉強第14回「spineで作成されたアニメーションを利用する」

木内智史之介(シャッチョー)
ミンカさんけっこんしてくださいおねがいします(ズザー
SEGAさん、DIVAの筐体ください(ズザー

spineとは

spine

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

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

あらかじめ

  • animation「a」
  • animation「b」

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

jsonで出力

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

atlasファイルが必要らしい

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

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

今回は、

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

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

cocos2d-x側で動かしてみる

基本+animation「a」の再生

1
2
3
4
5
6
7
8
#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);

a

かわいい!

animation「b」を再生してみる

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

b

きゅーと!

まとめ

懸念点

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

参考文献

感謝です!

ソースコード

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