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/

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使えばいいんじゃね!

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

num1000

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

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

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

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

シューティング

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

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

lwfのwikiができました。

LWF for HTML5の制作に関する情報があつまっているwikiが出来ました!

http://lwf-users.org/

私も情報を書いていったりしていきます。
制作に関する情報はこちらにまとめていきたいと思います。

スクリプトに関してはHTML5ように書いていますがUnityでも似たようなAPIがあるので参考になったりします

LWFS更新

LWFSが最新版に更新されました。(20130801-1247)
ダウンロードはこちらから

---

今回はかなり変更点が大きいのでその辺りも含めて後々紹介して行きたいと思います
(次回予定していたダイナミックテキストの扱い方も若干変わるので、新しい方法で近いうちに紹介したいと思います)

今回の変更点で大きな変更は主に下記のものになります

・Flash CC対応
Flashの一番新しいバージョンFlash Creative CloudでLWFを制作することが可能となりました。

・Publish for LWF.jsfl　の追加
パブリッシュ時に使用するjsflファイル(コマンドファイル)が今までのLWF_Publish.jsflが廃止となり
新しくPublish for LWF.jsflが追加されました。LWF_Publish.jsflが残っている方は間違いをなくすためにも削除しておくことをおすすめします。
新しいパブリッシュは非常に高速で動作するようになり、重いコンテンツで待たされることもなくなります。

・Movieインスタンスのパフォーマンス向上
ムービークリップやattachMovieで追加したMovieインスタンスは、数が多くなるほど顕著にパフォーマンスに影響を与えていましたが、改善され非常に軽快に動作するようになりました。

・WebGL本格対応
モバイルでのwebGL描画に本格対応されました。今年に出たAndroid端末の標準ブラウザは意外とwebGLに対応している端末が多いので対応端末を持っている方は是非↓のサンプルをみて確認してみてください。Androidのブラウザとは思えないほど軽快に動作します。
(まだ一部の端末の標準ブラウザは表示がおかしいみたいです)

標準ブラウザが対応していなくてもchromeでwebGLを有効にすれば見ることができます。
※有効にする方法はググってみてください。一応テスト機能なので自己責任でお願いします

---

新しいLWFSで書きだしたものがこちらになります。是非、AndroidやiOS端末で見て比較してみてください。

webkitcss
canvas
webGL

ソース

【機能】スプライトシートを使用する

今回は、複数の画像を1枚の画像にまとめたスプライトシートを扱う方法について触れたいと思います。
スプライトシートに纏めて読み込むファイル数を減らすことでことで、纏める前に比べて高速なローディングを実現することができます。

---

まずは、普通にLWFのコンテンツを作りLWFSで書き出してみましょう。
LWFを作ってパブリッシュすると場合、LWFS_workフォルダの作業フォルダ内に
新しくswfファイルと(ファイル名)+.bitmap　という名前のフォルダが生成されます。

作られていることを確認したら、.bitmapフォルダの中に入ってみましょう。
すると、制作したLWFで使用されている画像が入っています。
コチラのサンプルLWFのbitmapフォルダの中は↓のようになっています。

これらの画像を↓のような一枚の画像にしたいと思います。

このように１枚の画像にまとめる機能を持ったアプリは、主に下記のようなものがあります。
・Adobe Flash CS6以降のバージョン
・TexturePacker (シェアウェア)

今回は、上記の2種類のアプリのうちFlashを使用した方法をメインに紹介していきます。

---

【Flash CS6以降】
まずは新規ファイルを開きます。
そして、ライブラリの中に.bitmapフォルダ内にあるすべての画像を読込ましょう。
読み込みが完了したらライブラリ内の画像を全て選択し右クリックで「スプライトシートを作成」
を選択しましょう。

すると↓のような画面が出てくると思います

ボーダーやシェイプの余白は2pxほど空けておきましょう。
また、画像のサイズは1024×1024を超えないように注意してください。超えてしまうと端末によっては動作に支障をきたしてしまいます。
書き出し先はflaと同階層で、適当な名前(英数字のみ)のファイル名で書きだしてください。
あと、必ずデータ形式は「JSON」にしてください。その他の形式を選ぶと使用出来ません。
また、その下にある回転やカットにはチェックを入れないでください。

そして、書き出しを完了すると１つになった画像ファイルと、その画像に関する情報が収まっている
.jsonファイルが出力されます。そしてこのjsonファイルの文字コードを変える必要があるので、文字コードを指定して保存できるエディタ(TeraPad, K2Editor等)で開き、文字コードをUTF-8Nにして上書き保存してください。(BOM付きはNGです)

そうすると、LWFSが自動で変換をしてくれます。変換完了後にLWFS_work_outputフォルダの該当の場所を見てみると、1枚にまとめた画像のみがファイルに入っていると思います。

この状態で実際動いていることを確認したら、完了となります。

---

【TexturePacker】
こちらは、シェアウェアとなりますがFlashと比べて細かい部分で高機能となります。
http://www.codeandweb.com/texturepacker
(様々な配置アルゴリズムや、画像サイズを2の自乗以外でも計算してくれる等)

書き出す際にはData Formatは「JSON Hash」を選択してください。
また、rotateやTrimには対応していないのでAllow rotationは無効。Trim modeはNoneにしてください。
こちらはjsonを書きだした後に文字コードを変更する必要はありません。

---

容量削減のために画像の減色などを行いたい場合は、まとめた画像に対して行なってください。

サンプルに使用したLWFはこちらになります。
・webkitcss
・canvas
・webgl

次回は、ダイナミックテキストの装飾や整列機能について触れていきたいと思います

【機能】着色された状態の画像を生成する

※2013/6/4にLWFSがアップデートされています。最新版はこちらから

---

今回は、着色された状態の画像を生成する方法に触れていきたいと思います。
そもそもLWFではパフォーマンス面の問題から、Flashにあるようなリアルタイムでの着色に
対応していません。
しかし、それを少しでも補うために予め着色処理を施した画像を生成することができます。

↑このような着色状態の画像を生成します。

この機能を使うことで、擬似的に着色効果を出すことができます。
例えば、画像をゆっくり赤色に着色したい場合、元の画像の上に着色処理をした画像を
透明にして乗せて、徐々に透明度を下げていくことで実現します。

タイムラインで赤色に着色された画像の透明度を徐々に0に

この機能を使えば1枚の画像容量で様々な着色効果をもった画像を生成することができます。
ただし、生成した分だけメモリは消費するので生成のしすぎには注意しましょう。

【着色画像生成機能】

webkitcss	○
canvas	○
webgl	○

---

この機能の使い方に入りたいと思います。
まずは、ライブラリに元となる画像を追加します。
追加したあと、更に同じ画像を追加します。
そうすると、上書きするかどうか警告が出ますが、置き換えないを選択してください。

置き換えないを選択

img.png のコピーが追加される

そうすると、xxxxxx.png のコピー　という画像が追加されると思います。
この画像の名前(及びリンケージ名)を特定の名前にすることで、着色機能が反映されます。

---

では、使い方の説明に入ります。例として、元の画像をimg.png　更に追加した画像を
img.png のコピーとして説明を進めていきます。

【着色】

・  (元画像の名前) + "_rgb_[カラーコード]" + .png
・  (元画像の名前) + "_rgb_" + "赤(0-255)" , "緑(0-255)" , "青(0-255)" + .png

元の画像を指定した色でベタ塗りにした画像を生成します。
元の画像を青色でベタ塗りにした画像を生成したい場合
img.png のコピー　の名前を img_rgb_0000ff.png　又は　img_rgb_0,0,255.png に変更します。

このように設定をしてLWFSで書き出しを行うとLWF上では下記の図のように表示されます

【半透明着色】

・(元画像の名前) + "_rgba_[アルファ付カラーコード]" + .png
・(元画像の名前) + "_rgba_" + "赤(0-255)" , "緑(0-255)" , "青(0-255)" , "透明度(0-255)" + .png

元の画像を指定した色と透明度でベタ塗りにした画像を生成します。
元の画像を半透明の青色でベタ塗りにした画像を生成したい場合
img.png のコピー　の名前を img_rgba_0000ff88.png　又は　img_rgba_0,0,255,136.png に変更します。

このように設定をしてLWFSで書き出しを行うとLWF上では下記の図のように表示されます

【加算合成】

・(元画像の名前) + "_add_[カラーコード]" + .png
・(元画像の名前) + "_add_" + "赤(0-255)" , "緑(0-255)" , "青(0-255)" + .png

元の画像を指定した色で加算合成した画像を生成できます。
元の画像を少し光らせた画像を生成したい場合
img.png のコピー　の名前を img_add_444444.png　又は　img_rgba_68,68,68.png に変更します。

このように設定をしてLWFSで書き出しを行うとLWF上では下記の図のように表示されます

---

サンプルのLWFとソースはこちらになります。
様々な着色効果を使っていますが実際に使用されている画像は元の画像1枚だけになります。
逆に元の画像がない状態で着色効果を使うとエラーになりますので、必ず元の画像は
残しておきましょう。

webkitcss　canvas　webgl

ソース

---

次回は、複数の画像素材を一つの画像素材に纏めた状態にする
いわゆるアトラス化、スプライト化と呼ばれるものの方法について触れていきたいと思います

【スクリプト】加算合成やマスクを使用する

今回は、マスクや加算合成についてです。
これらの効果を使うことで、よりリッチな表現を手軽に実現出来ます。
ただし、マスク処理については少々処理が重いため、使い過ぎるとパーフォーマンスの低下を
招いてしまうので注意しましょう。
また、残念ながらこれらの効果はすべての描画方式に対応しているわけではなく
主にwebkitcss描画で使用できないものがありますのでご注意ください。

---

【加算合成】

webkitcss	×
canvas	○
webgl	○

加算合成を使用するには対象とするMCに下記のようにプロパティの設定します

/* js this.targetMC.blendMode = "add"; */

マスクや加算合成を適用させる場合は blendMode というプロパティを使用します。
加算合成を適用すると下の図のような感じになります

---

【マスク】

webkitcss	×
canvas	○
webgl	○

マスクを使用するには対象のMCに下記のプロパティを設定します

/* js //マスク形状となるMC this.maskMC.blendMode = "erase"; //マスク対象となるMC this.targetMC.blendMode = "layer"; */

マスクの形状として使うMCは blendMode="erase"

マスクの対象となるMCには blendMode="layer"

を設定しましょう。

また、マスク形状となるMCは対象のMCより上の階層に配置しましょう

適用させると下の図のような感じになります

---

【矩形マスク】

webkitcss	○
canvas	○
webgl	○

これは、画像形状ではなく、画像が収まっている矩形領域でマスクされます。

なので矩形以外の形状でマスクすることはできませんが、どの描画方式にも対応しています

矩形マスクを使用するには対象のMCに下記のプロパティを設定します

/* js //マスク形状となるMC this.maskMC.blendMode = "mask"; //マスク対象となるMC this.targetMC.blendMode = "layer"; */

マスクの形状として使うMCは blendMode="mask"
マスクの対象となるMCには blendMode="layer"
を設定しましょう。
また、マスク形状となるMCは対象のMCより上の階層に配置しましょう

適用させると下の図のような感じになります

---

このような感じで加算合成やマスク処理を行うことができます。
サンプルのLWFとソースはこちらになります。

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part4/index-webkitcss.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part4/index-canvas.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part4/index-webgl.html

http://lwfs.tamagokobo.com/source/part4/part4.fla

---

次回は、画像の着色について触れていきたいと思います。

【スクリプト】ライブラリのMCを配置する

今回はFlashのライブラリにあるムービークリップ(以下MC)をスクリプトを用いて配置していきます。

LWF_Publish.jsflを使用すると、全てのMCにASリンケージ名が設定されます。
そのリンケージ名を使用します。
下記の図にあるMC名tori_mcを配置してみます。

その場合、下記のように記述します

/* js this.attachMovie("tori_mc","tori_mc"); */

<配置先MC>.attachMovie(<リンケージ名>,<配置MCのインスタンス名>,<option>);

という記述をします。

<option>はあってもなくても構いません。

また、返り値として配置されたMCが返ってくるので配置後、下記のように扱うこともできます。

/* js var mc = this.attachMovie("tori_mc","tori_mc"); mc.x = 100; mc.y = 200; mc.alpha = 0.5; //もちろん下記のように直接書いてもOKです this.tori_mc.rotation = 30; */

第３引数のoptionには下記の設定を行うことができます

    ・load:MCが配置された時点で実行

    ・postLoad:MCの描画準備が終わった時点で実行

    ・enterFrame:毎フレーム処理
    ・render:描画された時に実行

   　等

/* js var mc = this.attachMovie("tori_mc","tori_mc",{ "load":function(){ console.log("load!"); } }); */

---

下記は今回の配置を利用したサンプルになります。

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part2_5/index-webkitcss.html

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part2_5/index-canvas.html

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part2_5/index-webgl.html

ソースはこちらになります
http://lwfs.tamagokobo.com/source/part2_5/part2_5.fla

上記を見ていただくとwebkitcss版とcanvas版,webgl版には違いがあることがわかると思います。

canvas版とwebgl版では加算合成になっていると思います。

次回は、上記の加算合成の方法やマスクといった部分に触れていきたいと思います。

【スクリプト】ボタンを使おう

前回から今回までの間にLWFSが最新版が公開されています。

自分のOSに合った最新版を選んでください。
https://code.google.com/p/lwfs/downloads/list

---

(今回使用したLWFS:LWFS-win-20130508-1233.zip)

今回はボタンを扱う方法になります。
LWFでボタンを使う場合はFlashのボタンインスタンスを利用します。

ボタンインスタンスにはヒット領域以外設定することができません。
かつ、ヒット領域は矩形のみ使用することができます。なお、ヒット領域の設定は
シェイプでも設定出来ます。

そうするとこのようなヒット領域のみのボタンインスタンスが出来上がります。
※ボタンインスタンスはパブリッシュすると見えなくなるので、何か別のインスタンスの上にかぶせる形で利用してください

このボタンにスクリプトを適用していくことになりますが、主に下記の２つの方法があります

・ボタンに直にスクリプトを記述する

・ボタンにインスタンス名をつけてフレームスクリプト側で制御する

【ボタンに直にスクリプトを記述する】
ボタンにスクリプトを直接書き込んでいくAS1ライクな方法です。
ボタンインスタンスに下記のスクリプトを記述するとボタンを押した時にalertが発生します。

on(press){ /* js alert("nya-n"); */ }

【ボタンにインスタンス名をつけてフレームスクリプト側で制御する】

ボタンにイベントリスナーを設定するAS3ライクな方法です。

ボタンに"button"というインスタンス名をつけて、フレームスクリプトで設定を行います

/* js this.button.addEventListener("press",function(){ alert("nya-n"); }); */

"press"となっている部分はそれぞれ下記の設定を行うことができます

・"press" : 押した時に実行

・"release" : 離した時に実行

・"rollOver : 領域内に入った時に実行

・"rollOut" : 領域外に出た時に実行

---

下記はボタンを利用したLWFサンプルです。attachボタンを押すと、ムービークリップがどんどん増えていきます。

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part2/index-webkitcss.html

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part2/index-canvas.html

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part2/index-webgl.html

ソースはこちらになります

http://lwfs.tamagokobo.com/source/part2/part2.fla

次回はスクリプトによる動的なムービークリップの生成に触れていきたいと思います。

LWFのスクリプト

今回はスクリプトでタイムラインの制御をやってみたいと思います。

ですが、まずLWF for HTML5での基本的なスクリプトの記述について触れたいと思います。

基本的にスクリプトはフレームに記述していきます。
また、actionScriptではなくjavaScriptで記述します。

上記の画像のように

/* js

*/

と記述し、その間にjavascriptを記述していきます。
また、ムービークリップの1フレーム目の記述に限り、下記の記述を行うことができます。

/* js_load    （MCが生成された時点で1回だけ実行)
/*js_postLoad    (MCの再生準備が整った時に1回だけ実行)

ですが、ひとまず上記は置いておきます。後に詳しく触れたいと思います。

---

では、本題に入ります。
前回作った鳥が跳ねるムービークリップを改造したいと思います。
下記のような感じにして1フレーム目と最後のフレームにスクリプトの記述を行いました。

1フレーム目には下記のように記述しています

/* js this.gotoAndPlay("start"); */

上記のスクリプトでまず、ラベル名[start]のフレームにジャンプしています。このように

ラベル名を指定してgotoAndPlay(),gotoAndStop()を行うことができます。

もちろんフレーム数でも指定することができます。Flashと同じく最初は1フレームから始まります。

スクリプト中のthisはムービークリップ自身を指しています。
ムービークリップ(LWF上ではMovieクラス)はこの他にも様々なメソッドがあります。

また、最後のフレームも上記と同じような記述になっておりアニメーションをループしています。

---

他にもplay()やstop()などで再生、停止を行ったりすることもできます。
サンプルLWFを下記の場所に置いてみましたのでご参考にどうぞ

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part1/index-webkitcss.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part1/index-canvas.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part1/index-webgl.html

元のflaファイルはこちらになります。

http://lwfs.tamagokobo.com/source/part1/part1.fla

上記のLWFを見ていただければわかると思いますがボタンが使用されていると思います。
次回は、このボタンについて詳しく触れていきたいと思います。

実機で確認してみよう

作業を始める前に・・・
前回から今回までの間にLWFSが最新版になっているのでDLしておきましょう。
(前回までLWFS-win-20130328-1500を使っていました)

自分のOSに合った最新版を選んでください。
https://code.google.com/p/lwfs/downloads/list


追加された機能などについては後々触れていきたいと思います。

---

では、先ほどLWFSで作ったものをAndroidやiPhoneといった端末で実機確認をしてみましょう。
LWFSで作品を見た時に右上にQRコードが出ていたと思いますが、このままでは見ることが
できません。
（※ローカルで仮想環境を作っているので他の端末からはアクセスできないため)

なので、LWFSで生成されたファイルを他の端末からでも閲覧可能な環境にアップする必要
があります。

生成されたファイルはデスクトップの「LWFS_work_output」フォルダに格納されています。
自分でアップロードできる環境がある方は、このフォルダの中身をアップロードしてみましょう。
LWFS_work_output/html5/list/[作成されたフォルダ名]/にcss,canvas,webglそれぞれの描画用ページがあります。

アップロード環境がない。または面倒だ。という方のために前回作ったLWFを
下記の場所にアップロードしました。

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/test/index-canvas.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/test/index-webkitcss.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/test/index-webgl.html

各ページの右上にQRコードがあると思います。
これを端末で読み込んでアクセスすると、各描画に対応していれば再生が始まります。
生成されたHTMLに既にスマートフォンで閲覧する際に最適な設定がされているため
スマートフォン確認用のHTMLなどをいちいち用意する必要がありません。
このようにアップロードする手間はありますが、比較的気軽に制作したLWFを実機で
確認することができます。

---

また、LWFSの閲覧ページにはいくつかの機能があります。
下記のページでは以下のキーでLWFの再生設定を行うことができます

SPACE:リスタート
S:停止、再開
F:コマ送り(Sで停止した場合のみ)
UP/DOWN:フレームレートの変更
D:ステージサイズの変更
ESC:停止(再開不可)

上記の設定を反映した状態で実機確認したい場合は設定を行った後で
ページ上部の(open with current settings)を開いてください。
その設定が反映された状態のページが新しく開きます。そのページのQRコードを読み込むと
その設定が反映された状態で実機確認を行うことができます。
下記のリンクは先ほどのLWFの再生設定を変更したページになります。

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/test/index-canvas.html?fr=10&fs=1&ds=0.5

フレームレートが落ちて、ステージサイズも半分になっており低スペックの端末でも
先程のものより比較的スムーズに再生されると思います。
このように色々と設定を変えて再生を行うこともできます。

---

次回はスクリプトを用いて簡単な再生の制御等を行なってみたいと思います。