ようやくTimelineFXで吐いたスプライトシートをcocos2D-JSでアニメーションさせることができたので手順を記録しておきます。
TimelineFXからスプライトシートを出力する
cocos2dはスプライトシートの情報を.plistというXML形式で持つようです。TimelineFXはplistの出力に対応しておらずその他のツール『texturePacker』(有償)、『ShoeBox』(無償)等を使用する必要があります。(『texturePacker』でのplist出力は確認しましたが、『ShoeBox』では確認していません。) これは面倒なので今回は.plistを使わずにアニメーションする方法をとりました。
TimelineFXの使い方は過去記事参照
TimelineFX買ったった!ので、サンプルエフェクトをenchantで表示するまでを記録しておく - ぼくのかんがえたさいきょうのうぇぶさーびす
出力時に『save as strip』を選択すると、フィルムみたいに一直線に画像が並びます。 後述しますが『save as strip』とすることでスプライト画像を切り取り配列にpushする演算が楽になります。
スプライトシートによるアニメーション
今回は簡素化のため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>
デモ
わーい。
最後に
enchant.jsと比較するのはフェアじゃない気がするけど、比較するとスプライトシートアニメーションするにもすっごく手間がかかった。ただ、モバイルでのパフォーマンスはcocos2d-JSの方が優れているのでマスターしたいところ。

- 作者: フニゲ
- 発売日: 2014/01/09
- メディア: Kindle版
- この商品を含むブログを見る