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

どうも、エンジニアのころさめです
前回からの続きで、今回は作成したCocosStudioのcsdファイル内csdのNodeのアニメーションをコード上で制御する方法を紹介します

まず、Nodeからアニメーション(ccs.ActionTimeline)を取得するために以下のようなメソッドを用意します

このメソッドを利用して、ccs.loadをしているところで以下のように実装します

この状態でproject.jsonやresource.jsなどを修正してから起動すると、子要素のアニメーションがループ再生されるのが確認できると思います

なぜこれで子要素のアニメーションが取得できるかというと、ccs.loadをした際に読み込むcsd(json)データが、CocosStudio v2以降のものであれば、timelineParser-2.x.jsが呼ばれ、そこで以下のような処理をしているからになります

読み込んだactionをnodeのタグと同じにした上でrunActionしているのがわかると思います
そのため、nodeからnodeのタグでgetActionByTagをするとccs.ActionTimelineが取得できるというわけです

これを応用して、以下のようなccs.loadのwrapperを用意すると非常に捗ります

こうすることにより、nodeとactionを分けずに扱えるため、actionが必要になった時だけutils.getActionTimeLineを呼ぶといった使い方ができるようになるため、オススメです

まだCocos2d-x(JS)とCocosStudioの両方を使って開発する人は少ないですが、慣れればC++やCocosBuilderよりもより早く開発できるようになるので、試してみる価値はあると思います

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

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

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