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

FlashをHTML5にする作業の流れ

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

前提

移植作業はそれまでのFlashコンテンツの作成方法や、動的合成の有無でまったく別のアプローチが必要になると思います。 ここでは以下の条件下にあるFlashコンテンツの移植を扱います。
  1. FlashコンテンツはAdobe Flashを使って実装されている。Flexは使われていない。
  2. ロジック実装がされており、ボタンによる場面やUIの制御がActionScriptによって実装されている。
  3. ASのバージョンは1だったり2だったりする。
  4. 素材を元に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なども視野に入ってくると思います。

その他の参考文献

[斜め読み]Josh Tynjala「GridshockをFlashからHTML5へ移植してみた」 Flash→HTML5移植は本当か? ハンゲームの事例 もうFLASH不要かも? HTML5アニメ作成ソフト「Hype」登場 iOSにも対応! 【増田(@maskin)真樹】