Edited at

cocosStudio2.0.2で作成したアニメーションをcocos2d-js ver3.1で再生させる方法

More than 3 years have passed since last update.

アニメーション再生のために基本3つのファイルが必要。

2.0.2からjsonは吐かなくなったもよう。。

xxxxx.csb

xxxxx.plist
xxxxx.png


相対パス解決方法

仕事でやる場合、アニメーターチームから上がってきたファイル群を、

プロジェクトに追加する場合、作成環境とフォルダ構成が異なるため、

ただしくファイルを読むことができせん。(絶対パス参照になっているから)

そのため、以下の関数を実行しておく必要があります。

ccs.csLoader.setRecordProtocolBuffersPath(true);


再生方法


インタンス作成方法


cocos2.0からは、ccs.csLoader.createNodeを使用します。

この関数は純粋にnodeを作成するだけなので、動きの情報は、

ccs.actionTimelineCache.createActionaction として作成する必要があります。

この時点で、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