LWFS更新

最近LWFSのアップ場所が変わりました。
新しい場所はこちらです。

https://github.com/gree/lwfs/releases/

wikiの方が比較的情報が早いのでそちらも参考にしてください。

LWF wiki

UnityでFlashの着色機能、加算合成を使う

LWFは環境によってはFlashのカラー効果（着色、詳細）や加算ブレンドを使用できます。
最近のLWFのアップデートにより、Flashで設定した加算ブレンドも適用されるようになりました。
今回はUnityでカラー効果を使用する方法について触れていきます。

ちなみに、各機能の対応環境の詳細はコチラに書かれています
https://github.com/gree/lwf/wiki/RendererComparison

カラー効果を使用する

Flashで設定したカラー効果はそのままではUnityに適用することができません。
なぜなら、カラー効果を適用することで若干パフォーマンスに影響が出てくるために
デフォルトではカラー効果がOFFになっているからです。
なので、LWFを追加するときのコードに着色機能を有効にする記述を追加する必要があります。

using UnityEngine;
using System.Collections;

public class LWFInstance : LWFObject {

   // Use this for initialization
   void Start () {
      string dir = System.IO.Path.GetDirectoryName(lwfName);
      if (dir.Length > 0) {
         dir += "/";
      }

      Load(lwfName, dir, useAdditionalColor:true);

   }
}

Loadメソッドの引数をuseAdditionalColorをtrueにすることでカラー効果が有効になります。

加算ブレンドを使用する

加算ブレンドを使用するには特に設定は必要ありません。
Flashで設定した加算ブレンドの設定がそのまま適用されます。

ただし、CombinedMeshかDrawMeshかによって挙動が異なりますので注意してください。
デフォルトではCombinedMeshが使用されます。

【CombinedMesh】
どこかのパーツに加算ブレンドが設定されていればLWFのパーツ全体に加算ブレンドが適用されます。

【DrawMesh】
各パーツごとに加算ブレンドの設定が適用されます。
ただし、1パーツごとに1draw call増えてしまうので注意してください。

DrawMeshを使用する場合は下記のコードを追加してください。

using UnityEngine;
using System.Collections;

public class LWFInstance : LWFObject {

   // Use this for initialization
   void Start () {
      string dir = System.IO.Path.GetDirectoryName(lwfName);
      if (dir.Length > 0) {
         dir += "/";
      }

      UseDrawMeshRenderer();
      Load(lwfName, dir, useAdditionalColor:true);

   }
}

---

着色効果や加算ブレンドが使えると表現の幅も広がりますね!

※4/18追記　useAdditionalColor:trueのCombinedMeshのオブジェクトに対して、一部のパーツだけ着色やアルファ効果をかけた際に効果をかけていない場所が真っ黒に描画されてしまう現象が一部環境にあるようです。
回避策としては効果をかけないパーツを作らないようにするか、DrawMeshを使用するようにしてください。

LWFを使ってUnityでカンタンに2Dアニメーションを作る

LWFはUnityでも扱うことができます。
最近、LWF for Unityの方も触り始めたので今回はLWFをUnityで扱う方法について触れていきます。

LWFデータを用意する

LWFデータを作る過程は省略します。

LWFSとFlashの扱い方は下記を参考にしてください
導入方法
制作方法

Unity用のFlashの作り方は下記を参考にしてください。
各環境共通のLWFの作り方

制作時の注意点

LWFを制作する際は座標に注意してください。
FlashのステージのX:0,Y:0(左上)を基点としてUnityのObjectにLWFが表示されるので
それを考慮して制作してください。
いつも通りのノリで作ると、Objectから離れた場所にLWFが表示される感じになります。

Flash的には変な感じですが、このように制作すれば正常に表示することができます。

lwf.unitypackageのダウンロード

Unity用のパッケージを下記からダウンロードします。
パッケージ

Unityにパッケージをインポートする

Unityで新規プロジェクトを開きます。

UnityのAssetsフォルダに先ほどダウンロードしたlwf.unitypackageをドラッグします。

すると、ウインドウが表示されるのでImportを選択します。

Importに成功するとAssetsフォルダにLWFに必要なファイルが追加されます。

LWFを表示させる

LWFを再生する環境が整ったのでLWFデータをResourcesフォルダ以下の任意の場所に設置します。

Unityに必要なLWFデータは下記の場所に生成されています

LWFS_work_output/unity/(プロジェクト名)

今回は下記の構造を作ってLWFデータを置きます。

Resources/LWFData/test/

LWFの再生を行うためLWFObjectを継承したコンポーネントを作ります。

using UnityEngine;
using System.Collections;

public class LWFInstance : LWFObject {

   // Use this for initialization
   void Start () {
      string dir = System.IO.Path.GetDirectoryName(lwfName);
      if (dir.Length > 0) {
         dir += "/";
      }

      Load(lwfName, dir);

   }
}

※Updateが存在するとエラーが発生するのでStartのみ定義してください。

次はEmptyObjectを作って、先ほど作ったコンポーネントを追加します。
コンポーネントの変数lwfNameにはResourcesフォルダから見たLWFデータのパスを指定します。
今回の場合は

LWFData/test/test

となります。(拡張子は必要ありません)

そして、再生するとこのようにLWFアニメーションが再生することができます!

---

このように、Unity上でFlashで作ったアニメーションをカンタンに再生することができます。
Unity4.3で追加された2Dアニメーションツールもかなり高機能になってきていますが
Flashさえ扱えれば誰でもUnityやCocos-2d-xに向けてカンタンに複雑な2Dアニメーションが作れるLWFも是非使ってみてください!

今後、Unity上でLWFを制御したりする方法や、加算合成、着色処理を使う方法にも触れていきたいと思います。

---

参考にさせていただいたサイト
UnityでLWFを使ってみた

スマホでベクター

スマホでFlashのようなベクター画像をそのまま使うとやはり重くなるのだろうか・・・
勉強会のネタにもできるだろうと思って検証。
検証機としてはiPhone4S iOS7を使ってみました。
スマホの中では、かなり高速に動く部類の端末です。

LWFはベクターが使えないので、まずはCreateJSで実験。

※ちゃんと、FPS測っているわけではなく体感で測ってます。すいません...
//------

３種類のベクター図形に切り替わるインスタンスを100個配置。(60fps)
http://lwfs.tamagokobo.com/createjs/shapeSimpleTest/shapeSimpleTest.html

【結果】
うん・・・まあ、わかってはいましたけど何も対策しなけりゃムチャクチャ重い・・・

//------

３種類のベクター図形(グラデーション)に切り替わるインスタンスを100個配置。(60fps)
http://lwfs.tamagokobo.com/createjs/shapeTest/shapeTest.html

【結果】
グラデーション塗りにすると更に激重に・・・。

//------

CreateJSにはcache機能があるので、各図形をキャッシュするようにしてみました。
http://lwfs.tamagokobo.com/createjs/shapeCacheTest/shapeCacheTest.html

【結果】
やはりキャッシュして画像にしてしまうとかなり軽くなりました。しかし、FPS若干落ちてしまっている印象...

//------

キャッシュするとはいえ、最初は描画はしないといけないのでLWFみたいに最初から画像にしてみました。
http://lwfs.tamagokobo.com/createjs/shapeToImageTest/shapeToImageTest.html

【結果】
cacheと比べてそこまで劇的な変化はなかったが、ガクつきがなくなり安定した印象。
でも、PCに比べるとやっぱりなんか遅い気が...

//------

やはり、スマホで使っていくには極力ベクターは使わない方が安心かなぁという結論。
しっかりチューニングすれば、問題ない気もしますが大変そうだ・・・


比較用にLWFも作ってみました。

フレームスキップOFF canvas renderer
http://lwfs.tamagokobo.com/lwf/createjsTest2/

フレームスキップON版 canvas renderer
※最大で3フレームスキップします。(デフォルト設定)
http://lwfs.tamagokobo.com/lwf/createjsTest3/

なんかLWF版のほうがPCとほぼ同じ速度で動いてるような気がする・・・
前の比較では殆ど一緒だったのにﾝﾅｾﾞｪ...

くそふら

FlashOFFイベントに触発されてLWFでクソフラをつくってみた。
スマホ向けにクソフラをつくってみるのもまた一興...

http://lwfs.tamagokobo.com/lwf/kusofla/

LWF for HTML 勉強会 12/16 -19:00-

LWF for HTMLも結構安定してきたと思うので、ここらで一回勉強会を開いてみたいと思い12/16に開催することになりました。
LWFを初めて触る方やLWFを知らない方に向けて、実演を交えて説明していきたいと思います。

詳細はこちら

LWFは主要なスマートフォンブラウザで動作することを前提に開発されているので、スマートフォンのweb向けにアニメーションやゲームなどを作っている or 作ってみたい と思っている方は是非参加していただければと思います!

Flash CC アップデート

Flash CC に HTML5 canvas ドキュメントが追加されたので久々にCreateJSを触ってみました。
コメント /* js  */で囲まなくても直接スクリプトが書ける...!
ctrl + enter でサクッと書き出せるのもお手軽。

このドキュメントだとswfが書き出せないので、swfを通して変換するLWFはそもそも使えないので恩恵はなかった...( ´Д｀)残念

CreateJSを触ってみたついでにLWFとの比較用に簡単なものを作ってみました。
弾を撃っている子が300匹います。

・CreateJS
http://lwfs.tamagokobo.com/createjs/test/createjs_test.html
・LWF
http://lwfs.tamagokobo.com/lwf/createjstest/

CreateJSと出来る限り同じ条件にするためにLWF側は下記の設定にしています。
・フレームスキップはオフ
・どの環境でもcanvas rendererを使用

CreateJSでフレームスキップを有効にする方法がよくわからなかったので、LWF側の方のフレームスキップをオフにしました。そもそもできるのだろうか。
そして、iPhoneで見た際にCreateJSの方はなんか画像がぼやけてる気がする。
なにか設定が違っているのだろうか・・・

CreateJSの方ももう少し触らないとダメですね・・・