Flash の swf ファイルを Cocos2d や Unity で表示するというのは、先日 GREE さんからオープンソースとして公開された LWF が有名ですが、Cocos2d-x では使用できませんでした。ところが去年末に Super Animation Converter というツールが公開されました。

cocos2d-x のフォーラムでのスレッド
http://www.cocos2d-x.org/boards/6/topics/19621?r=19711

GitHub
https://github.com/raymondlu/super-animation-samples

GitHub から落としてくると、中にサンプルプロジェクト（Cocos2d-x と Cocos2d-iPhone）とコンバータ、マニュアル（PDF) などが入っています。PDF にざっと目を通せば使い方はすぐに分かると思います。

サンプルプロジェクトを iPhone5 で実行したものを動画にしてみました。Super Animation Converter でどの程度のことができるかだいたい分かるかと思います。アニメーションしている部分は全て swf を変換したものです。特に後半の魚のアニメーションは CCSprite でアニメーションを作ろうと思うとかなり大変だと思います。

SWF 作成時の注意点

  • グラフィックシンボルのみ使用可能。（画像を読み込んだときはグラフィックシンボルに変換しておく）
  • ボタンやムービークリップは未対応。
  • ベクターグラフィックは未対応。
  • フレームラベルを１つ以上設定する。（Cocos2dx からアニメーションを再生するときに指定するため）
  • Flash のパブリッシュ設定で「ムービーの圧縮」のチェックは外す。

Super Animation Converter での変換

リポジトリに含まれている Super Animation Conveter.app が変換ソフトになります。

  1. 起動後、ターゲット端末（iPad, iPhone, iPhone Retina が選択可能）を選択
  2. Import ボタンで swf を読み込む
  3. 書き出すフレームラベルを選択後 Export で書出す
  4. swf によって複数の png ファイルと sam というアニメーションの定義ファイルが生成される

Cocos2d-x への組み込み

Cocos2d-x のプロジェクトに下記4ファイルを追加します。

  • SuperAnimCommon.h
  • SuperAnimCore.cpp
  • SuperAnimNodeV2.h
  • SuperAnimNodeV2.cpp

アニメーションの表示

CCSize size = CCDirector::sharedDirector()->getWinSize();
std::string path = CCFileUtils::sharedFileUtils()->fullPathFromRelativePath("test.sam");
mAnimNode = SuperAnim::SuperAnimNode::create(path, 0, this);
mAnimNode->setPosition(ccp(size.width/2, size.height/2));
this->addChild(mAnimNode);
mAnimNode->PlaySection("start");

SuperAnim::SuperAnimNode::PlaySection メソッドで swf に作成したフレームラベルを指定してアニメーションを実行します。

フレームの再生終了で処理を行う

アニメーションが終了したときにコールバックを受けて処理をする場合は、SuperAnim::SuperAnimNodeListener の OnAnimSectionEnd メソッドをオーバライドします。

SuperAnim::SuperAnimNodeListener を継承

class HelloWorld : public cocos2d::CCLayer, public SuperAnim::SuperAnimNodeListener
{
private:
    SuperAnim::SuperAnimNode* mAnimNode;
public:
    void OnAnimSectionEnd(int theId, std::string theLabelName);
};

OnAnimSectionEnd メソッドをオーバライド

void HelloWorld::OnAnimSectionEnd(int theId, std::string theLabelName) {
    if (theId==0) {
        if (theLabelName=="start") {
            mAnimNode->PlaySection("start");
        }
    }
}

上記の例ではアニメーション終了後に再度アニメーションを再生して無限ループ再生させています。
フレームラベルを複数用意しておき、タップされたら違うフレームラベルを再生するなど可能です。

今まではデザイナーさんが Flash でアニメーションのイメージを作成して、それを元に fla ファイルを見ながら cocos2d-x でアニメーションを作成していました。Super Animation Converter を使用すれば UI のアニメーションなど簡単なアニメーションなら swf からそのまま変換して使えそうです。

なお、現在のバージョンは swf から変換後、アニメーションによってはかなりの数の png ファイルが生成されます。メモリの使用効率の面では最善とはいえず、テクスチャアトラスの対応が望まれるところです。制作者のブログにも将来のバージョンで対応予定とのことです。
http://raymondlu1983.blog.com/super-animation-converter/

変換ソフトの部分が公開されていないため、生成後のアニメーション定義ファイルを自分でいじって、テクスチャアトラスに対応することができないので、対応されることを心待ちにしております！
しかし、これは今後の開発でかなり使えそうです。

関連する投稿

  • 関連する投稿はありません。