Edited at

CocosStduio v2で簡単なAnimationを作成する

More than 3 years have passed since last update.

9日目です。

CocosStudiov2を使ってAnimationを作成してCocos2d-x3.3rc1で再生する方法について書きます。


はじめに

前回の記事「CocosStduio v2をCocos2d-x3.3rc1で使う方法」で作ったプロジェクトをそのまま使います。


前提条件


  • Cocos2d-xが動作する環境がある

  • 手順はMac(Winでもたぶんうごく)


検証環境


  • Cocos2d-x3.3rc1

  • Cocos Studio v2.0.2(Mac版)

  • Mac OSX 10.10.1(Yosemite)

  • Xcode 6.1


CocosStduio側

この状態から始めます。

スクリーンショット 2014-12-07 21.01.25.png


キャラを右から左に動かす

Animationを編集するときはAutomatic frame recordingにチェックを入れます

編集したいNodeの三角マークを押すとアニメーションの設定が展開されます。

スクリーンショット_2014-12-07_21_02_15.png

Timelineの0frame目で右クリックしてAdd Frameします。

スクリーンショット 2014-12-07 21.06.37.png

この状態でPositionを変更します。(620px)

スクリーンショット 2014-12-07 21.07.26.png

15frame目でも同じようにAdd Frameします。

スクリーンショット 2014-12-07 21.09.38.png

15frameを選択した状態でPropertiesのPositionを変更する。(420px)

スクリーンショット 2014-12-07 21.11.42.png

一応これでAnimationできてます。再生ボタンを押してみます。

anime3.gif

RotationScalePositionしか表示されていませんが、Automatic frame recordingにチェックが入っている時にPropertiesを変更するとTimelineに追加されます。


メッセージパネルを拡大表示

CocosSudio Sampleと表示しているパネルは、

キャラが左から出てきたあとに、VisibleのOFF状態からScale拡大して表示するようにします。

0frame目でPanelを選択して、PropertiesのVisibleのチェックを外す

スクリーンショット_2014-12-07_21_22_42.png

これで一旦メッセージパネルが消えます。

15frame目でPanelを選択して、Propertiesの**Visibleのチェックを入れる。

スクリーンショット_2014-12-07_21_27_35.png

あと、PanelのScaleも選択して、Add Frameしてから、Scaleを1.0%にする。

スクリーンショット_2014-12-07_21_30_01.png

30frame目でScaleを100%にして、再生してみます。

anime4.gif

ちょっと早いけど、キャラが出てから拡大してることがわかると思います。

ここでCocosStudio側の作業は終わりにしてPublishします。


Cocos2d-x側


Animationの読み込みと再生

Sceneの表示時とボタンクリック時に再生するようにしました。


HelloWorldScene.cpp

// on "init" you need to initialize your instance

bool HelloWorld::init()
{
// 〜省略〜

// --- Animation ---

// Animationを読み込む
auto action = timeline::ActionTimelineCache::getInstance()->createActionFromProtocolBuffers("res/MainScene.csb");
if(action) {
mainScene->runAction(action);
// 即、再生する
action->gotoFrameAndPlay(0, false);
}

// --- ボタンイベント ---
// 変更するラベルを取得(Panel_1/Text_1)
auto textLabel = mainScene->getChildByName("Panel_1")->getChildByName<ui::Text*>("Text_1");
// ボタンを取得してクリックイベントを設定
mainScene->getChildByName<ui::Button*>("Button_1")->addClickEventListener([textLabel, action](Ref *ref) {
// ボタン押した時の処理

// ラベルの内容を書き換える
textLabel->setString("Test !!!!!!!!!!!!");

// ★★★ Animationを再生する ★★★
action->gotoFrameAndPlay(0, false);
});

return true;
}


2014/12/30追記:

CocosStudio v2.0.6でAnimationの読み込み方法が少し変わったので追記しておきます。


v2.0.0〜v2.0.2

timeline::ActionTimelineCache::getInstance()->createActionFromProtocolBuffers("res/MainScene.csb");



v2.0.6

timeline::ActionTimelineCache::getInstance()->createAction("res/MainScene.csb")



速度の変更

// 半分の速度にする

action->setTimeSpeed(action->getTimeSpeed() / 2);


ループ再生の指定

// 第二引数がloopの有無

action->gotoFrameAndPlay(0, true);


起動する

anime5.gif


おわり

ちょっと癖があってSpriteBuilderとかと比べると高機能ではありませんが、一応簡単なアニメーションなら作れます。

今回使ったプロジェクトはこちらにあります。

GitHub - kyokomi/CocosStudioV2Sample

CocosStudio以前のVer1.xとは違って、WinとMacで同じものが使えるようになったので、今後の改善に期待してます。

まだまだ使いこなせてないような気もしているので、もっといい方法や便利な設定とかあれば教えていただけると助かります。