Zynga Japan さんとこで話してきた事

先週の木曜日に、Zynga Japan さんのオフィスにお邪魔して色々と話してきました。
とりあえず僕が口を開けば SWF しか出てきません。(キリっ
NDA 的な事は話してないので、ブログにまとめてみます。
# 隠し玉のネタも話してきましたが、実装してから公にしたいので秘密 :-)

SWF のおさらい

ヘッダ構造と画像系のタグ。制御系タグとディスプレイリスト。
gordon.js を知る為の前提知識の復習。

gordon.js について

JS 製の Flash Player。但し v1 しか対応してない。

JS で SWF を parse して Shape 構造を Placeタグで配置するのを SVG で表現して、setInterval で ShowFrame までの制御構造を読んで SVG のノードを DOM につけ外しする事でアニメーションしたり、JS の mouse や button のハンドラで、内部イベントを発生させたり、ActionByte コードを 1 operand ずつ読んで VM っぽい構造を操作して動く。

最近は、シンボルによる multi timeline に対応しようとしてるコードがあるけど、オブジェクトの取り回しに失敗してるっぽくて全然動かない。Worker スレッド使ってて、ちょっと嫌な感じがする。(デバッグしにくいし同期とか怪しくなるし微妙)

gordon.js の対案

gordon.js は js でバイナリパースしたり、コンテンツを base64 で展開したり、ベクトル画像を全て SVG で展開してコマ毎に DOM につけたり外したりしてる。
とにかく重たそう。

透明度付き画像の扱いに難儀してるのを考えると、バックエンドでコンテンツリポジトリを持って URL でアクセスする事にして、画像はすべてα補正を戻した PNG 画像に変換して使ったり、SVG 構造も表示枠の大きさに応じてデフォルメしたりすれば、かなり軽くなるんじゃない？
ActionByteCode を逆アセして JS (変数名に prefix 付けるとかして、ほぼそのまま展開するとかして) で出力すると fetch exec が一段階軽くなるよね。という話もあったけど、Flash Lite で複雑な Script を組むのはあまり無さそうなので、後回しがよさそう。

SWFEditor

setActionVariables というActionScript の変数代入イメージを、1 frame 目に挿入するメソッドを紹介。なので 1 frame 目に戻った時にまた初期化される罠がある。
FlashLite の王道として 1frame 目はダミーで 2frame 目が実質的な先頭コマになる事が多いので大丈夫なはず。。。
setActionVariables で値の入った変数は定数として扱って、別の変数に代入して使いまわすのが良いと思う。

setShapeAdjustMode の紹介。サイズの違う画像を入れ替えた場合に枠に合わせた処理を入れたので、その枠への合わせ方を指定するメソッド。

adjustShapeBitmap 出来たー (JPEG 限定だけど) - yoyaのメモ

これを作る為にアフィン変換の処理を書いたので、その処理を直接呼ぶメソッド(applyShapeMatrixFactor)も用意してる。アフィン変換なので本来は傾ける事も出来るが、とりあえず角度を指定して回転させるインターフェースを用意した。ただ、(0,0)原点での回転なので扱いづらい。180度回転する枠の外にはみ出ちゃう。実験段階だし、処理を変える可能性が高い。

それを実装するにあたって、DefineShape タグを一年近くいじってきてて、とても面白い構造をしていたのでその紹介。
画像のスケールに応じてベクトルデータを省略する処理を作っているとも。
縮小して表示する場合は、そもそも細かいベクトルは要らないので、線分の真ん中を端折るとか。そういう処理を実装中。

あと、色々と改善提案も伺いました。もう少し具体的なイメージを固めたら実装に入ります。

その他

FlashLite(SWF動的生成)勉強会お願いしますー。
ZendEngine 勉強会２月の真ん中にしました。発表お願いしますー。
また遊びに来させて下さい。お願いします。

お願いばっかりで、すみませんｗ