アニメーション再生のために基本３つのファイルが必要。
2.0.2からjsonは吐かなくなったもよう。。
xxxxx.csb
xxxxx.plist
xxxxx.png
相対パス解決方法
仕事でやる場合、アニメーターチームから上がってきたファイル群を、
プロジェクトに追加する場合、作成環境とフォルダ構成が異なるため、
ただしくファイルを読むことができせん。(絶対パス参照になっているから)
そのため、以下の関数を実行しておく必要があります。
ccs.csLoader.setRecordProtocolBuffersPath(true);
再生方法
インタンス作成方法
cocos2.0からは、ccs.csLoader.createNodeを使用します。
この関数は純粋にnodeを作成するだけなので、動きの情報は、
ccs.actionTimelineCache.createActionで action として作成する必要があります。
この時点で、csbが使用するplistはプリロードしておく必要があります。
画像ファイル(png)は自動でプリロードしてくれます。
var node = ccs.csLoader.createNode("xxxxx.csb");
var action = ccs.actionTimelineCache.createAction("xxxx.csb");
再生
再生は、runActionを使用します。
gotoFrameAndPlayは、再生するframeIndexを指定する必要があります。
node.runAction(action);
action.gotoFrameAndPlay(0, false);
action.gotoFrameAndPlay(0, false);の部分は、
action.gotoFrameAndPlay(0, 60, false);
とも書けます。
イベントの貼り方
var2.0からは、アニメーションスタートとエンドをコールバックとして取得することができません。
コード上で、
action.isPlaying();
で終了しているかどうか確認することはできます。
フレームイベントの貼り方
actionに対して、コールバックを設定することで、
イベントを受け取ることができます。
引数のframeにはイベント情報が入っています。
var action = ccs.actionTimelineCache.createAction(file);
action.setFrameEventCallFunc(frameEventCallBack.bind(this));
function frameEventCallBack(frame) {
// イベントフレームの情報
var frameIndex = frame.getFrameIndex();
// 現在のフレームを取得
var timeline = frame.getTimeline();
var action = timeline.getActionTimeline();
var nowFrame = action.getCurrentFrame();
// frameイベントのframeIndexより、
// 現在のフレーム数のほうが大きい場合は、
// frameイベントがもつevent名が発火したということ
// よって、小さい場合は無視するため即リターン
if (nowFrame < frameIndex) {
return;
}
// ここまできてやっと、eventNameが発火したということ
var eventName = frame.getEvent();
/* eventNameに対応した処理 */
};
お掃除
これは環境によって違うと思うけど(使い回すならしないとか)、
いらなくなった時のお掃除の方法。
// nodeを削除
node.removeFromParent();
// actionに貼ったイベントをクリア
action.clearFrameEventCallFunc();
// ccs.actionTimelineCacheから、キャッシュされているactionを削除
ccs.actionTimelineCache.removeAction(file);
まとめ
ccs.csLoader.setRecordProtocolBuffersPath(true);
var file = "xxxx.csb";
var node = ccs.csLoader.createNode(file);
var action = ccs.actionTimelineCache.createAction(file);
action.setFrameEventCallFunc(frameEventCallBack.bind(this));
node.runAction(action);
action.gotoFrameAndPlay(0, false);
// コールバック関数
function frameEventCallBack(frame) {
// イベントフレームの情報
var frameIndex = frame.getFrameIndex();
// 現在のフレームを取得
var timeline = frame.getTimeline();
var action = timeline.getActionTimeline();
var nowFrame = action.getCurrentFrame();
// frameイベントのframeIndexより、
// 現在のフレーム数のほうが大きい場合は、
// frameイベントがもつevent名が発火したということ
// よって、小さい場合は無視するため即リターン
if (nowFrame < frameIndex) {
return;
}
// ここまできてやっと、eventNameが発火したということ
var eventName = frame.getEvent();
/* eventNameに対応した処理(例) */
if (eventName === "end") {
node.removeFromParent();
action.clearFrameEventCallFunc();
ccs.actionTimelineCache.removeAction(file);
}
};
間違ってたら教えてくださいw