CocoStudioのAnimationEditorを使って簡単なアニメーションを実装する

## はじめに
``CocoStudio``の``AnimationEditor``を使って簡単なアニメーションを作成し、
Coso2d-x上で読み込んで実行するまでの説明になります。

## 対応バージョン
- CocoStudio 1.4.0.1（VMFusionでWin8上で起動）
- Cocos2d-x3.1（2014/05/24版）

### 前提条件
- ``Cocos2d-x``の開発環境が整っている
- ``cocos new``コマンドで``Cocos2d-x``プロジェクトを作れる
- ``Xcode``で起動することができる

こんなもんですかね？足りなかったら指摘ください。。。

## プロジェクトを作成まで

### Animation Editorを起動

![1.png](https://qiita-image-store.s3.amazonaws.com/0/40887/0f38207d-9f31-8e83-6f45-9dc99afd16f7.png)

### 新規プロジェクトを作成

![2.png](https://qiita-image-store.s3.amazonaws.com/0/40887/ac84c025-d420-8c16-b6d5-7a28cbe89856.png)

## SpriteFrameを配置する

元データはこちら。

> 素材提供元 [臼井の会　素材支部](http://usui.moo.jp/rpg_tukuru.html)

いつもお世話になっておりますm(_ _)m

### plistと対になるpngを読み込む

- [actor4.plist](https://github.com/kyokomi/CocoStudioSample/blob/master/Resources/NewAnimation/actor4.plist)
- [actor4.png](https://github.com/kyokomi/CocoStudioSample/blob/master/Resources/NewAnimation/actor4.png)

上記2ファイルを空プロジェクトの``Resource``へ、ドラッグ&ドロップします。

![3.png](https://qiita-image-store.s3.amazonaws.com/0/40887/ff4ed06d-9aa4-2cfd-ccd7-b885f8d03763.png)

### ベースのSpriteを配置

``Resource``の中から適当に選んで1つドラック&ドロップします。

![4.png](https://qiita-image-store.s3.amazonaws.com/0/40887/9a595eb1-4899-aff2-33a9-31a24c8412a5.png)

## アニメーションを設定

配置した``Sprite``に対して、フレームの切り替えと移動とカラー変更をタイムラインで制御します。

### アニメモードに切り替える

ここボタンなのか。。。ってくらいわかりにくい感じです。

![5_1.png](https://qiita-image-store.s3.amazonaws.com/0/40887/0d498c48-e2b0-ee1c-bffc-b6e4226e4bc5.png)

### フレームイベントを追加する

いまのままだと最初に選んだフレームしかないので、レンダリングリソースの欄へドラッグ&ドロップで追加します。

![5_2.png](https://qiita-image-store.s3.amazonaws.com/0/40887/243a4ca9-fa40-091e-2fa6-56139b867512.png)

こんな感じに選べるようになります。

![5_3.png](https://qiita-image-store.s3.amazonaws.com/0/40887/110637f9-9643-108e-6779-f28d04b04207.png)

### タイムラインを編集する

Adobe製品とかのタイムラインみたいな感じで直感的にいじれます。
適当に試してみてください。

キャラだけだと味気ないので、エフェクトも追加してこんな感じにしました。

![5_4.png](https://qiita-image-store.s3.amazonaws.com/0/40887/2cb6286e-6ec5-1394-ad47-408f27669eed.png)

![10.gif](https://qiita-image-store.s3.amazonaws.com/0/40887/ef6f5373-cab9-0ab9-8f36-dc54fe34a634.gif)

## プロジェクト出力

ここで``CocoStudio``の操作は終わりです。

![6.png](https://qiita-image-store.s3.amazonaws.com/0/40887/4a8251c3-aca0-9d59-fed8-9ddc6a58f758.png)

## Cocos2d-xプロジェクトへ組み込む

### CocoStudioで出力したファイルを配置

``Cocos2d-x``のプロジェクト配下にある``Resource``ディレクトリに、
先ほど``CocoStudio``から出力したディレクトリを配置します。

**NewAnimation**ってやつです。

![7_1.png](https://qiita-image-store.s3.amazonaws.com/0/40887/64fb178b-d70b-6662-bd2b-792a9382f309.png)

### Xcodeで読み込む

この辺は普段ファイル読み込むのと同じです。

![7_2.png](https://qiita-image-store.s3.amazonaws.com/0/40887/33182104-6a5a-5709-eac4-cb3d63adec3c.png)

![7_3.png](https://qiita-image-store.s3.amazonaws.com/0/40887/c7269b61-519c-67ad-4b64-3ebe4ce35e28.png)

## HelloWorldSceneクラスを修正

今回作ったアニメーションを呼び出すようにします。

ちなみにアニメーション終了時に``Cocos2d-x``の``HelloWorld``画像を吹っ飛ばすようにしました。

```cpp
#include "cocostudio/CocoStudio.h"

using namespace cocostudio;

// 〜省略〜

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }

    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();

    /////////////////////////////
    // 2. add a menu item with "X" image, which is clicked to quit the program
    //    you may modify it.

    // add a "close" icon to exit the progress. it's an autorelease object
    auto closeItem = MenuItemImage::create(
                                           "CloseNormal.png",
                                           "CloseSelected.png",
                                           CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

	closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
                                origin.y + closeItem->getContentSize().height/2));

    // create menu, it's an autorelease object
    auto menu = Menu::create(closeItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu, 1);

    /////////////////////////////
    // 3. add your codes below...

    // add a label shows "Hello World"
    // create and initialize a label

    auto label = LabelTTF::create("Hello World", "Arial", 24);

    // position the label on the center of the screen
    label->setPosition(Vec2(origin.x + visibleSize.width/2,
                            origin.y + visibleSize.height - label->getContentSize().height));

    // add the label as a child to this layer
    this->addChild(label, 1);

    // add "HelloWorld" splash screen"
    auto sprite = Sprite::create("HelloWorld.png");

    // position the sprite on the center of the screen
    sprite->setPosition(Vec2(visibleSize.width/2 + origin.x - sprite->getContentSize().width/2, visibleSize.height/2 + origin.y));

    // add the sprite as a child to this layer
    this->addChild(sprite, 0);

    // ここから CocoStudio Animationの読み込み
    ArmatureDataManager::getInstance()->addArmatureFileInfo("NewAnimation/NewAnimation.ExportJson");
    Armature *armature = Armature::create("NewAnimation");
    armature->getAnimation()->playWithIndex(0);
    armature->getAnimation()->setMovementEventCallFunc([sprite](Armature *armature, MovementEventType type, const std::string & name) {
        // Animation終了時(LOOP設定したらループごとに呼ばれる）
        sprite->runAction(MoveTo::create(0.2f, Point(-500, sprite->getPositionY())));
    });
    armature->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
    this->addChild(armature);

    return true;
}
```

動かしてみるとこんな感じになります。

![11.gif](http://i.gyazo.com/0a134c53bf2cf1fc254230574c43ee8f.gif)


## おわり
自分もまだ昨日今日触り始めたばかりなので、よくわかってないので何かあればお気軽にコメントとかTwitter等で連絡いただければと思います。