2014」の17日目の記事になります。cocos2dxでヌルヌルとしてエフェクトを実装したいと思い、色々と調べた中で「LWF」を使う方法を見つけました。「LWF」はFlashで作成ができる汎用2Dアニメーションデータのことで、cocos2dxをはじめUnityなどでも利用ができます。実際に試して見てとても簡単に使うことができました。今回は、この「LWF」を使い、cocos2dxでFlashを利用する方法を紹介します。3.2準備まずは、「LWFS」を利用するための準備を行います。ダウンロード下記サイトから、LWFSをインストールします。OSによって種類が違うので注意をして下さい。githubインストール先ほどをダウンロードをしたZipを解凍します。エラーLWFSフォルダ内の[Start]を開こうとするとエラーが出ます。これが出た場合、下記のような方法を試してみてください。以前にLWFSをインストールしている場合は、これを削除する。Downloadではない別の場所にフォルダを移動させる。これでもダメな場合、下記コマンドを「ターミナル」で実行して下さい。LWFSおそらく、このコマンドを入力すれば[Start]が上手く動くと思います。次に、実際にcocos2dxで利用するFlashで作成したエフェクトを準備します。これはFlashで作成をします。Flashの利用方法やエフェクトの作り方については、ここでは書きませんので別途調べて下さい。作成したFlashは[LWFS_workフォルダ]に保存をして下さい。これは、「LWFS」をインストールをした際に[デスクトップ]に作成されています。その中に、Flashファイルを保存するフォルダを作って、その中に保存をします。エフェクト作成の際の注意点この部分、個人的に躓きました。「LWFS」では、作成したFlashを全て使えるわけではありません。制限があるので、これらに注意をしてください。ドロップシャドウ、ぼかし、ベベルなどのフィルタ機能は使えません。全ての機能は利用できません。加算、消去、マスク、レイヤーを除いたブレンドモードは利用できません。私は「ぼかし」を使ったエフェクトを利用したいがために、この度勉強をしたので非常に残念でした。LWFに変換する最後に作成したFlashを、LWFファイルに変換をします。LWF]が利用できるようになります。これを押せば、Flashが「LWFS」に変換されます。[Status]がOKになれば変換完了です。変換されない場合は、「LWFS」フォルダの[Start]を開いて下さい。確認Flashから変換された「LWF」を確認する方法なのですが、cocos2dxの場合[WebGl]を開いて下さい。下記のFlashが確認できます。先ほど作成したエフェクトをcocos2dxで利用をしてみましょう。lwfプロジェクトをプロジェクトに追加するcocos2dxのプロジェクトに必要なファイルを追加します。サンプルプロジェクトをダウンロードするcocos2dx用の[サンプルプロジェクト]が公開されています。下記サイトからダウンロードして下さい。GitHublwfフォルダをプロジェクトに追加するこのフォルダの中にある[lwfフォルダ]を、自分のプロジェクトにコピーします。コピペを使うと楽です。lwfプロジェクトを追加する先ほどコピペをしてもらった[lwfフォルダ]の中に[lwf.xcodeproj]があります。これをプロジェクトへ追加をします。これはXcode上から行って下さい。追加されますと、以下の様なファイル構成になります。Settingプロジェクトのターゲットに[LWF]を追加します。Paths]を変更します。C//この2つを追加して下さい。$(SRCROOT)/../lwf/cplusplus/cocos2dx123//この2つを追加して下さい。LWFファイルと画像データをプロジェクトに追加する先ほどFlashで作成をしたエフェクトに必要なファイルをプロジェクトに追加します。デスクトップに[LWFS_work_outputフォルダ]があります。この中、[native]を開いて下さい。先ほど作成したFlashを格納した時のフォルダ名があると思います。この中に必要なファイルが自動的に作成されています。これをプロジェクトに追加します。今回はフォルダの階層を有効にして追加をしています。Wikiコードエフェクトが必要な場面でLWFファイルを呼び出せばエフェクトが画面上に表示されます。//ここでlwfファイルを指定します。"lwf_cocos2dx.h"//ここでlwfファイルを指定します。visibleSize.height);this->addChild(lwfNode);位置の調整Flashを作成する段階で、デバイスのサイズに合わせて作成すれば、画面上の調整が楽になります。C//調整する場合は、この2つのコードを使います。lwfNode->lwf->FitForHeight(width,height);123//調整する場合は、この2つのコードを使います。lwfNode->setPosition(pos);lwfNode->lwf->FitForHeight(width,height);画像テクスチャアトラスを利用テクスチャアトラスを利用すれば、複数の画像を1つにまとめられます。テクスチャアトラスを作成するTexturePacker(有料)を利用すれば、簡単にテクスチャアトラスが作成できます。以下の設定をしてテクスチャアトラスを作成しましょう。artifacts:チェックを入れるLWFに変換する作成したテクスチャアトラスは、[LWFS_work]フォルダに保存をします。すると、[LWFS_work_outputフォルダ]に、テクスチャアトラスを利用したLWFファイルが作成されます。これを先ほどのようにプロジェクトに追加をします。実行する際には下記のようなコードを利用します。Wiki最後に今回は、「LWF」の基本について紹介をしました。「LWFS」には、その他Flashのオブジェクトを取得したり、ボタン(画面を触った)の反応をcocos2dxで拾ったりすることができるみたいなのですが、この辺りはまだ良くわかっていません。「LWFS」のwikiが随時更新をされているので、この辺りを注意をしてみたいです。Wiki個人的にFlashを初めて触ったので、あまり良いエフェクトが作成できていません。限られた制限の中で、ヌルヌル動くようにするのはとても大変です。元になっている画像が少しぼやけた感じで表示されているのも気になります。今後はこのFlashを作成する部分をもっと勉強しないといけないと感じました。12/24】もし、cocos2dxのバージョンが古い場合にビルドエラーが出る可能性があります。その際の対処方法をブログに書きましたので、もし該当するようならこちらを参考にしてみてください。「LWF」の日本語での不具合報告窓口ができました。11934Amazonで詳しく見るツイートalbatrus.comの更新情報を以下のサービスで配信しています。次の記事Unityで、某会社のiOS/Androidのゲームアプリを作成しています。個人でもアプリを開発していましたが、現在は休養中。エフェクト,3DCGなど演出面を今後やっていきたいと思っています。@albatrus_jpさんのツイート個人的にcocos2dxを勉強するサイトを作成しています。