今年正月より調査を行っていた Google App Engine(以下GAE) にて、ゲーム・待ち受け Flash(swf) が簡単に作成できる Webツール「FLA.PRINTER フラプリ」を公開しました。

機能・コンセプト

画像一枚用意するだけでオリジナルの携帯向け Flash 製作を行えます。
結構古い携帯電話にも対応します。(vodafone 等)
簡単に作れるかわりに、Flash の内容もシンプルです。
カスタムモードを用いれば、ある程度 こった Flash を作ることが可能です。
携帯向けの他、PC向けに、マウス対応など 機能を拡張したファイルも同時に出力します。

何かものを作る際、形にするまでには多くの根気が必要となりますが、その根気の必要量をなるべく少なくすべく、シンプルモードはできるだけ簡単なステップで Flash(swf) を生成できるようにしています。生成後に表示される QR コードから、携帯電話で即表示確認・保存が可能となります。

ブロック崩し

現在フラプリでは、ブロック崩しのみが作成可能です。内容はとても単純なブロック崩しなので、ゲーム性は薄いです。バーの中心でボールを当てた際、ブロック貫通ボールになるようにする、等、まだ改良の余地はあるかもしれません。

個人的には、以下のようなムフフな感じでも利用してほしく思います。
サンプルギャラリー : block 3

---
以下少々技術的な余談

python による swf バイナリ解析処理実装

swf 内に任意のスクリプトの埋め込みと、画像データの入れ替えを行う処理を python にて実装しました。

はじめは PIL(Python Imaging Library) を利用して swf に画像を埋め込むための解析処理を作成していましたが、中途、PIL は GAE 上では利用できない事が判明しました。よって GAE 上では、PNG の画像解析に関しては pypng というモジュールを利用し、GIF の解析処理は断念することに。
最終的に、swf バイナリ解析処理は、PIL 利用版と pypng 利用版 を切り替えて利用出来るようにまとめました。

swf 埋め込み対象データはあらかじめ解析しデータストアに登録

ブロック崩しカスタムモードでは背景画像を選択することができます。この背景画像は PNG ファイルなのですが、PNG ファイルを swf 内に埋め込むための解析処理に結構な処理行数を必要としてしまいます。

ユーザからのリクエスト(生成処理呼び出し)のたびに PNG 解析処理を実行するのは よろしくないため、事前に swf 内に埋め込める形にバイナリ解析しデータストアに登録しておく、という方法を採りました。

ローカル PC 上のデータストアに設定したデータを、本サーバ上に登録する方法があるようですが、資料が少なくややこしそうだったため、Web 上からアップロードできる要パスワードの専用ページを別途作成することに。

様々な状況に応じた swf を出力するための fla ファイルと jsfl の作成

jsfl を用い、パブリッシュ時に ガイドレイヤーやプロファイラを動的に切り替えることで、一つの fla ファイル内に 携帯向け Flash Lite 1.1 用スクリプトと、PC向け Flash Player 7 用スクリプトの両立を行っています。

今回作成したブロック崩し用 fla ファイルでは jsfl を実行すると、以下のような swf (計16種類)がパブリッシュされます。

fla
├ シンプルモード用
│　├ ゲーム用
│　│　├ Flash Lite 1.1 用
│　│　│　├ jpg 画像用 swf
│　│　│　└ png 画像用 swf
│　│　└ Flash Player 7 用
│　│　　　├ jpg 画像用 swf
│　│　　　└ png 画像用 swf
│　└ 待ちうけ用
│　　　├ Flash Lite 1.1 用
│　　　│　├ jpg 画像用 swf
│　　　…　…
│
└ カスタムモード
　　├ ゲーム
　　…

ユーザがシンプルモードで投稿した画像が jpg だった場合、サーバ側では「シンプルモード」の「jpg 画像用 swf」4種類を取得し、それら swf 内に投稿 jpg の埋め込みを行います。

PC 向け Flash(swf) が Flash Player 7 である理由は、Flash Player 7 が Flash Lite 1.1 用スクリプトを判別可能な最大のバージョンであるからです。Flash Player 8 からは Flash Lite 1.1 のスクリプトはパブリッシュできません。

動作検証の手間

Google App Engine SDK でのローカル(Windows上)環境上では動作したものが、サーバにアップロードすると動作しない、といった箇所がいくつかありました(後述)。バグを完全に取り除いてから本サーバにアップロード、という手順は無理かもしれません。
また、Google App Engine Launcher からの「Deploy」コマンドによるファイルアップロードは 毎回 ID と パスワード入力を行わなくてはならないため、本サーバ上での動作確認はやや手間がかかります。

ローカルと本サーバとの動作の違い

urlopen によるファイル取得に関しまして、ローカルと本サーバ上とでは動作が異なる点に少々つまづきました。

Windows 上では、プロジェクトルートからの相対パスで静的ファイルが取得できるのに対し、本サーバ上では相対パスでの urlopen による静的ファイルの取得は不可。「http://～」というアドレス経由で Web 上から取得できる形にしておけば本サーバで取得可能。しかし、ローカル環境上では「http://localhost～」というアドレス経由では urlopen が機能せず？ファイル取得できず。

結局、ローカル環境上では相対パスで、本サーバ上では「http://～」経由でファイルを取得するような処理を作成することに。webapp のテンプレートファイルのファイルパス指定は相対パスでローカル本サーバどちらとも正常に機能するので、何かよい方法があるのかもしれません。

エラー後の表示は適当

ユーザが設定する画像のフォーマットエラーや容量オーバー時等に発生するエラーにて、「フォーマットエラーです」といったきちんと場合分けしたエラー表示処理は面倒なのでまだ行っていません。エラー発生時は強制的にホームに戻されるという、やや不親切設計です。

ブロック崩し 画像分割

古い携帯機種にも対応するために、ブロック画像を細かく分割するという作業を行っています。一つの大きな画像をブロックの数だけスクリプトで複製し、各ブロック内では画像の一部分を表示する、という方法が本来はセオリーであり、簡単で swf 容量も少なく済みます。しかしその簡単な方法ですと 昔の携帯機種ではブロック消去時に負荷がかかるようで、画面が一瞬止まってしまうという現象が発生します。事前に画像をわざわざ小さく分割するのは苦肉の作であります。

開発者向けおまけツール swfdumper

今後の開発用に、Web 上から swf 内ヘッダとタグを解析し表示するツールを作成しています。どのタグのデータを入れ替えれば良いのかを判別するために利用します。

http://flaprinter.appspot.com/swfdump/

解析結果は header, tagSet, tagMap の順で表示されます。

　header --- swf ヘッダ内のデータ
　tagSet --- 登場順タグ一覧
　tagMap --- タグ毎の 登場順に ID を割り振った一覧

サイト内表示している広告に関して

Amazon 商品の表示を行う予定でしたが、東北関東大震災により Amazon が正常に機能していない状況のため、現在は勝手に日本赤十字社へのリンクを貼らせていただいております。

以後の予定

■ swf バイナリ解析処理の拡張

画像表示領域(DefineShape)の動的変更

■ ゲーム第二弾製作

ブロック崩しの次のゲームを製作中。二作目まで製作できたら量産体系が整うことになりそうなので、以後は Flash Lite の製作のみに集中できそうです。

[ FLASH ] [ tips ] [ update ] [ web service ] 投稿者 siratama : 2011年03月26日 16:05