9일째입니다.
CocosStudiov2를 사용하여 애니메이션을 만들고 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

CocosStudio 측

이 상태로 시작합니다.

캐릭터를 오른쪽에서 왼쪽으로 이동

Animation을 편집할 때는 Automatic frame recording를 체크합니다.
편집하려는 노드의 삼각형 마크를 누르면 애니메이션 설정이 확장됩니다.



Timeline의 0frame 눈을 마우스 오른쪽 버튼으로 클릭하고 Add Frame


이 상태에서 Position을 변경합니다. (620px)



15frame눈에서도 똑같이 Add Frame 합니다.



15frame을 선택한 상태에서 Properties의 Position을 변경한다. (420px)



일단 이것으로 Animation 할 수 있습니다. 재생 버튼을 누르십시오.


Rotation 와 Scale 와 Position 밖에 표시되지 않습니다만, Automatic frame recording 에 체크가 있을 때 Properties 를 변경하면 Timeline에 추가됩니다.

메시지 패널 확대

CocosSudio Sample 라고 표시하고 있는 패널은,
캐릭터가 왼쪽에서 나온 후에 Visible의 OFF 상태에서 Scale 확대하여 표시하도록 합니다.

0frame째로 Panel을 선택해, Properties의 Visible의 체크를 해제한다.



이렇게하면 메시지 패널이 사라집니다.

15frame 눈으로 Panel을 선택하고 Properties의 **Visible을 체크한다.



그리고, Panel의 Scale도 선택해, Add Frame 하고 나서, Scale를 1.0%로 한다.



30frame 눈으로 Scale을 100%로 하여 재생해 봅니다.



조금 빠르지만, 캐릭터가 나오고 나서 확대하고 있는 것을 알 수 있다고 생각합니다.

여기서 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);

부팅

끝

조금 버릇이 있고 SpriteBuilder와 비교하면 고기능은 아니지만 일단 간단한 애니메이션이라면 만들 수 있습니다.

이번에 사용한 프로젝트는 여기에 있습니다.
GitHub - kyokomi/CocosStudioV2Sample

CocosStudio 이전의 Ver1.x와 달리 Win과 Mac에서 같은 것을 사용할 수 있게 되었기 때문에 향후 개선에 기대하고 있습니다.

아직 익숙하지 않은 것 같은 생각도 하고 있으므로, 더 좋은 방법이나 편리한 설정이라면 가르쳐 주시면 도움이 됩니다.