はじめてのLWF

2014年6月7日土曜日

WebGLRenderer にカラー機能が追加

LWFの20140605-1325のバージョンからHTML5版のWebGLRendererにカラー機能が追加されました。

■カラー効果サンプル(WebGL)　※WebGL対応環境で開いてください
■カラー効果サンプル(canvas)　※Canvas Rendererではカラー処理は行われません

これでFlash上で設定した着色等の設定が完全に反映されるようになります。
また、スクリプトからもカラーを変更することもできます。

Canvasでこのようなカラー効果を適用すると非常に負荷がかかるため非対応でしたが
WebGLでは頂点カラー機能を使うことでパフォーマンスを大きく落とすことなく
カラー効果を実現できるため対応となりました。

WebGLについて

まだまだWebGL対応環境は少ないですが、Android4.4(一部は4.3でも対応)やiOS8から
WebGL対応環境となるので、今後どんどんスマホでWebGLを利用できる環境が整っていくと思います。

WebGLといえば3Dを使うための機能というイメージが強いと思いますが、WebGL描画はCanvas描画より
描画パフォーマンスが優れているケースが多いので、パフォーマンスが求められる2Dコンテンツの制作に
WebGLが用いられるケースは次第に増えていくと思います。

WebGLコンテンツを普通に作るのはかなり大変ですが
Flashを用いて簡単に2DのWebGLコンテンツが制作できるので
興味のある方は是非LWFを触ってみてください。

制作上の注意

WebGLのカラー効果がパフォーマンスに与える影響は大きくはありませんが
少しは影響があるのでデフォルトではカラー効果処理がOFFになっています。
LWFS上で有効にするにはsetting.jsに以下の記述を行ってください

window['testlwf_settings'] = {
  'useVertexColor': true
};

LWF再生時に使用するにはload時のオプションでuseVertecColor=trueを渡してください。

今回のサンプルのソース
zipファイル

LWFSのダウンロードはコチラ
https://github.com/gree/lwfs/releases/

2014年5月24日土曜日

XperiaZ2(SO-03F)の標準ブラウザでCanvasを使うとブラウザが落ちる件

最近発売されたXperiaZ2に機種変をしたのですが、標準ブラウザでブラウザゲームをしていると
やたらとブラウザが止まったり落ちたりするので、色々検証してみた結果
以下の条件がダメらしいということがわかりました。

標準ブラウザを使っている
サイズが256pxより大きいCanvasを使っている
window.setIntervalなどで繰り返し描画している
その状態で新規のタブを開く

上記の条件が揃うと、ブラウザ自体が固まり警告が出てきたりブラウザが強制終了してしまうようです。
LWFのwebkitcss rendererやwebgl rendererでは問題の現象は発生しなかったので
canvas rendererを使用しないことでひとまず回避することはできるようです。

標準ブラウザを使います。

条件を満たしたCanvasコンテンツがあるページを開きます。
http://tamagokobo.com/test/so-03ftest/ 等
そして、タブ切り替えボタンを選択します。

新規タブの追加ボタンを選択します。

ロード画面のままブラウザ全体が固まった感じになります

しばらくすると、警告メッセージがでたりブラウザが強制終了します。

他のAndroid4.4の端末でも軽く見てみましたが大丈夫だったので
XperiaZ2の標準ブラウザ限定の現象だと思います。

しかし、Canvasを使ったコンテンツがほぼ全てアウトな上に
ブラウザが固まったり落ちたりという結構深刻な問題なので困ったところです...( ´Д｀)

みんなchrome使えばいいんじゃね!

2014年3月16日日曜日

LWFS更新

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

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

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

LWF wiki

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を使用するようにしてください。

2014年2月25日火曜日

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を使ってみた

2013年12月11日水曜日

スマホでベクター

スマホで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とほぼ同じ速度で動いてるような気がする・・・
前の比較では殆ど一緒だったのにﾝﾅｾﾞｪ...

2013年12月8日日曜日

くそふら

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

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

登録: 投稿 (Atom)