KLab若手エンジニアの これなぁに？

ソーシャルゲームをスマートフォン向けに出している企業も増えてきました。見ているとWallabyによる自動変換＋手作業派とFlashをタッチ対応してAndroidだけ出す派の2派が多いようですね。弊社のアプリでも、Wallabyは真・戦国バスター、Flashのタッチ対応はトイボットで使われています。 あとWallabyとは別のやり方で自動変換を試みたものもあります。

そんな中、愚直に移植を試みるのが、いま紹介している方法になります。
そんなわけで、移植担当のosuga-hです。

FlashLiteコンテンツをスマートフォンに移植する話の続きです。
今回はflaファイルから見た目の部分をHTMLに起こしていく作業にフォーカスして、どんな作業をしたのかをより具体的に説明したいと思います。

前回のあらすじ

• FlashLiteコンテンツをスマートフォンにも！
• flaファイルから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で再現が難しそうなところが無いかなどチェックしていきます。
再現が難しい点を思いつく限り上げると、、、

• 複雑なマスク操作（マスク自体がアニメーションしてるなど）
• ガイドレイヤーによるアニメーション
• １コマずつ手動で調整されているアニメ（パラパラ漫画系）
• ムービークリップの入れ子が深い

この辺は思い切って省略していくことも考えます。

慣れてくるとこの辺で全体の作業や、コーディングの方針が見えます。

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というものを作ったので利用してください。
大した機能はないですが、それでも役に立ちます。