Cocos2d-x(JS)でCocosStudioのcsdファイル内csdファイルのアニメーションを取得、再生する その1

どうも、スパイラルセンスに入社してから1年半ぐらいのエンジニアのころさめです
直近の仕事がなくなったため社内ニートしようと思ってたらブログを書けと言われて渋々書いております
一応これまでCocos2d-xを使った開発に2年半ほど携わってきたので、私の記事はCocos2d-x関連の記事が多くなると思います

さて、最近まで私はCocos2d-x(JS)とCocos Studioを使って10ヶ月ほど開発を行っていました
ただ、Cocos2d-x(JS)用の新しいエディタであるCocos Creatorが発表されたにも関わらず、これまでにCocos StudioとCocos2d-x(JS)を利用した基本的な実装方法についての情報がweb上にほとんどありませんでした
しかしこの前、ようやく非常に参考になる情報が以下に掲載されました

Cocos2d-x (JS) ハンズオン #5 「Cocos StudioとCocos2d-x (JS)との連携」

基本的な実装方法についてはこれで十分なのですが、ちょっと変わったことをしようとするとどこにも情報はなく、自分で試したりCocos2d-xの実装を確認する必要があります
今回はそのうちの一つ、csdファイル内csdファイルのNodeのアニメーションを取得、再生する方法についてになります

まず、CocosStudioで以下のようにアニメーションを設定したcsdファイルを用意します

Icon

次に、アニメーションを設定したcsdファイルを別のcsdファイル表示時にドラッグ&ドロップします

drag

すると、csdファイル内に別のcsdファイルを子要素のNodeとして持たせることができます
Begin to record frameにチェックを入れて、この子要素のNested Actionという項目を設定すると、親のアニメーションの特定のタイミングで子要素をアニメーションさせることができます

nested_action

しかし、これだと親のアニメーションの時間が子要素より短い場合、子要素のアニメーションが途中で止まってしまったり、クリックイベントのタイミングでアニメーションを再生させたい場合などの時に、複雑なタイムラインになっていまいます

そのため、この子要素のアニメーションの再生をコード上で制御する必要があるのですが・・・長くなったので続きは次の記事で

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です