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

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

# はじめに
前回の記事「[CocosStduio v2をCocos2d-x3.3rc1で使う方法](http://qiita.com/kyokomi/items/a47e2271fec531fce9e6)」で作ったプロジェクトをそのまま使います。

## 前提条件
- 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](https://qiita-image-store.s3.amazonaws.com/0/40887/401e4c7c-b22c-fd61-dfbd-b9fc5b7c7732.png)

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

Animationを編集するときは**`Automatic frame recording`にチェックを入れます**。
編集したいNodeの三角マークを押すとアニメーションの設定が展開されます。

![スクリーンショット_2014-12-07_21_02_15.png](https://qiita-image-store.s3.amazonaws.com/0/40887/e99b9b98-2718-9ee8-21b3-a905f4a10e60.png)

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

![スクリーンショット 2014-12-07 21.06.37.png](https://qiita-image-store.s3.amazonaws.com/0/40887/4961c44d-e2de-8510-d94d-ffe17c0aff6f.png)

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

![スクリーンショット 2014-12-07 21.07.26.png](https://qiita-image-store.s3.amazonaws.com/0/40887/bb1efa64-a3aa-3cff-2a50-cf4f4b51b3c8.png)

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

![スクリーンショット 2014-12-07 21.09.38.png](https://qiita-image-store.s3.amazonaws.com/0/40887/9d95c160-c4da-633c-84e8-e06faf1867f6.png)

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

![スクリーンショット 2014-12-07 21.11.42.png](https://qiita-image-store.s3.amazonaws.com/0/40887/ba109041-ec21-cd1a-89cd-17fddd4ee4f5.png)

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

![anime3.gif](https://qiita-image-store.s3.amazonaws.com/0/40887/21f5e76f-d405-96f7-83b1-9763a91b89c3.gif)

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

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

`CocosSudio Sample`と表示しているパネルは、
キャラが左から**出てきたあと**に、**VisibleのOFF状態**から**Scale拡大**して表示するようにします。

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

![スクリーンショット_2014-12-07_21_22_42.png](https://qiita-image-store.s3.amazonaws.com/0/40887/7916153d-051f-f574-b1b9-8d83043be812.png)

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

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

![スクリーンショット_2014-12-07_21_27_35.png](https://qiita-image-store.s3.amazonaws.com/0/40887/eeb5d9e5-fd59-8c18-5e7b-812d55030e9b.png)

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

![スクリーンショット_2014-12-07_21_30_01.png](https://qiita-image-store.s3.amazonaws.com/0/40887/23c1645e-376e-8dab-db9c-718836638c68.png)

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

![anime4.gif](https://qiita-image-store.s3.amazonaws.com/0/40887/957780f8-4638-42d2-f199-d82ecad1bf8d.gif)

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

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

# Cocos2d-x側

## Animationの読み込みと再生

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

```cpp: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の読み込み方法が少し変わったので追記しておきます。

```cpp:v2.0.0〜v2.0.2
timeline::ActionTimelineCache::getInstance()->createActionFromProtocolBuffers("res/MainScene.csb");
```

```cpp:v2.0.6
timeline::ActionTimelineCache::getInstance()->createAction("res/MainScene.csb")
```

## 速度の変更

```cpp
// 半分の速度にする
action->setTimeSpeed(action->getTimeSpeed() / 2);
```

## ループ再生の指定

```cpp
// 第二引数がloopの有無
action->gotoFrameAndPlay(0, true);
```

## 起動する

![anime5.gif](https://qiita-image-store.s3.amazonaws.com/0/40887/d1f9d654-6fcf-7ba6-bdb1-959958adb5bd.gif)

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

今回使ったプロジェクトはこちらにあります。
[GitHub - kyokomi/CocosStudioV2Sample](https://github.com/kyokomi/CocosStudioV2Sample/tree/19e65d500e30a50c6e7aa5066183d8e8d6a27fcd)

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

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