狠狠撸

cocos2d-xで『LWF』を利用する
Lightweight SWF

自己紹介
横田直輝
@albatrus.jp
albatrus.com
Study-cocos2dx
名前
Twitter
HP
開発アプリ

主なエフェクト作成例
Actionクラス
アニメーション
パーティクル
個別のスプライトに対して、runAction()で動かす。
例、MoveTo MoveBy ScaleTo FadeTo JumpTo ………
Animationクラスを利用して、動くSpriteを作成する。
ParticleSystemクラスやParticle Designerを使う。

Super Animation Converter
?ブレイブフロンティアの演出で利用されている。
?Flashで作成できる。
?派手なアニメーションが実行できる。
色々と情報を調べたが、難しくて実装ができなかった。
主なエフェクト作成例

LWFとは
LWF(Lightweight SWF)とはGREEが開発している
オープンソースフレームワークです。
Cocos2d-x ?Unity?HTML5などで利用できる。
無料で利用でき、商業利用も可能。
Flashで２Dアニメーションが制作できる。

必要環境
Cocos2d-xのバージョン
V3.2以上
V3.1でもLWFを表示できたが、一部利用できない
機能があるのでV3.2以上が推奨されています。
Adobe Flashのバージョン
CS5.5以上（推奨CS6)

ダウンロード
LWFS
cocos2d-xサンプルプロジェクト
https://github.com/gree/lwfs/releases/
FlashからLWFに変換するツールです。
LWFが組み込まれたサンプルプロジェクト
https://github.com/splhack/Hello-LWF-Cocos2d-x

LWFSインストール
必要なフォルダの作成
ダウンロードしたLWFSを解凍すると、
LWF利用に必要なフォルダが作成されます。
?LWFS
?LWFS_work
[start]が実行できない場合
LWFSフォルダ内の[start]が実行できない場合は、以下を
ターミナルで実行して下さい。
xattr -d -r com.apple.quarantine LWFS
?LWFS_work_output

プロジェクトの设定
lwfフォルダを追加する
Cocos2d-xのサンプルファイルにある
「lwfフォルダ」をプロジェクトに追加する。
サンプルプロジェクトあなたのプロジェクト

「lwfフォルダ」にあるlwf.xcodeprojをxcode上に
追加をする。
lwf.xcodeprojをXcodeに追加
プロジェクトの设定

Xcodeの设定
プロジェクトのBuild Settingにある
[Search Paths]->[Header Search Paths]にLWFへのパスを
设定します。
パスの设定
$(SRCROOT)/../lwf/cplusplus/cocos2dx
$(SRCROOT)/../lwf/cplusplus/core

Xcodeの设定
プロジェクトのターゲットにあるBuild Phasesに、
lwfプロジェクトを追加します。(2箇所)
lwfプロジェクトの追加

Android側の设定
プロジェクトのjniフォルダにある[Android.mk]に
LWFへのパスを記載します。
?LOCAL_STATIC_LIBRARIES += lwf_static
?$(call import-module,../../lwf/project.android)
パスの设定

エフェクトの作成
Flashを利用してエフェクトを作成
Flashアニメーションの作り方は、勉強してください！

エフェクト作成時の注意点
Flashの一部の機能が利用できません
?ドロップシャドウ
?ぼかし
?ベベル
?一部のActionScript
アニメーションを作る時に注意して下さい！

スムージング
Flash内の画像を綺麗に表示させる
「スムージング」を行えば、画像が綺麗に表示されるので
見映えがする演出が可能です。
ビットマッププロパティ内

LWF書き出し
LWFS_workフォルダに保存する
作成したFlashファイルをLWFS_workフォルダに保存します。
Flashファイル毎に、フォルダを作って保存して下さい。エフェクトごとにフォルダを作って保存をしてください。

Publish for LWFの実行
LWF書き出し
Flashのコマンドメニューから、[Publish for LWF]を
実行します。

LWF書き出し
LWFSのstartを起動させる
LWFSフォルダにある[start]を
起動させます。
ブラウザにLWFSの画面が立ち上がります。

LWF書き出し
Flashアニメーションの確認
Cocos2d-xの場合,WebGLでアニメーションを確認します。
statusがOKになっていれば変換が成功です。
statusがOKならLWFへの変換成功です！

LWF書き出し
プロジェクトにLWFファイル?画像データを追加
Cocos2d-xで利用をする場合、
LWFS_work_outputフォルダの
[native]フォルダを開きます。
必要な画像ファイルとLWFファイルを選択し、あなたの
プロジェクトに追加をします。

実际に动かしてみよう！

サンプルコード
LWFを表示する
Spriteクラスと同じように、ファイルを指定して配置します。
これだけでLWFが表示できます。

テクスチャアトラス
テクスチャアトラスを作成
LWFS_workにある画像を使ってテクスチャアトラスを
作成します。今回は、TexturePackerを利用しました。
【Date Format】: JSON(Hash)
【Texture format】: PNG

保存
LWFへ書き出す
作成をしたテクスチャアトラスの
データをLWFS_workに保存をする。
LWFSフォルダにある[start]を
起動させると自動的に
テクスチャアトラス用のデータが
作成されます。

サンプルコード
テクスチャアトラスを利用する場合、コードが少し違う
ので、注意をして下さい。

Eventを取得する
ActionScript (Flash側)
Cocos2d-x(Xcode側)

実際に使ってみて
軽い
Flashは処理が重いイメージがあったのですが、
特に気にする所はなかった。
位置調整が難しい
個人的な問題かもしれませんが、上手く配置ができず
位置の調整に苦労しました。
簡単
特に必要な知識がなくても设定?利用ができた。

LWFの情報
公式Wiki
http://lwf-users.org/
LWFの设定、Cocos2d-xの设定など全ての情報が
掲載されています。
Cocos2d-x LWFのForum(英語)
2013年から、LWFの疑問?質問点の討論がされています。
何か問題点があれば、質問されている可能性があるかも。
http://discuss.cocos2d-x.org/t/lwf-for-c-with-cocos2d-x-renderer/10257

ご静聴ありがとうございました！

狠狠撸

第11回 cocos2d-x勉強会「cocos2dxでLWFを利用する」

More Related Content

第11回 cocos2d-x勉強会「cocos2dxでLWFを利用する」

狠狠撸

第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」

More Related Content

第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」

第11回 cocos2d-x勉強会「cocos2dxでLWFを利用する」

第11回 cocos2d-x勉強会「cocos2dxでLWFを利用する」