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測っているわけではなく体感で測ってます。すいません...
//------

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

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

//------

3種類のベクター図形(グラデーション)に切り替わるインスタンスを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/

2013年12月6日金曜日

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

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

詳細はこちら

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

2013年12月5日木曜日

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の方ももう少し触らないとダメですね・・・

2013年12月1日日曜日

num1000

この前はゲームを作ったので、今度はアニメーションメインのものを作ってみようと思い
有名なFlash「num1000」を再現してLWF版を作ってみました。

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

この頃から、Flashに憧れて始めたのを思い出します。
所々オリジナルと動きが違ってしまっていますがご容赦ください...

意外とFlashは制作ツールとして優秀で、今でも裏方として頑張っていたりします。
最近は新しくFlashを始めようという人は少なくなってしまいましたが、やってみると意外と色々勉強になっておもしろいのですよ。

2013年11月25日月曜日

シューティング

LWFでゲームっぽいものを作ってみようと思い軽くシューティングっぽいものを作ってみました。
相手を撃てるだけですが・・・
ゲーム開始前にどのrendererを使っているか表示されます。
webGL対応環境であればwebGLで動作するようになっています。
是非、AndroidやiOSの端末で見ていただければと思います

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