TimelineFXで出力したスプライトシートをcocos2d-JSで再生する手順

ようやくTimelineFXで吐いたスプライトシートをcocos2D-JSでアニメーションさせることができたので手順を記録しておきます。

TimelineFXからスプライトシートを出力する

cocos2dはスプライトシートの情報を.plistというXML形式で持つようです。TimelineFXはplistの出力に対応しておらずその他のツール『texturePacker』（有償）、『ShoeBox』(無償)等を使用する必要があります。(『texturePacker』でのplist出力は確認しましたが、『ShoeBox』では確認していません。) これは面倒なので今回は.plistを使わずにアニメーションする方法をとりました。

TimelineFXの使い方は過去記事参照

<a href="http://bokuweb.hatenablog.com/entry/timelinefx-enchant">TimelineFX買ったった！ので、サンプルエフェクトをenchantで表示するまでを記録しておく - ぼくのかんがえたさいきょうのうぇぶさーびす</a>

TimelineFX買ったった！ので、サンプルエフェクトをenchantで表示するまでを記録しておく - ぼくのかんがえたさいきょうのうぇぶさーびす

出力時に『save as strip』を選択すると、フィルムみたいに一直線に画像が並びます。後述しますが『save as strip』とすることでスプライト画像を切り取り配列にpushする演算が楽になります。

f:id:bokuweb:20150216203757p:plain

スプライトシートによるアニメーション

今回は簡素化のためcocos2d-JS v3.3 Liteを使用しています。

・ main.coffee

window.onload = ->
  cc.game.onStart = ->
    cc.LoaderScene.preload ["HelloWorld.png"], ->
      MyScene = cc.Scene.extend
        onEnter:->
          @_super()
          size = cc.director.getWinSize()

          # ここでスプライトシートの画像をフレーム毎に切りとり配列に格納します
          # TimelineFXで『save as strip』で出力することにより、ここの計算が簡単になります
          animationframe = []
          for i in [0..31]
            frame = new cc.SpriteFrame "note.png",cc.rect 128*i,0,128,128
            animationframe.push frame

          # フレームからアニメーションを作成
          animation = new cc.Animation animationframe, 0.05

          # 永続的に繰り返すアクションの作成
          action = new cc.RepeatForever new cc.animate animation

          # スプライトの作成
          sprite = new cc.Sprite "note.png",cc.rect 0,0,128,128

          # アニメーションの開始
          sprite.runAction action

          # 座標指定
          sprite.setPosition size.width / 2, size.height / 2

          # シーン追加
          @addChild sprite

      cc.director.runScene new MyScene()
    , @

  cc.game.run "gameCanvas"

・HelloWorld.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello Cocos2d-JS</title>
    <script type="text/javascript" src="cocos2d-js-v3.3-lite.js" charset="UTF-8"></script>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="450"></canvas>
    <script type="text/javascript" src="main.js" charset="UTF-8"></script>

</body>
</html>