KLab若手エンジニアのこれなぁに？ : 2011年06月

太平洋高気圧はもうちょっと手加減してくれてもいいかな、って思うんですけど、やっぱり農作物なんかにはこの気温が必要なんでしょうか。 osuga-hです。ガラケーWEBでリッチコンテンツの要FlashLite。これまでソーシャルゲームではFlashLiteがゲーム演出の要でした。ところが時代はスマートフォン。各社ソーシャルゲームプラットフォームが一勢にスマートフォン用プラットフォームを公開してからそこそこ時間も経過しました。そこにプラットフォームがあるならゲームを出さねばなるまい！！！そんなわけでこそこそFlashLiteコンテンツをHTMLやらJSやらCSSに移植していたのですが、コレがもう全くノウハウにならない感覚作業のオンパレードで他人に伝承できない。なんとかならんのか？！そこで取り合えず既存のFlashLiteコンテンツをスマートフォン用にHTML5対応したときのログを公開してみようと思います。何回かに分ける予定で、今回は作業の全体像に関して言及していきます。

FlashをHTML5にする作業の流れ

そんなこんなで今回は全体の流れを紹介してみたいと思います。いずれの項目も決定版というより、いくつかやってきて取り合えずこれで落ち着いて来た、という内容になっています。なんとか改善できるところはないのか？自動化出来ないかというのは並行して模索中です。

前提

移植作業はそれまでのFlashコンテンツの作成方法や、動的合成の有無でまったく別のアプローチが必要になると思います。ここでは以下の条件下にあるFlashコンテンツの移植を扱います。

FlashコンテンツはAdobe Flashを使って実装されている。Flexは使われていない。
ロジック実装がされており、ボタンによる場面やUIの制御がActionScriptによって実装されている。
ASのバージョンは1だったり2だったりする。
素材を元にSWFを動的に生成している

1. flaファイルを見ながら、素材のレイアウトをHTML+CSSで再現する

（オーサリングツールの方の）Flashを使って、レイアウトを移植していきます。 ActionScriptは取り合えず無視して、対象のflaファイル（Flashのソースファイル）のルートタイムライン※1上で重要なフレームのレイアウトをHTML上に再現していきます。配置はflashと同様に絶対座標指定で行います。アニメーションは保留にして、バシバシ置いていきます。この段階で画像素材もHTML用に切りだします※2。作業コストは演出・素材点数に比例します。携帯コンテンツだとだいたい1日か長くても2日ぐらいじゃないでしょうか。 ※1 ルートというより実際にFlashを再生したときの見た目に近いタイムライン。 ※2 生の素材を使ってもいいのですが、Flash上で変形・着色などがされてる場合があるので、急ぐ場合はFlashから履き出してしまうのがいいでしょう。スクリーンショットで切り出すのも有効だと思います。

2. JSにアニメとロジックを書いて行く

まずはASを読んでロジックを確認します。大抵の場合ほとんどがUI制御のためのコード※3なので、書きなおした方が早いです。また細かいところはASを記述した人に確認を取って進めていきます。同時にアニメ用のコードも埋めていきます。 Flash再生時の時系列に移植していくのがいいでしょう。ここでも演出の多いFlashが相手だと多くの時間を取られます。サーバーサイドでFlashの動的生成をしている場合は、テスト用のデータを貰えると作業が進めやすくなります。この時の動作確認はPC上でSafariもしくはChromeでやります※4 。（Macの人はSafariで鉄板） ※3 ゲームの場合サーバサイドにゲームロジックがあることも少なくなく、その場合Flash側はログ再生してるだけということが多いです。Flashコンテンツ側でしっかりゲームロジックを持っている場合はこの限りではありません。 ※4 Android、iPhoneともデフォルトブラウザがWebkitなため。現状Firefox、Operaは無視しています。そのため、PC上での確認にSafari・Chromeが使えます。

3. 実機確認

PC上で動いたからといって実機で動くかというとそうは行きません。 Webkitだから同じでしょとか思っていると痛い目をみます。アニメーションを追加するたびに実機確認するぐらい、頻繁に確認します。この結果次第で演出を削ることも検討していきます。

4. サーバサイドとの繋ぎこみ

Flashを動的生成している場合、最後にサーバサイドとのつなぎ込みをします。変数はjsonでHTML上に吐き出し、合成していた画像はhttp経由でダウンロード出来るようにします。

まとめと補足

今回は何らかのロジックが実装されているFlashLiteコンテンツをAdobe Flashで作成している場合の移植の流れを載せました。条件によっては全く別のアプローチの方がいい場合もあるでしょう。例えば、先頭から再生して最後で止まるだけのFlashアニメーションならWallabyで自動変換したものに手を加える方が早く済むかもしれません。またFlexなどスクリプトベースでつくっていればenchant.jsなども視野に入ってくると思います。