ソーシャルゲームをスマートフォン向けに出している企業も増えてきました。見ているとWallabyによる自動変換+手作業派とFlashをタッチ対応してAndroidだけ出す派の2派が多いようですね。弊社のアプリでも、Wallabyは真・戦国バスター、Flashのタッチ対応はトイボットで使われています。 あとWallabyとは別のやり方で自動変換を試みたものもあります。 そんな中、愚直に移植を試みるのが、いま紹介している方法になります。 そんなわけで、移植担当のosuga-hです。 FlashLiteコンテンツをスマートフォンに移植する話の続きです。 今回はflaファイルから見た目の部分をHTMLに起こしていく作業にフォーカスして、どんな作業をしたのかをより具体的に説明したいと思います。

前回のあらすじ

  • FlashLiteコンテンツをスマートフォンにも!
  • flaファイルからHTML5にしてみた時の作業の流れを紹介
  • 他にもいろんな人がいろんな工夫してやっている
 

宣伝

諸事情で解説記事なのに画像がないのですが、紹介している方法で移植したものがリリースされました。 代わりに参考になればと思います。

真・戦国バスター

http://pf.mbga.jp/12004957 http://sp.pf.mbga.jp/12004957 (スマートフォン向け)

トイボットファイターズ

http://pf.mbga.jp/12001717 http://sp.pf.mbga.jp/12001717 (スマートフォン向け) ※iPhone版のみHTML5移植

Flashの画面を移植していく

このフェーズが一番職人芸になりがちなポイントで、後の工程の効率にも影響してきます。 Flash/CSS両方に詳しい人が有利です。 逆にFlash/CSSに詳しくない人はここが一番の山場で、ここさえ終わればあとは簡単な山場しかないです。 まずはロジックより先に、「画面」の移植をしていきます。 JSを書くフェーズでも修正が入る箇所なので、無理に完全再現する必要はありません。

今回の目次

概要

  1. 動いているものを見る(概要把握
  2. flaファイルを見る(実装計画
  3. 準備(心の準備
  4. 素材のエクスポートとコーディング(png出力とHTML+CSSの記述)
  5. 補足

付録(のクセに長い)

  1. png画像の出力方法
  2. HTMLとCSSの記述に関して

1. 動いている物を観察して、全体の流れをイメージする

漠然と「場面」と流れがつかめればOKです。

ex1) とあるゲームの場合

  • ヘッダとフッタがあってゲージが動くんだなぁ
  • イベントがあるとカットインが入るんだなぁ
  • 最後は読込中が出て終わるんだなぁ

ex2) また別のゲームの場合

  • キャラが出てきて一言いうんだなぁ
  • キャラの紹介ダイアログが出るんだなぁ
  • ゲーム始まる前の状態で待機だなぁ
  • ヒットの度合いで演出が出るんだなぁ
  • 星が飛ぶなぁ
  • タイマーがあるなぁ
  • 時間切れで終了状態になって待機だなぁ

2. Flashでflaファイルを開く

1. で掴んだ流れがどのように実装されているのか「具体的に」確認して認識とのズレを埋めていきます。 特にチェックするのは、重ね順(レイヤー)と入れ子(ムービークリップ)で、HTMLで再現が難しそうなところが無いかなどチェックしていきます。 再現が難しい点を思いつく限り上げると、、、
  • 複雑なマスク操作(マスク自体がアニメーションしてるなど)
  • ガイドレイヤーによるアニメーション
  • 1コマずつ手動で調整されているアニメ(パラパラ漫画系)
  • ムービークリップの入れ子が深い
この辺は思い切って省略していくことも考えます。 慣れてくるとこの辺で全体の作業や、コーディングの方針が見えます。

3. 作業用のディレクトリを切って、気合を入れる

この辺りから作業を開始します。 対象のflaファイルを、適当な作業用ディレクトリに放りこんで ターミナルから vim index.html を華麗に実行します。 華麗に実行してください。 ここからは vimとFlashとSafariを何度も往復します。 ※vim のところは適宜「エディタ」と読み替えてください

4. flaファイルから素材を切りだして配置

flaからpngに変換しつつ、HTMLにタグとCSSを追加していきます。 付録2の移植方法が基本ですが、往々にして職人芸です。現状では慣れるしか無いです。 この工程で第一段階は終了です。 個人的な好みですが、先に必要な画像を全部吐くのではなく、 画像を吐く → HTMLを書く → Safariを更新 → 画像を…。 と繰り返した方が良いです。 吐き出す画像の選択ですが、背景など重ね順的に下な物や、適当なUIのグループ(例えばヘッダーとか)から着手してます。 具体的なコードの書き方やpngの出力方法は後述します。

補足

アニメーションはこの時実装しませんが、どのように実装するのかは考え始めます。 逆に実装が楽になるようにHTML+CSSを組めると効率が上がります。 ex) 経験値ゲージは-webkit-transform:scale( 現在の経験値/MAX経験値 , 1 ); かな ex) 途中から出てくる要素は初めopacity:0で必要になったらopacity:1かな また明らかにJSからアクセスするHTML要素にはidをバシバシ振っていきます。

まとめ

JS移植最初のステップはHTML+CSSによる画面の再現をしました。 この段階でJSの動的な部分まで考えて置けるとより良いでしょう。 今回は以上です。

付録

付録1. pngの出力方法

大元の素材を使ってもいいのですが、flaに配置されているものはFlash内でエフェクトが加えられていたり、サイズの調整が行われていることが多いのでFlashからエクスポートしています。
  1. 画像にしたいオブジェクトをコピー
  2. 新規ドキュメント作成
  3. 1. でコピーしたものをペースト
  4. ペーストしたものを選択
  5. ALT+F ALT+E ENTER で画像出力ダイアログを出す
  6. 適切なファイル名を英数字で付ける
  7. 範囲をイメージサイズ、カラーを24ビット(必要に応じてアルファチャンネル付きで)
  8. (optional) 外部画像編集ツールで調整。(余分な余白を落としたり)

付録2. HTMLとCSSの書き方について

Flash上で移植する要素をクリックすると幅、高さ、座標などCSSに記述するための数値が確認できるのでそれを見ながらCSSを記述していきます。 基本的には対応するCSSプロパティに記述するだけです。
Flashのプロパティ CSSのプロパティ
x left
y top
width width (scaleが設定されている場合はscaleが1の状態でのwidth) ※1
height height (scaleが設定されている場合はscaleが1の状態でのheight)
scale -webkit-transformプロパティの値にscale(x,y)
rotate -webkit-transformプロパティの値にrotate( R deg ) degは単位
画像 background-image:url( PATH/TO/IMAGE.png )もしくはimgタグ
※1 width, height, scaleは対象にアニメーションが設定されていないか、scaleが変化しないアニメーションが設定されているとき、scale適用後の幅と高さをCSSに記述しても構いません。その時CSSにscaleを設定する必要はありません。 この作業をサポートするFlashHTML5Panelというものを作ったので利用してください。 大した機能はないですが、それでも役に立ちます。