「Cocos2d-x Advent Calendar 2014」の17日目の記事になります。

cocos2dxでヌルヌルとしてエフェクトを実装したいと思い、色々と調べた中で「LWF」を使う方法を見つけました。「LWF」はFlashで作成ができる汎用2Dアニメーションデータのことで、cocos2dxをはじめUnityなどでも利用ができます。実際に試して見てとても簡単に使うことができました。今回は、この「LWF」を使い、cocos2dxでFlashを利用する方法を紹介します。

今回の開発環境

Mac OS 10.9.5
Flash CS5
cocos2dx 3.2

準備

まずは、「LWFS」を利用するための準備を行います。

ダウンロード

下記サイトから、LWFSをインストールします。OSによって種類が違うので注意をして下さい。 Lwfs - github

インストール

先ほどをダウンロードをしたZipを解凍します。

エラー

LWFSフォルダ内の[Start]を開こうとするとエラーが出ます。

これが出た場合、下記のような方法を試してみてください。

以前にLWFSをインストールしている場合は、これを削除する。
Downloadではない別の場所にフォルダを移動させる。
[Stop]を開く。

これでもダメな場合、下記コマンドを「ターミナル」で実行して下さい。 [c] xattr -d -r com.apple.quarantine LWFS [/c]

おそらく、このコマンドを入力すれば[Start]が上手く動くと思います。上手く行った場合、ブラウザに以下の画面が表示されます。

【参考】導入方法 - LWF Wiki

エフェクトの作成

次に、実際にcocos2dxで利用するFlashで作成したエフェクトを準備します。これはFlashで作成をします。 Flashの利用方法やエフェクトの作り方については、ここでは書きませんので別途調べて下さい。すいません。

保存先

作成したFlashは[LWFS_workフォルダ]に保存をして下さい。これは、「LWFS」をインストールをした際に[デスクトップ]に作成されています。その中に、Flashファイルを保存するフォルダを作って、その中に保存をします。

エフェクト作成の際の注意点

この部分、個人的に躓きました。「LWFS」では、作成したFlashを全て使えるわけではありません。制限があるので、これらに注意をしてください。

フィルタ : ドロップシャドウ、ぼかし、ベベルなどのフィルタ機能は使えません。
ActionScript : 全ての機能は利用できません。
ブレンド : 加算、消去、マスク、レイヤーを除いたブレンドモードは利用できません。

私は「ぼかし」を使ったエフェクトを利用したいがために、この度勉強をしたので非常に残念でした。

LWFに変換する

最後に作成したFlashを、LWFファイルに変換をします。「LWFS」をインストールした場合、Flashの[コマンド]に[Publish for LWF]が利用できるようになります。これを押せば、Flashが「LWFS」に変換されます。

[Status]がOKになれば変換完了です。

もし変換されない場合は、「LWFS」フォルダの[Start]を開いて下さい。

確認

Flashから変換された「LWF」を確認する方法なのですが、cocos2dxの場合[WebGl]を開いて下さい。

下記のFlashが確認できます。

cocos2dxで利用

先ほど作成したエフェクトをcocos2dxで利用をしてみましょう。

準備 - lwfプロジェクトをプロジェクトに追加する

cocos2dxのプロジェクトに必要なファイルを追加します。

サンプルプロジェクトをダウンロードする

cocos2dx用の[サンプルプロジェクト]が公開されています。まずは下記サイトからダウンロードして下さい。 splhack/Hello-LWF-Cocos2d-x · GitHub

lwfフォルダをプロジェクトに追加する

このフォルダの中にある[lwfフォルダ]を、自分のプロジェクトにコピーします。

コピペを使うと楽です。

lwfプロジェクトを追加する

先ほどコピペをしてもらった[lwfフォルダ]の中に[lwf.xcodeproj]があります。これをプロジェクトへ追加をします。これはXcode上から行って下さい。

追加されますと、以下の様なファイル構成になります。

準備 - target Setting

プロジェクトのターゲットに[LWF]を追加します。

Target Dependenciesにlwf iOS(lwf)
Link Binary With Librariesにliblwf iOS.a

準備 - Build Setting

プロジェクトの[Build Setting]にある[Header Seach Paths]を変更します。

[c] //この２つを追加して下さい。 $(SRCROOT)/../lwf/cplusplus/core $(SRCROOT)/../lwf/cplusplus/cocos2dx [/c]

準備 - LWFファイルと画像データをプロジェクトに追加する

先ほどFlashで作成をしたエフェクトに必要なファイルをプロジェクトに追加します。デスクトップに[LWFS_work_outputフォルダ]があります。この中、[native]を開いて下さい。先ほど作成したFlashを格納した時のフォルダ名があると思います。この中に必要なファイルが自動的に作成されています。

これをプロジェクトに追加します。今回はフォルダの階層を有効にして追加をしています。

【参考】 LWF for cocos2d-x - LWF Wiki

コード

エフェクトが必要な場面でLWFファイルを呼び出せばエフェクトが画面上に表示されます。 [c]

include "lwf_cocos2dx.h"

//ここでlwfファイルを指定します。 const char *path = "starAction/starAction.lwf"; auto lwfNode = LWFNode::create(path);

lwfNode->setPosition(origin); lwfNode->lwf->FitForHeight(visibleSize.width, visibleSize.height); this->addChild(lwfNode);

[/c]

位置の調整

Flashを作成する段階で、デバイスのサイズに合わせて作成すれば、画面上の調整が楽になります。 [c] //調整する場合は、この２つのコードを使います。 lwfNode->setPosition(pos); lwfNode->lwf->FitForHeight(width,height); [/c]

画像

テクスチャアトラスを利用

テクスチャアトラスを利用すれば、複数の画像を１つにまとめられます。

テクスチャアトラスを作成する

TexturePacker(有料）を利用すれば、簡単にテクスチャアトラスが作成できます。

以下の設定をしてテクスチャアトラスを作成しましょう。

Data Format : JSON(Hash)
Texture format:png
Reduce border artifacts:チェックを入れる

LWFに変換する

作成したテクスチャアトラスは、[LWFS_work]フォルダに保存をします。

そうすると、[LWFS_work_outputフォルダ]に、テクスチャアトラスを利用したLWFファイルが作成されます。

これを先ほどのようにプロジェクトに追加をします。実行する際には下記のようなコードを利用します。 [c] const char path = "starAction/starAction.lwf"; auto lwfNode = LWFNode::create(path); SpriteBatchNode batch = SpriteBatchNode::createWithTexture(lwfNode->getTexture()); batch->addChild(lwfNode); this->addChild(batch);

[/c]

【参考】テクスチャアトラス - LWF Wiki

最後に

今回は、「LWF」の基本について紹介をしました。「LWFS」には、その他Flashのオブジェクトを取得したり、ボタン（画面を触った）の反応をcocos2dxで拾ったりすることができるみたいなのですが、この辺りはまだ良くわかっていません。「LWFS」のwikiが随時更新をされているので、この辺りを注意をしてみたいです。 Cocos2d-xで利用する - LWF Wiki

個人的にFlashを初めて触ったので、あまり良いエフェクトが作成できていません。限られた制限の中で、ヌルヌル動くようにするのはとても大変です。また、元になっている画像が少しぼやけた感じで表示されているのも気になります。今後はこのFlashを作成する部分をもっと勉強しないといけないと感じました。

【追記 12/24】もし、cocos2dxのバージョンが古い場合にビルドエラーが出る可能性があります。その際の対処方法をブログに書きましたので、もし該当するようならこちらを参考にしてみてください。